3. Personal Apps Assignment Progress (Progression)

3.1 user interface sketches

To kick start with the prototype, I’ve drawn some sketches on the flow of the apps. It is to let myself remember the flow of the prototype and the contents.

____________

3.2 user interface wireframe (on digital)

To have a clearer idea on how will the apps look like, I decided to make a wireframe of the user interface. 

____________

3.3 apps prototype progress (home page)

First, I started with my home page prototype layout first. There are trial and errors and experiments were put in the process. Well, I indeed learned a lot from 0 to now on how a prototype should look like. Here's what the layout of my home page looks like.

Figure 1: the loading page and welcome page 

Figure 2: the home page (where users can customize their essential oil based on their personalities)

 

Figure 3: the payment page & get it free with voucher code (users able to choose whether to use the voucher code they received from website or purchase it with payments)

Figure 4: when users choose to use payment, it will directs to the payment loading page; As if users used voucher code to redeem it with free, they will need to enter their details for delivery

Well, I felt it would be more interesting to add on animations. Therefore, I’ve created some animations for some pages.

Figure 5: animation frames for home page (the machine that generates personalities into essential oil)

Figure 6: animation frames for using voucher code page

Figure 7: animation frames for payment redirecting loading page

Figure 8: animation frames for apps loading page

____________

3.4 apps prototype progress (essential oil page)

After the execution of the home page, I work on the essential oil page. This page idea is to let the users have a guide to refer, understand essential oils as well as the characters from the storyline. Thus, users can take it as a reference on what ingredients or mixture of essential oil will be inserted in the essential oil.

 

Figure 9: progression of essential oil page

____________

3.5 apps prototype progress (community page)

As for the community forum page, the aim is to connect “fans” consumers and us. Users can share their experience on their journey towards “unleashed themselves” and the feelings using the essential oils that are customized based on personalities. 

 

Figure 10: progression of community forum page