Application Design | Final Project : High Fidelity App Design Prototype
02.12.2024 - 12.01.2025 Week 11 - Week 15
Tracy Angeline Tio / 0362222 / Bachelor of Design ( Honors ) in Creative Media
Application Design / Taylor's University
FINAL PROJECT : HIGH FIDELITY APP DESIGN PROTOTYPE
Once the color is fixed, I began by starting from the splash screen until the log in pages.
Literally for the Onboarding illustrations, I have added more options since I'm not sure if the illustrations were fine or not.
Most of the illustration assets collected from Storyset, Freepik, and Canva Elements. After I consult with Mr. Zeon, he said that the first attempts was already fine, so at the final, I keep on it.
For the styles, I have an option to go with the 3D or just flat style, and after consulting, I prefer the 3D styles since it's more unique and best. As for the navigation background, I go with the black colors.
For the job background and tag, I mainly focusing on blue and I made the tag different color for each categories. For the job on design categories, It have a pink color tag.
Once I move to the filter and sort pages, I'm having some difficulties choosing the color when I designed it, It looks simple and mostly have black and white only so it still looks similar with the low fidelity prototype. Once I'm getting feedback on this part, I'm gonna revised it.
From previous week, I received a feedback that I need to highlight my bid / make it different than others and I tried to use contrast colors which is pink. Somehow I thoughts it matched but a little inconsistent rather than previous. As a result, I kept it first and gonna changes once it was required.
Next is for the membership pages, There are 4 categories and for the Free Trial, I used gree color for highlight it to give more impact since it was the only one free and user might want to go for it.
And finally I reached the end of the pages! This project is not really hard like the lo-fi since we have to build it from stratch. But sometimes, I doubt about the colors I'm used and afraid if it's too monotonous. For the next step is to gather feedback about the prototypes.
And later for the balance money display, I made the currency (RM) had the same size like the numbers.
Once I'm done with the refinement, I finalized all of the pages and recording a walkthrough video.
Application Design / Taylor's University
FINAL PROJECT : HIGH FIDELITY APP DESIGN PROTOTYPE
TABLE OF CONTENTS
LECTURES
All lectures have been completed in previous blog ( Project 1,2,3 ).
INSTRUCTIONS
MIB BOOKLET :
FINAL PROJECT
High Fidelity App Design Prototype
On this project, Students will synthesize the knowledge gained in task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product experience for a selected task.
---
1. Chosen Color for App and Elements
For this things, I had to go back to my UI toolkit on the previous task to view the color to be applied later on the prototype. For the brand itself, Freelancer had a blue and white colors, while the rest is black for navigation bar background and pink for some buttons.
If I had applied using 60/30/10 rules, below are the breakdowns :
- 60% : Black #1F1F1F and White #FFFFFF
- 30% : Blue #29B2FE
- 10% : Pink #E40276
Then moving on, Mr Zeon had suggested us to use Artyclick Colors to collect more sources from the brands color. Since I already have the black and white in low fidelity prototype, I used the links for brand colors and the pink color. View this images for the results.
 |
| Fig 3.1 Color Shades Freelancer Brand Colors (#29B2FE) Week 14 29/12/2024 |
 |
| Fig 3.2 Color Shades Pink Colors (#E40276) Week 14 29/12/2024 |
2. Design Process
Splash Screen and Log In
At first, I began to colored from the start which is Splash Screen and On boarding pages using the brand colors to make it looks like from the official app.
 |
| Fig 3.3 Splash Screen and Onboarding Progress Week 14 29/12/2024 |
 |
| Fig 3.4 Added Illustrations Week 14 29/12/2024 |
As for the log in pages, I changed the button color using brand colors to match with the logo.
 |
| Fig 3.5 Log In, Sign Up, Password Pages Week 14 29/12/2024 |
Home Pages
For the home pages, It was quite challenging to do it at first since I have to determined which styles I want to go. First I collected the sources using Icons8 and testing out which one is the best.
 |
| Fig 3.6 Home Page Progress Week 14 29/12/2024 |
 |
| Fig 3.7 Home Page Content Progress Week 14 29/12/2024 |
 |
| Fig 3.8 Attempts for the Navigation Color Week 14 29/12/2025 |
Browse Pages
For the browse pages, firstly I designed the outlines into the light blue and the search box also with the lighter color.
 |
| Fig 3.9 Browse Page View Week 15 11/01/2025 |
 |
| Fig 3.10 Filter Options Week 15 11/01/2025 |
Place a Bid Pages
This pages also have a same style like the browse pages and for the bid information pages, I highlighted the budget ranges as it was an important things user must know first. Once we click place a bid, it would directed us to a bid form.
 |
| Fig 3.11 Place a Bid Pages Week 15 11/01/2025 |
 |
| Fig 3.12 After Place a Bid Page (View my Bid) Week 15 11/01/2025 |
Manage Pages
For this pages, I changed the logo styles into 3D Icons and for the button, I made new variations like the cancel button, with only outlines design but once user hover it, It would shown the color.
 |
| Fig 3.13 Manages Page Preview Week 15 11/01/2025 |
 |
| Fig 3.14 Recently Viewed and My Bids Week 15 11/01/2025 |
Social Pages
For this part, I just had to add an images for the group overview and also for the posts (profile pictures and posts images). At the first trial, I'm using the images from the freelancer group itself but the images size is not looking good when it comes to my prototype.
 |
| Fig 3.15 Social Pages 1st Looks Week 15 11/01/2025 |
 |
| Fig 3.16 Changing Images for Group Overview Week 15 11/01/2025 |
Account Pages
For the last pages, on the My Profile sections, I added an images for my profile, background, portfolio, and many more. The colors on the education, experience, etc are following the official apps since by making it only blue and pink might be boring, I introduce new color which is orange and purple.
 |
| Fig 3.17 Profile Pages Overall Week 15 11/01/2025 |
 |
| Fig 3.18 Membership Pages Week 15 11/01/2025 |
 |
| Fig 3.19 Balance and Settings Page Week 15 11/01/2025 |
3. Usability Testing
I recruited the same user from lo-fi prototype to do the testing and assign each of them one scenario. View this recording for user testing the app.
Vid 3.20 Usability Testing High Fidelity Prototype Week 15 11/01/2025
4. User Feedback
I made a document that contains all of the user experiences running the prototype. View below for their feedback.
Fig 3.21 User Feedback Documents Week 15 11/01/2025
FEEDBACK SUMMARY
Scenario 1 : Log in and Explore Around
- For the membership, you can try to change the transitions between like a carousel (slide in)
- The balance amount RM 395.00 could be better if it was written on the same font size.
- Overall the rest of the color was fine for me.
Scenario 2 : Browse a Job
- Overall all was good and I had no comments of what needs to be improved.
Scenario 3 : Place a Bid on the Job
- What if the user placed a bid number that far more than the budget range? You can try to add warning or prevent this action could be happened.
From the feedback, I did refine on what user said. The first things is for the membership pages
 |
| Fig 3.22 Feedback on the Animation Week 15 12/01/2025 |
 |
| Fig 3.23 Balance Page Amended Week 15 12/01/2025 |
For the last one which is for scenario 3, I made a little instructions under the Bid Amount text and highlighted it using pink colors. This is made in order to prevent user inserting a wrong amount based on the range given.
 |
| Fig 3.24 Place a Bid Revision for Scenario 3 Week 15 12/01/2025 |
 |
| Fig 3.25 Pages Overall View Week 15 12/01/2025 |
 |
| Fig 3.26 Pages in Prototype Modes Week 15 12/01/2025 |
FINAL OUTCOME HIGH FIDELITY FREELANCER APP PROTOTYPE
 |
| Fig 3.27 App Mockup Showcases Week 15 12/01/2025 |
Walkthrough Video Link : https://www.youtube.com/watch?v=op29BBBjs3U&t=4s
Vid 3.28 Video Walkthrough Freelancer App Week 15 12/01/2025
Link to Figma File :
Fig 3.29 Final High Fidelity Prototype Design Week 15 12/01/2025
Link to High Fidelity Prototype View :
Fig 3.30 Final High Fidelity Prototype Design (Preview) Week 15 12/01/2025
FEEDBACK
Week 14
Specific Feedback :
- The onboarding page illustrations currently is already better, no need to change it into 3D styles illustration.
- The 3D Design on the home page is interesting rather than the second one. You can choose it as your final design.
- Overall I got no problem with all of your prototype. It's already okay and you can continue until finish.
REFLECTIONS
Experience
Working on this project was super fun and challenging. The fun came since I already build the layout and content in low fidelity, so it would be much easier and faster rather than start with empty layout. When making the high fidelity, I need to choose the right styles and even pay attention to the colors. Most importantly is the design should be consistent, which is often hard for me to maintain the same styles.
Observation
When I'm conducting the user testing, I observed that from user perspectives, Design is an important part since it was seen first from their eye. Moreover, I also got questioned for the several elements like the animation and the reason for make the design like that. This means when we designed something, there should be a reason and what is the point for having it. Even small elements could be included too.
Findings
I found that designing an app prototype took a long time to start until finish it. For my chosen application which is Freelancer, actually it still have a lot of features that I did not pursue it more since we only need to focus on 3 scenarios. I think if the application is fully completed, it would be so much better and even the function could run like a real app. Hope in the future, I could develop more prototypes better and it would be + point to be included in portfolio.
Comments
Post a Comment