Application Design I - Project 3: Low 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 
Project 3: Low Fidelity App Design Prototype


TABLE OF CONTENTS


LECTURES

Wireframe and UI Kit | Week 11


Fig. 1.1 Lecture Slides - Wireframe and UI Kit, Week 11


INSTRUCTIONS


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


PROJECT 3: Low Fidelity App Design Prototype

Once the UX design process is completed, we can now create a low fidelity prototype of the app. We need to arrange all the screen wireframes, actions, visual feedback and link them up in Figma. We are then required to perform usability testing whereby we will test out our low fidelity prototype and gather all the information, response, feedback, pain points observed from the test.


UI Toolkit - Visual Design Concept
To start the project, we were tasked with creating a UI toolkit which consists of identifying our app's typography, iconography, color palette, components, and layouts and grids.
Color Palette
Based on the feedback gathered from the respondents in Project 2: UI/UX Design Document, there are a few mentions of the app's main primary colour, red, being too intense since it draws the users' attention. To improve upon this aspect of the app design, I decided to adjust the colour scheme of the redesign application. For the new colour palette, I incorporated more neutral colours, such as black, white, grey, and blue-grey, to make it a more balanced colour scheme. I wanted to make use of the app's other primary colours, yellow and orange, instead of making everything red like the current app design. The red colour would only be limited to elements that need to capture the user's attention. This makes it more visually appealing while maintaining the original brand colours. 

Fig. 1.2 Colour Palette, Week 12 (08/07/2024)

Typography
In terms of typography, I had three font options to choose from to use for the application. My options were between the fonts 'Inter', 'Lato', and 'Poppins', as shown below. They all had good and bad characteristics. 'Inter' has a large variety of font styles that will be beneficial for creating a visual hierarchy. 'Lato' has a thinner stoke but has fewer font styles. 'Poppins' was more similar to Eatigo's logo font which would make it a good match for the application design, however, it is quite a wide font so it would take up a lot of space and may be hard to read. 

Fig. 1.3 Font Options - 'Inter', 'Lato', 'Poppins', Week 12 (08/07/2024)

In the end, I chose 'Inter' since it was a very readable font and one of the most popular fonts for interfaces. The wide range of font styles and weights will make it easy to differentiate between header and body text, which is one of the main problems of the current app design.


Fig. 1.4 Typography, Week 12 (08/07/2024)

Iconography
In terms of iconography, I used a plugin from Figma and chose those with an outline stroke instead of icons that are filled. The plugin from Figma is honestly a lifesaver and it is so easy to find appropriate icons. 

Fig. 1.5 Iconography, Week 12 (08/07/2024)

Components (text field, buttons, etc)
I decided to make text field components grey to indicate text can be entered in this area, as well as to not make it too distracting from the rest of the elements on the page. The buttons are designed to be in grey, yellow and red. The grey-blue colour will be used for any unclickable buttons. The yellow buttons will have an outline and when hovered over and clicked, they will be filled. This button is used to indicate that users can click to view more, such as filter and sort. The red button will be used for call-to-action buttons because red commands attention and draws the eye.

Fig. 1.6 Components, Week 12 (08/07/2024)


Wireframe References & Sketches
After creating the UI toolkit and completing the previous project, I proceeded to create a low-fidelity prototype for Eatigo. To begin, I looked at other reservation apps, such as the competitors of Eatigo studied in Project 1: Mobile Application Proposal. I analysed their layout design and found them to be good references as inspiration for the redesign. 

These are some layout references of reservation apps like Eatigo, as seen below: 

Fig. 2.1 References of Reservation Apps, Week 12 (08/07/2024)

Based on this, I made some wireframe sketches of how I wanted the redesign to look so I could get a few ideas down.   

Fig. 2.2 Rough Wireframe Sketches, Week 12 (08/07/2024)


Low Fidelity Prototype in Figma
Before creating the wireframe, I watched some tutorials on YouTube to become more acquainted with Figma since it has been a while since I used the app. After watching these tutorials, I felt more familiar with using the application though I'm still quite unsure of most of the features but oh well. 


Fig. 2.3 Prototyping in Figma, Week 12 (08/07/2024)

To start the prototype, I created a frame size for an iPhone mobile device and applied a grid guide. This helped make the layout more consistent when designing the app and aligning items. For low-fidelity wireframes, we will stick to monochrome colours like dark grey and light grey. 


Fig. 3.1 Grids and Guides, Week 13 (15/07/2024)

For some of the pages, like the home page, there is a lot of content to be displayed. To make the layout better and more organized, I found a way to create horizontal and vertical scrolling through watching a few YouTube tutorials. This was the tutorial I referred to the most when it came to any scrolling elements. 


Fig. 3.2 Horizontal and Vertical Scrolling - YouTube Tutorial, Week 13 (15/07/2024)

I then proceeded to create all the other pages of the app.


Fig. 3.3 Login Page, Week 13 (15/07/2024)


Fig. 3.4 Home Page, Week 13 (15/07/2024)


Fig. 3.5 Search Page, Week 13 (15/07/2024)


Fig. 3.6 Favorites Page, Week 13 (15/07/2024)


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

Fig. 3.8 Reservation Process Page, Week 13 (15/07/2024)

Once the wireframe was more or less done, I linked everything together so that the low-fidelity prototype is interactive and able to be tested by users for feedback. This was a very long and tedious process because every action needs to be linked to a frame and linked back, etc.

Fig. 3.9 All Low Fidelity Prototype Pages, Week 13 (20/07/2024)


Fig. 3.10 All Pages with Interactions, Week 13 (20/07/2024)


Usability Testing
When the wireframe prototype was completed, I went on to the next stage which was usability testing. First, we are tasked to create three scenarios (specific actions you want the users to take, such as checking account balance and transaction history). 

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. Open the Eatigo app and navigate the onboarding and login page. Enter the registered email and the password. 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. Go to the “Search” page. Click on the search bar to look for restaurants offering the cuisine you want, and view your recently viewed and recommended for you options. Narrow down the search results using various filters (e.g., location, price range). Select a restaurant and view the details.

Scenario 3: Make a reservation
After finding the restaurant you want, make a reservation at a restaurant. Browse through the restaurant page to look at its details. Click on the 'Reserve Now' button to start the reservation process. Enter the number of pax, date, and time, and select any discounts available. Check your reservation details, and enter in any promo code. If you want to make any changes, edit or cancel the reservation. Complete the reservation process. View the reservation details under the 'Reservation' page

Fig. 4.1 Usability Testing Scenarios in Figma, Week 13 (20/07/2024)

Then, I recruited three participants and assigned the scenarios to each user. 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 Low Fidelity Usability Testing: https://youtu.be/2onfBFNLwmU 


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


User Feedback
After the testing, I gathered user feedback from the participants by asking them a set of prepared questions. This is then used to improve the low-fidelity wireframes. Below is the document consisting of the user feedback.


Fig. 4.3 User Feedback from Usability Test, Week 13 (20/07/2024)


Improvements on Wireframe Prototype
Based on the user feedback above, I made some minor changes to enhance the user experience as well as the user interface of the low-fidelity prototype. I also made additional and necessary changes based on the feedback provided by Mr. Zeon in our consultation.

The first thing I did was to add an onboarding page as a way to welcome the user into the app. It was recommended we use illustrations and highlight key features and functions of the app in these pages. 


Fig. 5.1 Adding an Onboarding Page, Week 14 (22/07/2024)

Another thing I did was to add the profile page. Initially, I did not intend to create the page, but to accommodate to Mr. Zeon's feedback I made one to state users who use Eatigo get a discount when they use their app to reserve a restaurant. 


Fig. 5.2 Adding a Profile Page with 'Rewards', Week 14 (22/07/2024)

Once the necessary additions were made to improve the low-fidelity prototype, I made a second version that was more advanced and had all the features (e.g. being able to click on calenders, options, etc). This improvement was more detailed and finalized, compared to the previous one which is more of a rough wireframe. However, some functions that are still missing and will be added on in the high-fidelity prototype. 

Fig. 5.3 All Improved Low Fidelity Prototype Pages, Week 14 (22/07/2024)


Fig. 5.4 All Improved Pages with Interactions, Week 14 (22/07/2024)


Project 3: Low Fidelity App Design Prototype

YouTube Link to Video Walkthrough: https://youtu.be/S7XnR_CYtGg
*This is a walkthrough of the original low-fidelity prototype. The improved version is not fully functioning and needs further enhancement, go to Final Project: High Fidelity App Design Prototype

Fig. 6.1 Video Walkthrough Low Fidelity Prototype, Week 15 (29/07/2024)




Fig. 6.2 Low Fidelity Prototype in Figma File, Week 15 (29/07/2024)

Fig. 6.4 Final Low Fidelity Prototype - Eatigo Mobile Application, Week 15 (29/07/2024)



Fig. 6.5 Final Improved Low Fidelity Prototype - Eatigo Mobile Application, Week 15 (29/07/2024)

FEEDBACK

WEEK 12
1. Ensure that the coupon codes or vouchers include expiry dates. Also, indicate the restaurant's closing time. These details should be mentioned in the app store description.

2. Make sure there is a reservation history page and a page confirming successful reservations.

3. Provide a "Forgot Password" page for users who forget their password when attempting to log in.

4. Is there a page for promotional codes or vouchers? Currently, I don't see one. You may need to consider adding this feature.

5. Overall, it seems like you're making progress. Keep up the effort! Please review your user flow chart to ensure all actions and processes are included in the wireframe. The wireframe should not only cover essential pages but also link all actions together to create a complete prototype. If any step is missing before the user completes an action, it may not function correctly.

WEEK 13
- Add an onboarding page with illustrations
- Since it is not a feature provided by the app, you can ignore the feedback with promotional codes or vouchers feature, as well as its expiry dates. You can just state users who use Eatigo get a discount when they use their app to reserve a restaurant. It can be included in the profile page. 


REFLECTION

My experience with this project has been somewhat neutral. I didn't love it nor did I hate it, I just hated making interactions with Figma and doing a lot of things in such a short time. There wasn't much that I learned from this project, which is kinda sad, and most new things I did learn was from watching tutorials. I observed that by watching these tutorials I am able to better understand how to use Figma firsthand and there are a lot of resources out there to help with this. My findings with this module is that getting feedback from lecturer and users are important to improving the app. Without their feedback and comments, there would be nothing to improve on when there clearly is. You're making the app for users, so clearly you need users to test it out.

Comments

Post a Comment