Application Design Final Project - High-Fidelity App Design Prototype

on


19th December 2024 - 7th January 2025 (Week 13 - Week 15)

Sin Jun Ming 0364638

Application Design / Bachelor of Design in Creative Media / Taylor's University

Final Project - High-Fidelity App Design Prototype


INSTRUCTIONS


Final Project - High-Fidelity App Design Prototype

Instructions:

In this final project, we are assigned to create a high-fidelity prototype for our mobile application. This prototype should showcase the final visual design, interactions, and functionality of the application. The high-fidelity prototype will serve as a realistic representation of our application, enabling users to experience and provide feedback on the final design. It should demonstrate a polished and refined user interface that aligns with the branding and usability principles established throughout the design process.

Requirements For This Task:

1. Visual Design:
Implement the finalized visual design concept you created in the previous tasks. This includes color schemes, typography, icons, and any other visual elements that contribute to the overall look and feel of the application. Pay attention to details and ensure consistency across all screens.

2. Interactions and Transitions:
Bring your application to life by incorporating interactive elements and seamless transitions between screens. Use appropriate animations and transitions to enhance the user experience and create a natural flow within the application.

3. Functionality and Navigation:
Implement the core functionality and navigation of your application. Ensure that all interactive elements are fully functional and behave as expected. This includes buttons, forms, menus, and any other interactive components specific to your application.

4. Content Integration:
Populate the prototype with realistic content to demonstrate how the application will look and feel with actual data. Use representative content and consider different scenarios to showcase various features and interactions within the application.

5.Usability Testing:
Conduct usability testing on your high-fidelity prototype to validate the design and gather user feedback. Recruit participants who match your target audience and observe their interactions and feedback. Make note of any usability issues or areas for improvement. Minimum 5 participants for the testing.


Week 13 / Prototype Design

1. Color Palette
First of all, I need to determine the color palette for the application. The main color from the original Encode app is blue color, moreover, from the suggestion and feedback in the Task 2 interviews, blue color and darker colors are preferred. Hence, I searched for the ideal colors using coolors.co. 

Fig 1.1 Color palette

2. Typography
I decided to use the typeface "Inter" as it is clean and simple enough to maximize the ease of reading. User can feel comfortable while reading a large amount of text in the lecture feature.

Fig 2.1 Font used

3. Icons
As icons are very important in the application design, I decided to get the icons from fontawesome.com, as it provides every kind of icons I needed. Here are some icon examples I have found from the website.

Fig 3.1 Icons

4. Design Process
First thing first, I applied the dark blue color from my color palette on the background as the main background color. 

Fig 4.1 Log in page

Horizontal scrolling box is applied on the "Recommended Courses", "Skill Selection" and "Hottest Discussion" at the homepage. A big welcome "Welcome, Jun Ming" is added below the search bar to provide extra emotional value to the user before starting to use the app's features.
Fig 4.2 Homepage design

At the bottom of the homepage, I added the logo and motto of Encode to reinforce Encode's brand identity, ensuring users remember the app and associate it with its mission or values.

Fig 4.3 Bottom of homepage design

Different shades of blue color are applied on the course description and overview pages to ensure color consistency.

Fig 4.4 Course description and overview

For the banner that pop-up from bottom, I decreased the opacity for the content at the background so that the user can focus on the banner pop-up.

Fig 4.5 Lecture pop-up

After finishing the first lecture "1.1 Introducing Java", the user will be led to the next lecture "1.2 Writing Java code".

Fig 4.6 Lecture change once completed

The green color tick shown on the reward page can immediately stimulates the reward system of the user after completing a lecture, motivating the user to keep continue using the application.

Fig 4.7 Reward page once a lecture is completed

After getting feedback from Mr. Zeon, I arranged the "Achievement Badges" section to above as it is more important. "Latest Learn" feature gives user a quick access to directly go to the previous learnt lesson. "Completion Certificate" is only opened to the course that has been 100% completed, the choice here is Python.

Fig 4.8 Progress page

"Day Streak" and "Completion Certificate" both can be shared by user to different social medias.

Fig 4.9 "Day Streak" & "Completion Certificate"

The "Achievement Badge" is shown below the username in the profile. The crown is also shown in the profile page according to the result in the "Leaderboard" page. 

Fig 4.10 Profile page

Here's the overall design the prototype flow of my redesigned Encode app:

Fig 4.11 Overall design of the app

Fig 4.12 Overall prototype flow

Week 14 / Usability Testing
Similar with the last task, user testing will be made to gather feedback on my high-fidelity prototype where users will perform tasks for the 3 scenarios. I will now recap the 3 scenarios:

First scenario: Complete a lecture
  1. At the homepage, click on the Java course either from "Recommended Courses" or from "Skill Selection". 
  2. Then, description and course lecture overview will be shown. Current progress of lecture will pop up once the "Let's go" button is clicked.
  3. Eventually, the user will go through a series of lecture and finally complete an exercise at the end. User will be rewarded in addition of XP once the lecture is completed.
Second scenario: Complete a challenge
  1. The user will need to complete a "Challenge" for the second scenario. The user will click on the first challenge - "Visitor Report" and start the challenge. XP will be rewarded for each question answered.
  2. A reward page will be shown in the middle of the challenge to motivate the user in finishing the remaining question.
  3. Eventually, user will get to see the total XP earned throughout the challenge once it is completed.
Third scenario: View and share the progress
  1. In this scenario, user will go to the progress page through the navigation bar and check out all the features. First feature is the day streak feature where user can see how many day that he has been using this app.
  2. User can also see his completion certificates for the courses he has 100% done.
  3. Last but not least, user gets to see his achievement badges that he has achieved within the app.

5. Usability Testing Video
Video 5.1 User 1 - JunYu
User 2 - Yong Ping: https://youtu.be/gJiNRrAjS8Q
Video 5.2 User 2 - Yong Ping
User 3 - Natalie: https://youtu.be/pCAaU5TS2sc
Video 5.3 User 3 - Natalie

6. User Feedback
Color scheme - For the color scheme chosen in the high-fidelity prototype, users returned positive feedback on it. Especially Yong Ping, who had suggested to use dark blue color for the app design background back in Task 2 interview, thinks the color chosen and overall visual design is pretty good. Third user - Natalie also stated that the colors chosen are suitable for coding environment which enhance visual experience of the user.

Overall user experience - Most users provided positive feedback on the overall user experience, stated that the app is easy to use and user-friendly. The design is simple and clean but interesting according to user's feedback.

Homepage redesign - Common opinions indicates that the homepage redesign enhances the visual experience compared to the original app. Different categories are arranged very well at the homepage and visual hierarchy is good.

Addition of navigation bar - With the addition of a navigation bar, users gave feedback on better navigation experience. Users can now navigate to different pages easily and effortlessly.

Ease of completing tasks - The three tasks assigned are pretty easy to be completed according to the user feedback. The task is simple and straight-forward which avoid user spending too much time on a single task.

7. Final Outcome
Feedback

Week 14

The XP "+50" needs to be enlarged. Color of the tick at the reward page needs to be changed to green color. For the reward page in the middle of the challenges page, create a simple illustration that shown the user has completed two questions and there is only one question left. The "Achievement Badges" section needs to be move above because it is a more important information. 

Reflection

Throughout this module, I explored the basic design principles that shape user-friendly and effective applications, with the Encode app as my case study. Encode's focus on teaching coding through interactive lessons showcased its strengths in simplicity and engaging content. However, I identified areas for improvement, particularly in visual consistency and navigation flow, which occasionally detracted from the user experience.

The process honed my ability to critique app interfaces, emphasizing user-centric design and accessibility. I am also very grateful for the assistance I got from the respondents and interviewees for the Google Form survey and face-to-face interviews. 

This experience underscored the balance between technical functionality and intuitive design, preparing me to apply these insights in future projects.

Comments

Post a Comment