6. group assignment progress (progression - website)

6. Progression - Website

6.1 mindmap
Website will be our main media to gather the information and media. Before getting started with the
execution of a website, we have some brainstorming sessions and discussion to figure out the concept
of the website and what is the content to put in the website.

figure 1 : website idea brainstorming mind map







6.2 the idea (content & layout)
After confirming the idea and concept of the website for the campaign, we analyzed it and concluded
it to let it have a clearer vision. The goal for this website is to let the audience participate in the web
series episodes, meanwhile search the clues in the website to get inspiration unleashing themselves.
Also, gaining awareness of the brand, H'ANA. To categorize all the information, we have made
some sketches of the website layout and finalize the content. The idea of the website is a platform
where it gathers the episodes of web pilots, the clues, and introduction of the campaign. Participants
will visit the website to watch the video first then being led to Twitter and Instagram. At last, leading
them back to the website again to play a mini game “guess the correct answer to get free vouchers”.
It is to have interactions with the audience, and fully utilize the website. We wanted to connect with
the audience and have more interactions. Instead, we insert some of the clues in the website to let
the participants search for it. 

Content:
- homepage (video description and video episode 1)
        (answer form, answer submit by participants to redeem free gift)

- synopsis page (about the storyline)
  (introduction of characters and audience may follow their stories)

- history page (some clues are inserted here)
- inbox page (some clues are inserted here)

.
figure 2 : content, layout planning website idea brainstorming mind map




figure 3 : a rough sketch of how the website layouts will looks like







6.3 wireframe
Wireframes of the website are created for a better understanding. Well, after creating the website,
it is indeed helpful to overview the whole website and be able to point out mistakes and improvements
in further development. Therefore, after a few rounds of trial and error, a final wireframe of the website
is done. Which, the next step is going to execute the website. 

figure 4 : wireframe of website






6.4 website progress
During the process of the website, it was a fun experience where we learned a lot too. From a basic
website until the website we intended to create. However, we felt it lacked interactions and excitement,
thus, we created some gif animations to add on to the website. The aim is to create some excitement
for the audience and gain their interest to find the next story. 

figure 5 : layout progression of website


figure 6 : layout progression of website


figure 7 : form that allow participants to submit the correct answer for free gift


figure 8: animation frame progress 


figure 9: animation frame progress 

Comments