Application Design I - Final Project: High Fidelity App Design Prototype

on

08/07/2024 - 05/08/2024 / Week 12 - Week 15
Joey Lok Wai San / 0350857
Application Design I / Bachelor of Design (Hons) in Creative Media 
Final Project: High Fidelity App Design Prototype


TABLE OF CONTENTS


LECTURES

Usability Heuristics for User Interface Design | Week 13


Fig. 1.1 Usability Heuristics for User Interface Design, Week 13


INSTRUCTIONS


https://drive.google.com/file/d/1XHcp1NBrzZ_XnN209zWIjjFqdAv3evJj/preview 


FINAL PROJECT: High Fidelity Prototype

In the final project, we will synthesize the knowledge gained in tasks 1, 2 and 3 for application in task 4. We will create visual asset and refine the prototype into a complete working and functional product experience for a selected task. Due to time constraints, usability testing for high fidelity prototype is not compulsory.


UI Toolkit 
The first thing I did was improve on my UI toolkit, specifically the colour scheme. I noticed that the yellow was too bright and light, making it hard to read any text placed on top of it. To fix this, I used this website to find different colour shades and tints. This really helped me a lot.

Fig. 1.1 Find Colour Shades and Tints - Website, Week 14 (25/07/2024)


Fig. 1.2 New Yellow Shade on Button Component, Week 14 (25/07/2024)

This is the improved UI toolkit with the updated colour palette. In my opinion, the colours look more cohesive together and I like this over the original version. 


Design Process
This is the process of developing the high fidelity prototype in Figma, and making the improved low fidelity prototype from Project 3: Low Fidelity App Design Prototype function. 

Onboarding Page
The first thing I worked on in the high fidelity, improving from the low fidelity prototype, is the onboarding page. I wanted it to be interactive and animated to capture the users' attention when they first open the app. To do this, I sort of followed this YouTube tutorial below to get the interaction I desired.

Fig. 2.1 Splash and Onboarding Screen - YouTube Tutorial, Week 14 (25/07/2024)


Fig. 2.2 Onboarding Page Process, Week 14 (25/07/2024)

Home Page
Since I will be using horizontal and vertical scrolling to show off the restaurants on the home page, I gathered a list of restaurants from Google as well as their detail so that I could add them to these cards. I then replaced the placeholder colour fill with dishes from the restaurant.

 
Fig. 2.3 Adding Content into Cards, Week 14 (25/07/2024)


Fig. 2.4 All Cards with Content, Week 14 (25/07/2024)

I played around with the layout a little with the layout of the home page as well. I wanted the home page layout to be as simple and clean as possible, without too many unnecessary elements. The home page consists of the Eatigo logo, advertisement banner, search bar and categories users may look at for recommendations.


Fig. 2.5 Home Page Layout Design, Week 14 (25/07/2024)

I also made a carousel for the home page, so that when users first open the app they are captivated by the interactive element. I watched a YouTube tutorial on how to make a carousel work, as it is different from making a horizontal scroll. I wanted the carousel to highlight the promo code, in reflection of Mr. Zeon's feedback in the low-fidelity project.


Fig. 2.6 Automatic Carousel - YouTube Tutorial, Week 14 (25/07/2024)


Fig. 2.7 Home Page Carousel, Week 14 (25/07/2024)

Search Page
Moving on to the search page, I designed the search bar to have a light shadow underneath it to signal that the item is clickable and draw the users' attention to it from the rest of the page. Below it I added the filter and find availability buttons. Before this, I wanted to put a filter icon beside the search bar but thought it would be hard to click.


Fig. 2.8 Search Bar Design, Week 14 (25/07/2024)


Fig. 2.9 Adding Content into Seach Page, Week 14 (25/07/2024)

Restaurant Page
The restaurant page had the most amount of content to put in, so it was really difficult designing the layout. The original layout as seen below, was expanded upon to create a new layout. I wanted to make this page scrollable so I had to put all the content into one frame.


Fig. 2.10 Original Restaurant Page Layout, Week 14 (25/07/2024)

One of the issues I faced was that when I created the vertical scroll everything got messed up because I didn't use the auto layout. The items were flying everywhere and not even grouped together properly. After tediously applying auto layout to everything one by one, I managed to create the restaurant page layout as a whole.


Fig. 2.11 Applying Auto-Layout and Vertical Scrolling Gone Wrong, Week 14 (25/07/2024)


Fig. 2.12 Restaurant Page Design Process, Week 14 (25/07/2024)

Profile Page
The picture below is me experimenting with different types of layouts that will be best suitable to display the profile and the other elements in the page.


Fig. 2.13 Search Bar Design, Week 14 (25/07/2024)


High Fidelity Prototype in Figma
These are all the pages in the Eatigo redesigned app. 

Fig. 3.1 Onboarding Page, Week 15 (29/07/2024)


Fig. 3.2 Login Page, Week 15 (29/07/2024)

Fig. 3.3 Home Page, Week 15 (29/07/2024)


Fig. 3.4 Search Page, Week 15 (29/07/2024)


Fig. 3.5 Favorites Page, Week 15 (29/07/2024)


Fig. 3.6 Reservation Page, Week 15 (29/07/2024)


Fig. 3.7 Reservation Process Page, Week 15 (29/07/2024)


Fig. 3.8 Restaurant Page, Week 15 (29/07/2024)


Fig. 3.9 Ratings and Reviews Page, Week 15 (29/07/2024)


Fig. 3.10 Profile Page, Week 15 (29/07/2024)


Usability Testing
Once the high-fidelity prototype was completed and linked to be interactive, I used the same three scenarios to instruct the participants on how to perform a specific action. This time around, I made the scenario more descriptive of what the user should do. For Scenario 2, I had 3 different tasks and I assigned one to each participant.

Scenarios Given:
Scenario 1: Log in to an account
Imagine you are a new user interested in exploring restaurant deals on Eatigo. Start from the app's welcome screen and go through the process of logging in.
  1. Open the Eatigo app
  2. Navigate the onboarding and login page
  3. Enter the registered email
  4. Enter the password
  5. Log in to the app and explore the app’s features and functionalities.
Scenario 2: Search for a restaurant
In this scenario, imagine you are looking for a specific type of restaurant in a particular area. Use the app's search feature to find options that match your preferences.

Task A:
- Go to the “Search” page
- Find a specific restaurant using the search bar, Tian Dian

Task B:
- Now imagine you don't know what you want to eat and need recommendations, click on the top categories.
- Click on 'Japanese' to view a list of Japanese restaurants.

Task C:
- Use the search bar to find restaurants offering the cuisine you want.
- Narrow down the search results using the filters.
- Filter restaurants to find only Japanese restaurants at $$$ price.
- Only find restaurants available for 9th July.
- Select a restaurant and view the details.

Scenario 3: Make a reservation
After finding the restaurant you want, make a reservation at a restaurant.
  1. Browse through the restaurant page to look at its details
  2. Click on the 'Reserve Now' button to start the reservation process
  3. Make a reservation for 2 pax, on 9th July at 1 PM. Select any discounts available and continue.
  4. Check your reservation details, and enter in any promo code.
  5. Complete the reservation process.
  6. The reservation details can be viewed under the 'Reservation' page
  7. If you want to make any changes, you can modify or cancel the reservation. Edit the reservation to become 10th July, then click confirm. Click cancel to cancel the reservation.
Fig. 4.1 Usability Testing Scenarios in Figma, Week 15 (31/07/2024)

Then, I recruited the same three participants and assigned the scenarios to each user. Once again, the usability testing was conducted via a Zoom call and the Figma link was shared with users for testing. Here is the recording of the users performing the tasks during the usability testing.

YouTube Link to High Fidelity Usability Testing: https://youtu.be/5V3MsTSPXUg

Fig. 4.2 Usability Test Recording - 3 Participants, Week 15 (31/07/2024)


User Feedback
Similar to the low-fidelity user feedback, I asked the participants a set of prepared questions. Their responses were more or less the same as the previous task so I just carried them over into this document.


Fig. 4.3 User Feedback from Usability Test, Week 15 (31/07/2024)


Improvements
Since there weren't any suggestions for improvements gathered from the user feedback, I went to Mr. Zeon for help on any changes I should make. I made the necessary changes based on his feedback to improve the interface design.

The first thing I did was to change the colour of the promotion to stand out. In this case, to match the brand's identity, I used red, since it draws attention a lot and is Eatigo's primary brand colour.

Fig. 4.4 Changing Promotion Text Colour, Week 15 (04/08/2024)

The other thing I did was to replace the profile icons with actual photos to make the high-fidelity look more realistic and cohesive. Putting real pictures also made the interface look more complete as the icons just looked like placeholders.

Fig. 4.5 Adding Photos into Placeholders, Week 15 (04/08/2024)


Final Project: High Fidelity App Design Prototype

Fig. 5.1 Final High Fidelity Prototype - Eatigo Mobile Application, Week 15 (04/08/2024)


Fig. 5.2 Final High Fidelity Prototype - Eatigo Mobile Application, Week 15 (04/08/2024)


YouTube Link to Video Walkthrough: https://youtu.be/FF0xDsa9qm0 

Fig. 5.3 Video Walkthrough High Fidelity Prototype - Eatigo, Week 15 (04/08/2024)

FEEDBACK

WEEK 14
- You only need one restaurant page, but just make sure you have all text, image, color, and details inside
- If you have a restaurant list page with different restaurants, but clicking on any of them leads to the same restaurant page, it doesn't make sense. You might need at least two restaurant pages with details that can be clicked into, while the rest remain unclickable.

WEEK 15
- Put real pictures for the profile photo
- Use different a colour to highlight the promotion - use the brand colour 


REFLECTION

Oh my god the relief I felt when I completed this assignment is insane. The final assignment has been a long one, but in reality the time frame was extra short. The same as the previous project, I observed that by watching YouTube tutorials, I am able to get my work done and learn much more. I was also able to improve my prototype by gathering feedback and applying them. For this final project, there wasn't much that needed changing in my work, it was just minor things. The only thing I would say though is that I wished I had more time. I think we spent so much time researching in the first two projects that the final two projects were so cramped and last minute. Oh well, I'm just happy that I can submit this final assignment. It's been a very long and tedious semester, but I'm still proud of the work I have done. I would also like to thank Mr. Zeon for this time and patience in reviewing all our work and responding to messages at all hours of the day. A true legend frfr

Comments

Post a Comment