Application Design I / FINAL ASSESSMENT: Application Design Hi-Fi Prototype
Daphne Lai Yu Cheng / 0366380
DST60504 / Application Design I / Bachelor of Design (Honours) in Creative Media / Taylors' University
LECTURES
Week 12 (10/12/2025):
- General principles or guidelines to assess and enhance the user friendliness and overall usability.
Jakon Nielsen's 10 Usability Heuristics
- Visibility of system status: Confirmation and error messages, navigation cues and progress bar.
- Match between system & real world: House image & home page icon.
- User control and freedom: Flexibility to redo or undo.
- Consistency and standards
- Error prevention
- Recognition rather than recall: Users being able to recognise information rathern than having to recall it from memory.
- Flexibility and efficiency of use: Customisation, shortcuts, adaptability.
- Aesthetic and minimalist design: Simplicity, clarity and visual appeal.
- Help users with errors: Visual cues, celar error messages and guided recovery paths.
- Help and documentation: User guides and tutorials, online support.
UI Visual Elements
- Line
- Shape
- Colour
- Form
- Texture
- Space
- Text
- Colour
- Shadow
- Buttons
- Icon
- Photos
- Illustrations
- Cards
- White space
UI Navigational Component
- Search bar
- Breadcrumb
- Pagination
- Slider
- Tags
- Icons
- Carousel
- Mobile specs
UI Controls
- Dropdown
- Radio button
- Checkbox
- Toggle
- Date & time picker
- Grids
Figure 1.1 Usability Principles Class Activity
Week 13 (17/12/2025):
Working on Final Assessment.
Week 14 (24/12/2025):
Holiday and working on Final Assessment.
Week 15 (31/12/2025):
- Matches your CV
- Worth moving forward
- Skills
- Outcomes
- Field
- Overall skill level
- Flow
- Learning curve
- Thinking process
- Range of work
- Storytelling/Sales
- How long did it take?
- Who worked on it?
- What were you in charge of? (specify, credit if its group work)
- What is the format?
- What does it do?
- Who will use it?
- How does it help them?
- Why does this project matter?
- Where do we use the product?
- What did it aim to solve?
- What are the stakes?
- What are the challenges?
- How to do it?
- Who is making it?
- What are they using?
- Wht are the limits?
- How it works?
- What it looks like?
- How it moves?
- Show it in use
- Show it with people
- Show motion (GIF, Animation)
- All the function of the project
- The parameters that can be set
- How flexible it is
- Comparisons to other solutions
- Data and facts
- What was chosen?
- How decisions were made?
- Research results
- What they do?
- What is affected?
- Tests
- Past vs Present
- Impact analytics
- Success metrics
- Current assessment
- Reflection
- Timeline
- Future updates
- See the full story
- Download the files
- Contact the author: Paste contact link, in a way its like how youtubers say "like and subscribe"
- Sizes for each purpose
- Case studies are unlimited
- Pack in advance
- Pack only what you need
- Keep your valuables safe
- Show results first, then the process
- Allow people to skip
- Different levels of reading (3 sec, 3 min, 30 min)
- Explain your results, when using the process
- Managers knows the theory
- Show you can apply it
- What difficulty you encountered
- Explain what you tried
- Show what didn't work and what did
- Detail the context, the challenges and the outcome
- Show quantity of research and sketches
- Before vs After
- What was your role
- What were you in charge of
- Copying is fine for training only
- Credit everyone
- Show critical thinking
- AI doesnt count
- Show where you used it
- Snapshot of your past projects
- It shows growth
- Update it ASAP
- Phase out old content
- Always show your best work
INSTRUCTIONS
Final Assessment: Application Design Hi-Fi Prototype
1. Where are we so far
(take back from assessment 3)
Explain in a few words what was the outcome of your ideation, what you found out from testing, and what needs to change on the
high fidelity.
2. UI kit
What are the building blocks of your High Fidelity file.
3. High Fidelity prototype
Introduce the changes you made, make a small intro of what is your
app about, what will your happy path consist of, and the extra
features you wish to present.
Remember, mind your Consistency, Readability, Alignment and Priority.
My focus is that each of your pages looks like it belong to the same app, and I know at all times where I am, what do I need to do now, where am I going
next.
Link to your High Fidelity prototype page so I can see it in
action!
4. Monetization
Add one page to explain the ways your app generates revenue for the company
5. Gamification
What systems/mechanics do you have in place to retain and/or encourage users to come back?
4. Promo page
Make a promo page for your app!
Mock it up on a phone, in hands, in situation, sell us the new
features, think of it as a poster/banner for the launch of your app.
Keep it to 1 page only, and make it pop!
5. Reflection/What's next?
So... 14 weeks, from idea to final prototype. What's your take on
that?
How do you feel about your own work and progress?
What are you going to do with it?
Hi-Fi Prototype
I started off with creating the Figma file and select the colour palette. I decided on muted colours and a vibrant orange for buttons for better visibility. The selected colour palette is also more suitable with KOI Thé's brand identity.
Figure 2.1 Colour Palette
Then, I prepared the iconography set using Iconify in Figma, all icons used are from Material Design Icons to ensure consistency.
Figure 2.2 Iconography
Next, I selected the typography for the hi-fi, fonts and font sizes.
Figure 2.3 Typography
Lastly, I created the components one by one in Figma.
Figure 2.4 Components
Things to improve in the Hi-Fi prototype:
1) Consistent font sizes
2) Consistent button sizes
3) Better navigation according to Jakon Nielsen's 10 Usability Heuristics as there were similar issues faced in the user testing in Assessment 3.
- Consistency and standards
- Error prevention
- Recognition rather than recall: Users being able to recognise information rather than having to recall it from memory
4) Adding a "Sign Up" Page
5) Adding a pop up feedback box to inform users about their actions
After deciding on UI elements, I worked on the hi-fi prototype:
Figure 2.5 Figma Workspace
I also created a promo poster for KOI Thé's new application after completing the hi-fi prototype.
Figure 2.6 Promo Poster for KOI Thé's New Application
SUBMISSION
Figure 2.2 Hi-Fi Prototype (Figma)
Figure 2.3 Presentation Slides (Canva)
Link to Presentation Slides: Click here!
This high fidelity prototype was developed based on the proposed solutions which focuses on improving usability, navigation and overall user experience in the KOI Thé app redesign. The app redesign includes key features such as a delivery option, store locator, clearer user details, improved navigation flow and an accessible Help Center.
Throughout these 14 weeks, I learned the importance of having a clear user flow and applying usability principles in application design. I also gained new skills in Figma under the guidance of Mr Sylvain which helped me turn my ideas into clear and well designed wireframes. The process was rewarding but I faced several challenges, particularly in time management. Conducting user research and analysing findings required a long time and the final assessment was the most time consuming as it involved refining the layout to make sure users could navigate the app smoothly.
Moving forward, I will apply what I have learned about application design in my future works as these skills and knowledge will be a great help in improving my design practice in UI/UX.
Comments
Post a Comment