Wee Jun Jie / 0375271
Application Design I / Bachelor of Design (Hons) in Creative Media
Project 3: Low-Fi Prototype
LECTURE RECAP
To enhance comprehension of the course material, I have crafted a set
of flashcards featuring couple of questions designed to facilitate
learning. You are warmly invited to explore these resources.
To ensure a seamless experience and avoid potential performance
issues with the blog website, I have uploaded the original file to
my Notion Notes Web. You may access it via the link provided
above. Thank you for your understanding.
INSTRUCTIONS
-
Once the UX design process is completed, create a low-fidelity prototype in Figma, incorporating all screen wireframes, actions, visual feedback, and linking them together.
-
Conduct usability testing with interview participants to evaluate the low-fidelity prototype, gathering feedback, responses, and identifying any pain points during the test.
- Document the recorded video of the testing session and provide a detailed analysis of the issues encountered by the testers, along with proposed solutions to address these problems.
REQUIREMENTS
1. Visual Design Concept
Develop a visual design concept that aligns with your
application's branding, including color schemes,
typography, and imagery to reflect the desired tone
and user experience.
2. Wireframes
Create wireframes for the mobile app screens using
Figma, illustrating layout, content, navigation, and
interactive elements.
3. Usability Testing
Conduct usability testing on the low-fidelity
prototype, gathering feedback from interviewees.
Document their responses and refine the design based
on their insights.
4. Deliverables
Submit a digital document with the low-fidelity
prototype, wireframes, visual design concept, and a
summary of usability testing results, detailing design
iterations based on feedback. Include this in your
e-portfolio.
Week 11-13 / Wireframe Sketch & UI Kit & Design Process
1. UI KIts
Fig. 1.1 Wireframe Sketch - JPEG, Week 11 (5/12/24)
Fig. 1.2 Rough UI Kits - JPEG, Week 11 (5/12/24)
Before creating the My Rapid PULSE low-fidelity
prototype, I first sketch some initial ideas then
developed a UI Kit, including typography, iconography,
and a grid system to streamline my workflow. Since I was
just getting started, I didn’t focus on organizing them
into pages but instead wrapped them as sections and
converted them into components. Components are a huge
time-saver in Figma and greatly improve efficiency. I
did share this tip with my friends when designing. It’s
been a busy week, but I’m satisfied with the
progress!
2. References
Fig. 1.3 References - JPEG, Week 11 (5/12/24)
These references are primarily layouts and arrangements.
I mainly used these samples as inspiration just to plan a
new layout for My Rapid PULSE. Considering the users'
familiarity and smooth usage of the previous version, we
didn’t make drastic changes to some sections that were
already well-received. The focus of this redesign was to
add the features most users need without making the app
more cluttered, and to efficiently categorize the main
functions. The goal is to understand user needs and
effectively meet those needs.
Fig. 1.4 Study material - JPEG, Week 11 (6/12/24)
3. Design Process
Fig. 1.5 Pre-Work App Redesign - JPEG, Week 12 (8/12/24)
I’m someone who dislikes unnecessary complexity, so
before starting the low-fi design, I listed out the
potential features I might use and created them as
properties & variants. The idea behind this is that
these components can save a significant amount of time.
Variants allow a component to have different values at
once, making large-scale interactions much more
convenient. Instead of copying components repeatedly for
interactions, I can manage them more efficiently. This
also helps keep the entire workspace more organized.
Fig. 1.6 Hierarchy & Spacing - JPEG, Week 12 (11/12/24)
As you can see from the image above, I made more than
three changes. However, in reality, the number of
adjustments I made was far more than that. I added
spacing between elements and highlighted the most
important functions in the correct order of priority. By
optimizing the use of space, I ensured that all
essential features were grouped together properly. This
process took a significant amount of time during the
low-fi design phase.
Fig. 1.7 Consistency - JPEG, Week 12 (11/12/24)
While checking the details, I noticed that the icons
I used weren’t consistent, so I spent additional time
redrawing them. This was quite frustrating, as there
wasn’t much time left. The heavy workload made me
consider just using icons from the web. However, in
the end, I decided to redraw each one to maintain
consistency.
Fig. 1.8 Different Section of Design Process - JPEG, Week 13 (15/12/24)
Fig. 1.9 Interactions & Flow - JPEG, Week 13 (18/12/24)
By the thirteenth week, I had nearly completed the main
functionality and interaction. I planned to finish the
remaining extra pages during the High-Fidelity phase.
This week, I showed my progress to Mr. Zeon, and he said
there were no issues but hoped I could bring more
creativity to the design. Honestly, I’m not sure how to
do that yet, but I’ll keep pushing forward. I’ll think
of something during the High-Fi phase, maybe by finding
some useful references. Oh, by the way, the photos might not be very clear.
Here’s the
link
to my work file; you can click on it to view.
4. Usability Testing
To conduct usability testing, first ensure that the
low-fidelity prototype is ready with three user
scenarios, each focusing on specific actions (e.g.,
checking account balance or viewing transaction
history). Provide clear written instructions for each
scenario. Recruit three participants, assigning one
scenario to each user. Conduct the testing via Zoom and
share the Figma link with the participants. After the
testing session, gather feedback by asking targeted
questions to guide their responses. Collect and analyze
the feedback, then use it to refine and improve the
low-fidelity wireframes based on the insights
gathered.
Fig. 1.10 Usability Testing, 3 Scenarios - JPEG, Week 13 (20/12/24)
Scenario 1: Route Searching
(click to view)
Imagine you’re planning a one-day trip and
need to search route through the MyRapid PULSE
app.
-
The process starts with the app opening to a loading
page, then straight appears our
Home page (Route).
-
On the Home page (Route), you may change
your region to your current city
(KL/Selangor).
-
Once you’ve done your region settings, you select
"Get Me Somewhere" to start searching your
destination.
-
Select KLCC as your Start point from the
recent list or using the
type to search function.
-
Now select Kin's Home as your End point from
the favorite list.
-
Now you realized that your
start point should be your home, because you are planning trip to KLCC.
Swap the directions.
-
Check out the Suggested Route, choose the
best route for Kin, Kin want the
cheapest and fastest route to KLCC. He is
almost late!
- Congrats, you did it. Now you can stay on the page and get off from the 1st stop. This is a live section on app, you can check how many stops should ride to get to your destination.
Scenario 2: A premium update for
student (click to view)
My Rapid PULSE app does not require users to log in or create an account unless you wish to access premium features, such as saving favorites and receiving recommendations or discounts for tourist attractions. Imagine you are new user and need to navigate MyRapid PULSE app and explore what function exists.
My Rapid PULSE app does not require users to log in or create an account unless you wish to access premium features, such as saving favorites and receiving recommendations or discounts for tourist attractions. Imagine you are new user and need to navigate MyRapid PULSE app and explore what function exists.
-
Imagine you are a student, and you would
like to save your school address, click the
school icon on screen.
-
A pop-up window shows that you
need to sign up/log in to use that feature.
Do follow it.
-
Click Sign Up and would guide you to the
Create Account page. Now,
enter the information and tick the T&C
form.
-
Click Sign Up and your
account has been created.
-
Your tutorial journey begins. You may
skip or click till the end and lastly will
guide you to Home page (Route).
-
Now, navigate to the
Profile page (Settings) and have a look, it is
different like the guest settings page. You could turn
on the notifications settings if you like to receive
live message and updates.
-
Try out our new sub feature:
Lifestyle.
- Imagine you’re lost and feel like someone suspicious is following you. Open the Help page and contact our patrol for immediate assistance.
Scenario 3: View & Check Schedule (click to view)
Imagine you’re finishing your visit to KLCC and want to
head to SS15 for dinner. To get there, you need to take
the Kelana Jaya Line train. However, after waiting for a
while, you decide to check the train schedule.
- Start by navigating to Schedule page and selecting the "LRT" section. Here, you can view different line.
- Choose the Kelana Jaya Line since you are at station KLCC right now.
- On this page, you can view the list of stations along the Kelana Jaya Line. The starting point of the train can either be Putra Heights or Gombak, depending on your desired destination.
- Click on the schedule to begin the search. We need to change the starting point from Putra Heights to Gombak, as we are heading to SS15.
- Now choose your current location and confirm to get the train schedule.
I conducted an online Zoom session with the
interviewees from the previous phase. They were allowed
to navigate the prototype on their own while I explained
certain aspects to them as they encountered issues. We
then discussed the problems they faced and brainstormed
possible solutions together.
View my Interview Videos here.
Usability Testing Feedback
1. Need GPS tracking. For knowing the current location.
2. Scrollable bar should be swap not drag gesture.
3. Need an image for stations to make it easier to walk through it.
4. The schedule part section is a bit messy, hope to reduce the step.
5. Button not functioning.
6. Tutorial part needs to show something.
Final Outcome
Demonstrating Video
Figma View - Work File
Figma View - Prototype
REFLECTION
Experience
In my approach to Project 3, I focused on creating a low-fidelity prototype and conducting a comprehensive research study to test and validate my design concepts. By building a simple, interactive prototype, I was able to quickly iterate on ideas and test them with real users, gaining valuable insights into how users interact with the interface. I used methods like user testing, observation, and follow-up interviews to assess how intuitive the design was and to identify any usability issues. This hands-on process allowed me to refine the app’s features based on real-world feedback, rather than assumptions or hypothetical use cases.
The creation of the low-fidelity prototype allowed me to focus on core functionalities and user flows without getting distracted by visual design details. This simplified version of the app served as a testing ground for key interactions and user tasks, helping me evaluate the effectiveness of my design decisions. By interacting directly with users, I was able to pinpoint specific areas where the design needed to be refined or rethought entirely, ensuring a smoother user experience.
Observations
Through the research study and prototype testing, I observed several important themes. First, users valued simplicity and clarity, often expressing frustration when navigation was unclear or overly complex. The most common pain points included unnecessary steps to complete basic tasks and lack of feedback after certain actions were taken. On the other hand, users appreciated when features were easy to discover and provided immediate value, like fast access to key tools and clear call-to-action buttons.
User testing helped me realize that while certain elements of the app were functional, they could be improved to reduce cognitive load. For example, the feedback I received during usability testing revealed that users often struggled with navigating between screens, indicating a need for better flow and more intuitive signposting. Additionally, some users found the interactions to be too rigid, suggesting the need for a more flexible design that adapts to their needs.
Findings
This project reinforced the importance of iteration and real-world testing in the design process. By using a low-fidelity prototype, I was able to quickly test multiple iterations and validate my assumptions about the app’s usability. The research study further highlighted the critical role of user feedback in identifying pain points and improving the design. Even in the early stages of prototyping, small adjustments like reordering buttons or adding clearer navigation drastically improve the user experience.