APPLICATION DESIGN 1 - PROJECT 3: LO-FI APP DESIGN PROTOTYPE
Madeline Ordelia Tjahjadi (0376920)
Bachelor of Design in Creative Media
Project 3: Lo-Fi App Design Prototype
Table Of Contents
1. Lectures
2. Instruction
3. Project 3
4. Feedback
5. Reflection
1. Lectures
Week 9 (19/11/2025)
Sketching
Sketching is bringing your thinking out for everyone to see. Sketching not
including images (focus on navigation), details and colors, so everyone can
do it.
Sketch on paper:
- flow
- quick
- quantity centered
Wireframe
linked sketches, color for interaction, and as little text as possible
(buttons & context if needed), you can also add notes.
Flow
sketches of the flow for the app, from beginning until the end.
notes: no login page needed in the sketch (5-6 screens)
Week 10 (26/11/2025)
Navigation
Global - high level, always there
Local - one level or more below
Contextual - changes depending on context and choices
Faceted - filters and sorting
Supplemental - extra help, just in case
Decision making
- alternatives
- uncertainty
- high risk consequences
- interpersonal issues
- complexity
Process
1. Gather relevant info
2. Identify and examines alternatives
3. Choose among the alternatives
4. Take action
5. Review your decision and its impact
UX Hooks
1. Trigger - internal and external
2. Action
3. Variable reward
4. Investment
Week 11 (03/12/2025)
Usability Testing
Observing people going through what we made, to identify the usability issues,
latent needs, or opportunities.
why test? to get:
- User expectations
- Knowledge gaps
- Problems
- Feedbacks
- Ideas
Limits of testing
- Not everything can be tested --> long term impacts, habits
- Test depend a lot on the tester --> depends on the observer
- Tests take time
Test plan:
1. Goal
Declarative statements with specific objectives and contraints, create mini
problem statement
Example:
"Users will create an order for a new bicycle within 2 minutes."
"Users will be able to create a pickle ball event for 6 people with less
than 2 errors."
2. Logistics
In-lab testing --> the test is under control
Remote testing --> online testing, often used at scale and without the
designer
Guerilla testing --> spontaneous approach, pick unprepared people in the
street
Moderated --> guide them step by step
Unmoderated --> give user prompt and let then navigate their own
Live --> capture real life interaction
Recorded --> can rewatch
3. Participants
- Target users
- Where and how to find them
- How to recruit them? --> Close to personas, 3-5 participants, Compensation (rewards), Better than nothing
4. Metrics
What will we measure during the test
5. Tasks
Specify the task that we will tell the users
- Realistic --> task that are common, hard task so we can find the problem
- Action-based --> users must show you how they would do something, not describe
- Avoid guiding --> do not lead them to text on screen
- Prioritize --> understand which task is critical
Week 12 (10/12/2025)
Usability Heuristics
1. Visibility of system status
A system should consistently inform users about its current state through
timely and appropriate feedback.
Example: confirmation and error messages, navigation cues, progress bar
2. Match between system and the real world
Designing interfaces that align with user world experience
Visual metaphor: use of icon and images that represent real world
object
Use of familiar language: use words or phrases that familiar
3. User control and freedom
Allows users to feel in control of the interface and providing them with the
flexibility to undo or redo actions
Example: go back a step, cancel an action, close link, undo
4. Consistency and standards
Maintaining uniformity and predictability throughout the user interface.
Visual consistency: using consistent colors, typography, icons, and
layout
Functional consistency: ensuring similar actions
Feedback consistency: consistent feedback such as success message,
error notifications and loading indicators
5. Error prevention --> confirm user to avoid problem
6. Recognition rather than recall
Recognize information or options presented to them, reduce cognitive load
key aspects:
- Menu navigation
- History and Favorites
7. Flexibility and and efficiency of use
How you design something for beginners and master
key aspects:
- customization: allows user to personalized their interface settings
- shortcuts: provide power users with shortcuts or advanced features
- Adaptability: designing interfaces that can adjust to user
proficiency levels
8. Aesthetic and minimalist design
Focus on simplicity, clarity, and visual appeal while
minimizing unnecessary elements
key principles:
- simplicity
- visual hierarchy
- whitespace
- consistent typography and colors
9. Help users recognize, diagnose, and recover from errors
Focused on guiding users through the error-handling process
key aspects:
- clear error messages
- visual cues
- guided recovery paths
10. Help and documentation
Providing users with necessary resources and assistance to understand and
use system effectively
Visual design
Design principles
- Alignment
- Contrast
- Spacing
- Guidance
- Hierarchy
- Intuitivity
- Weight
- Consistency
- Clarity
Figure 1.1: Visual design principles.
2. Instruction
3. Project 3
Exercise:
In week 9 we have activity in class to draw sketch of each UI of famous app
within 1 minutes per app. Next, we also create different types of homepage
based on the prompt Mr. Slyvain gave.
Figure 3.1: Sketches in class
Figure 3.2: Sketches in class
After replicate all famous app UI, we use crazy 8 for our own homepage and try
different sketch for each prompt Mr. Slyvain gave us. After that we create the
final one after the crazy 8 and try to combine the ideation that we like based
on crazy 8.
Figure 3.3: Crazy 8
Figure 3.4: Crazy 8 and final homepage + wireframes
After creating the final homepage, I proceed to made the wireframes when user
want to buy ticket
In week 10, we identify web navigation, we identify the global, local,
contextual, faceted, and supplemental of the web.
Figure 3.5: Web navigation identify
Project 3
To start this project, I refer back to my sitemap and user flowchart to create
the sketches and wireframes.
Since we already did crazy 8 activity in class and how to do wireframes, I
only left with refining improved it in some aspects.
Figure 3.6: Sketches
Figure 3.7: Sketches
In total I created 8 pages in total, includes: Homepage, Movies, Booking,
Select seat, Food & Drinks, Checkout and Pay, Confirmation, and Booked
ticket page.
Some of the small screen that I create are filters, calendar, full screen
seat, and more info page as an additional page when pressing the button to
know the information of the movie.
After making the sketches, I create the user flow by making wireframes.
Figure 3.8: Wireframes
Figure 3.9: Wireframes
In the wireframes, user will saw the homepage first and there will be several
buttons that lead to the movies page, such as now showing and movies button in
the tab bar. In the movies page, user can click on the filters and when
clicking the movie, it will lead user to the booking page. In booking page,
there are more info and calendar button. Calendar button allows user to select
date, while more info will give more information about the movie to users.
After finish selecting the showtimes, user will lead to select seat page, when
user zooming in, there will be small screen that shows the overall seat
layout. Next page will be the food and drinks page, users can click the total
and will be lead to checkout and pay page. After finishing the payment,
confirmation page will be shown that have buttons to lead user to go to the
booked ticket.
In the making of the sketch, here are some references used inside:
Figure 3.10: Homepage references
Figure 3.11: Movies page references
Figure 3.12: Booking page references
Figure 3.13: Select seat page references
Figure 3.14: Food & drinks and Checkout & pay page references
After done with the sketches and wireframes, I start making the lo-fi
prototype in figma. Here's the link to the prototype in figma: https://www.figma.com/design/rQ9vZpfmpLMfbPg4w8XNny/Lo-Fi-prototype--GSC--fix-?node-id=0-1&p=f&t=JGPQzeQWoqtXcRCQ-0
Figure 3.15: Lo-fi prototype
Figure 3.16: Lo-fi prototype
After finishing the lo-fi prototype, I need to conduct a usability testing to
ensure the navigation and usability for users. I create the test plan that
includes 3 tasks, including:
Buy Wicked movie ticket, search information about the movie and check the
booked ticket. The testing was conducted online using zoom and google meet.
Below are the analysis from each testing:
Figure 3.17: Testing #1 analysis
Figure 3.18: Testing #2 analysis
Figure 3.18: Testing #3 analysis
Based on the above analysis, some changes that need to be considered are:
Figure 3.19: Report & changes
Presentation slides to Task 3 - Ideation:
In case of an error in Canva, below is the PDF:
4. Feedback
Week 11
Mr. Slyvain said the overall already good for my lo-fi prototype, but I
should try viewing it in phone, to consider the font size and the overall
icons are big enough
Week 12
I consult a problem in my lo-fi prototype, some features can't work
properly when I view it in phone. He said to just continue viewing the
prototype in desktop since there is features that can't work in phone. He
also gave me feedback to improve for my lo-fi that I can consider to
change in hi-fi later.
5. Reflection
Working on this task was really fun. I had the chance to create a lo-fi
prototype that was very similar to the real thing. This task helped me
create an app that is user-centered, from making the sketches and wireframes
with the help of references, to building the lo-fi prototype in Figma. This
process made me realize how many aspects need to be considered
when developing an application.
After creating the prototype, I conducted usability testing to ensure the
app aligned with user expectations. Through this testing, I learned a lot
about user comfort and how user would interact with the app in real life.
Throughout the process, Mr. Slyvain guided me by explaining how to sketch
and wireframe, teaching us how to use Figma, and showing us how to conduct
usability testing. His guidance helped me a lot in the making of this task.
I hope to create even better applications in the future using the knowledge
i gained from this task.
Comments
Post a Comment