02.12.2024 - 07.01.2024 (Week 11 - Week 15)
Gunn Joey / 0366122
Application Design / Bachelor of Design (Hons) in Creative Media
Project 3: Lo-Fi App Design Prototype
TABLE OF CONTENTS
1. Module Information Booklet
2. Lectures
3. Project 3
4. Final Submission
5. Feedback
6. Reflection
MODULE INFORMATION BOOKLET
LECTURES
Week 11:
Usability Testing & UI Kit
Usability testing is a process where designers evaluate a product by
observing how real users interact with it. Participants are asked to
perform specific tasks while observers record their behavior, noting any
usability issues or difficulties. This helps in understanding how
intuitive and user-friendly a product is, focusing on qualitative
feedback rather than large-scale surveys. The ultimate goal is to
identify areas for improvement and enhance the user experience.
To conduct usability testing, the process typically involves defining
key user scenarios, such as navigating the app, managing an account, or
performing core functions. A low-fidelity prototype is prepared and
shared with participants, who are given specific tasks to complete.
Feedback is collected either through direct observation or by asking
pre-set questions after the session. This data is then used to improve
the design and make the interface more user-friendly.
A key benefit of usability testing is that it helps uncover usability
problems that might not be apparent during the design phase. By
iteratively testing and refining the prototype based on user feedback,
designers can ensure the final product meets user expectations and
delivers a seamless experience. Though the process may require time and
effort, it significantly reduces the risk of releasing a product with
major usability issues.
Week 12:
Usability Heuristics for User Interface Design
Usability heuristics are general design guidelines that help improve the
usability of interfaces. They are used by designers and usability
experts to assess how user-friendly an interface is. Jakob Nielsen’s ten
usability heuristics, such as visibility of system status and error
prevention, are widely adopted principles in user experience design.
These heuristics emphasize the need for clear feedback, familiar
language, and intuitive interactions, ensuring that users feel in
control while navigating an interface.
A core heuristic is consistency, which ensures that similar elements
behave in the same way across the interface. This minimizes confusion
and makes learning the system easier for users. Another important
principle is user control and freedom, which allows users to undo
actions or go back a step if they make a mistake. Providing clear error
messages and offering ways to recover from errors further enhances the
overall user experience.
Designers can use heuristics to identify design flaws early in the
development process, reducing the likelihood of major issues during
usability testing. By aligning the interface with real-world
expectations and ensuring clarity in navigation, usability heuristics
help create systems that are easy to learn and pleasant to use. They
also promote a user-centered approach, which is critical for building
successful digital products.
Week 13:
User Interface Visual Elements
A UI kit is a pre-built collection of design components used to
maintain visual consistency across a product. It typically includes
elements like color palettes, buttons, typography, icons, and layouts.
Using a UI kit helps designers save time by providing ready-made
components that can be customized as needed. UI kits are especially
useful for creating niche-specific designs, such as e-commerce apps,
where standard elements like product cards, shopping carts, and
navigation bars are common.
The UI kit also plays a critical role in maintaining brand identity by
ensuring that colors, fonts, and visual styles are consistent across
the app or website. Standardized layouts and grids help in aligning
elements, making the design more organized and user-friendly. For
example, using a consistent grid structure prevents components from
appearing misplaced when users navigate through different pages.
Overall, a well-designed UI kit improves both design efficiency and
user experience. It ensures that all elements follow the same style,
reducing confusion and enhancing usability. When combined with
thoughtful interactivity and intuitive layouts, a UI kit contributes
to building cohesive and engaging digital products. Designers can also
easily update or expand the design by adding new components to the
existing kit.
Week 14:
Design Essentials for User Interface
User interface visual elements are key components that define how
users interact with a digital product. These elements include color,
typography, shapes, icons, buttons, and white space, all of which
contribute to the look and feel of the interface. Proper use of these
elements ensures clarity, guides user attention, and enhances overall
usability. For example, color can be used to establish a visual
hierarchy, while typography plays a crucial role in readability and
tone.
Buttons and icons are critical for user interaction, and they must
be designed to look clickable. Buttons should have adequate size,
clear labels, and visual feedback when clicked. Icons should follow
a consistent style and be paired with text labels when necessary to
improve comprehension. Similarly, white space helps in decluttering
the interface, making it easier for users to focus on important
elements without feeling overwhelmed.
Additional elements like carousels, sliders, and search bars further
enhance navigation and interaction. A well-designed carousel, for
instance, can showcase multiple items efficiently without
overwhelming the user. Sliders are useful for setting values or
filters, while search bars improve content discoverability. By using
these elements effectively, designers can create intuitive and
visually appealing interfaces that enhance the user experience.
PROJECT 3
Lo-Fi App Design Prototype
After completing my UI/UX Design Document, the next step is to
focus on the prototype. Before coming to the final prototype, we are
required to do a low fidelity prototype.
Instructions:
-
Once the UX design process is completed, can now create a low
fidelity prototype of the app. We need to arrange all the screen
wireframes, actions, visual feedback and link them up in Adobe XD/
Figma/ Invision Studio or any other prototype software’s.
-
We are then required to perform usability testing whereby they will
invite guests to test out their low fidelity prototype and gather
all the information, response, feedback, pain points observed from
the test.
-
We need to document this process with video and produce a document
containing detail analysis of this task and the solutions to the
problems faced by the testers.
Requirements For This Task:
1. Visual Design Concept:
Develop a visual design concept that aligns with the branding of your
application. This concept should include color schemes, typography, and
imagery that convey the desired look and feel of your application.
2. Wireframes:
Create wireframes of the screens for your mobile application. These
wireframes should illustrate the layout and content of each screen,
including the navigation and interaction elements. You should use tools
such as Figma, or Adobe XD to create these wireframes.
3. Usability Testing:
Conduct usability testing on your low-fidelity prototype to validate the
user flow and user experience. You can recruit friends, family, or
classmates to test your prototype and provide feedback. Make sure to
document the feedback and use it to iterate on your design.
4. Deliverables:
Submit a digital document that includes your low-fidelity prototype,
wireframes, and visual design concept. Also, include a brief summary of
your usability testing results and how you used them to refine your
design in your e-portfolio.
A. Ideation & Reference
Before starting designing the draft wireframe of the project in Figma,
I did some research for User Interface design for application design and
also browse my commonly used app, like Sephora, Taobao, Shein as
reference. I noticed that these shopping apps have the similar flow.
Just that their colour scheme and design are different.
B. Wireframe
I started designing my wireframe. Firstly, I redesign the Sasa app by
adding browse page, message section, beautyfeed, sign up and sign in
pages. I consulted Mr. Zeon and he suggested me to add onboarding
pages for my redesign app. He told me my wireframe is too standard and
basic. I need to do more research for redesigning a better app.
I added ratings and reviews section as the Sasa app has too much
negative feedback complaining about no shown reviews for the products
in product page. Also, I designed a detailed shopping cart and
checkout process.
I added a message section for my redesign app. Users can click on the
message icon on the bottom navigation bar to navigate to message page.
There are notifications and customer service included in the message
section. Users are able to check their current and past requests, FAQ
and info centre and request for having a chat in the customer service
section.
Moreover, account section is clearly labeled. I refer to Sephora's
view membership feature to improve my redesign Sasa app. There
are many categories can be navigated in account section: Account
Details, Beauty Pass, Rewards Boutique, Points Summary, My Orders,
Reviews, My Wishlist, Stores & Events, Terms of Use, Privacy
Policy and App Settings. Users can logout the app in account section.
I found that many websites and apps have newsletter section to update
latest news and notice for users. Beautyfeed is added for the app as a
newsletter section. Users can keep updated with new arrivals, buying
guide and tips & tricks of the products.
C. UI Kit
I put together a UI Kit that contains a selection of colours, types
of text, icons and a grid system, all in the wireframe. I dedicated
this page solely to the UI Kit to keep it organized. There are few sections will be included in the UI kit:
1. Brand logo
2. Typography
3. Iconography
4. Colour Palette
1, Brand Logo
The brand logo is originally from Sasa.
2. Typography
Text System that I use is Instrument Sans with bold and regular.
3. Iconography
4. Colour Palette
The colour Palette for high-fidelity prototype is referred by the
brand logo. I added a dark wine red #630032 to contrast the
prototype. After consulting Mr. Zeon, he suggested me to use a light
tone pink to neutralise the red and barbie pink.
D. User Testing
Scenario 1:
Imagine you're a new user on the Sasa app, interested in testing the messaging and customer service features. Your goal is to navigate through the app's onboarding process, access the message icon, and explore the different sections available under the "Customer Service" page.
Steps to Follow:
-
To begin, sign up for a new account and go through the
onboarding pages to familiarize yourself with the app.
Once you reach the main app screen, locate the message
icon on the bottom navigation bar and click it to open
the message page.
-
On the message page, start by clicking
the Notifications tab to view messages from
Sasa. Ensure that the messages are displayed correctly,
and test whether you can easily navigate between different
messages and read their content.
-
Next, click on the Customer Service tab to
explore various customer service options. Select Your
Support Request to check both your active and past
support requests related to parcel tracking. Verify if you
can easily view the status of current requests and check
past ones, ensuring that the tracking information and
statuses are clear and accurate.
-
After that, click on FAQ and Info Centre to
browse through different topics about Sasa’s services. Try
using the “Search FAQs” feature or explore the “Top
Questions” section to see if the information provided is
easy to access and helpful.
-
Finally, click on Chat to Get Help to initiate a
live chat for additional support. Choose the
option Check my parcel status and assess whether
the responses from the chatboard are clear and helpful in
providing the information you need.
Scenario 2:
Imagine you're a user browsing the Sasa app. Your goal is to test the process of selecting a product, adding it to your cart and wishlist, reviewing ratings and reviews, applying a promo code, and completing the checkout process.
Steps to Follow:
-
Start by opening the Sasa app, where you will be directed
to the homepage. Browse through the products listed on the
homepage and click on the first product you see to view
its details.
-
Once you are on the product page, click Add to
Cart to add the item to your shopping cart. Then,
click Add to Wishlist to save the item for future
reference. Scroll down to find the Ratings and
Reviews section, and tap on it to view user feedback.
Check whether the reviews load smoothly and if they are
easy to read.
-
After returning to the homepage, click the shopping cart
icon to access your cart. Review the items you’ve added
and ensure they are correct. Click View All
Promos to explore the available promotions. Select
the first promo listed and click Apply at the
bottom to apply it to your order.
-
Once the promo is successfully applied, return to the cart
and click Checkout to begin the payment process.
Click Select Payment Method and choose your
preferred payment option. If you need to check the details
of your order, click See Details to view the
full order summary. After verifying that everything is
correct, click Place Order to finalize your
purchase and complete the process.
Scenario 3:
Imagine you are a user exploring the Account section of the Sasa app. Your goal is to manage your account details, check your rewards and points, view orders, write a review, and explore the wishlist and events.
Steps to Follow:
- To begin, open the Sasa app and navigate to the Account section using the navigation bar. First, click on Account Details to view your profile. Select Edit Profile, make changes to your details such as name, email, or address, and click Save to apply the updates.
- Next, click on Reward System to check your rewards and select Points Summary to view your current points balance. After that, click on My Orders to review both your past and current orders. Ensure that you can easily find and access the order details.
- Proceed by clicking on Reviews to enter the review page. Try writing a review for a product, and once done, click Submit to post your review. Then, click on My Wishlist to view the products you’ve saved. Check whether the wishlist is well-organized and easy to navigate.
- Finally, click on Stores and Events to explore upcoming events. Scroll through the list and verify that all event information is properly displayed and accessible.
Online User Testing with User 1 and User 3:
Physical User Testing with User 2:
User 1 - Hui Ru's Suggestions for Improvement:
-
The "Message" button could be smaller.
-
Consider changing the layout slightly.
User 2 - Jasslyn's Suggestions for Improvement:
-
Suggest improving the app by highlighting the total amount on the checkout page.
-
Change the colour of the total amount to make it the main focus.
User 3 - Pearson's Suggestions for Improvement:
-
Suggest making the text bigger for the stores and event page.
E. Improvement
Mr. Zeon suggested me to search for onboarding pages and add
after the loading page of Sasa. I wanted to add illustration
together with the description to let new users understand more
about Sasa app. Adding onboarding pages makes the Sasa app
better and professional.
I asked for my classmate, Chai Wei Yi's feedback for my lo-fi
prototype. He suggested me to add a slider in browse page for
users to customise their price range of products in Sasa app. I
asked for his guidance and improved my browse section by adding
a slider.
Mr. Zeon suggested me to create an effect to change images. I
followed his instruction and created buttons for users to click
to change the displaying image of the product. This makes my
product page more creative.
My classmate suggested me to make the navigation icon of each
category as the main colour of Sasa colour palette to
differentiate the sections and icons.
I followed Mr. Zeon's suggestion by adding banner for deals
page. Mr. Zeon said a deals page without banner is very standard
and nothing special. Adding banner can make the apps more
interesting and catch users' attention.
Other than navigate to 'Top Question' by clicking the 'Top
Question' button in FAQ and Info Centre, I created a search bar
to navigate to 'Top Question'.
Pearson, the user participating in my user testing suggested me
to make the font size in Store & Events page bigger to
enhance readability. I increased the font size of the heading
and body text.
Hui Ru, one of the user in the user testing pointed out that my
message buttons for 'Notifications' and 'Customer Service' can
be a bit smaller. I then decreased the size of the rectangle and
added corner radius to both the rectangles.
Jasslyn, user 2 in my user testing suggested improving the app by highlighting the total amount on the
checkout page. I changed the colour of the total amount to make it the main
focus.
F. Final Submission
G. Video Presentation
FEEDBACK
Week 11:
Progression is quite slow. Follow the timeline given in the
lecture slide. Add onboarding pages after loading page. Add banner
for deals page to make the app more interesting. Need to start
considering UI Kit and show Mr. Zeon my updates next week.
Week 12:
Add rewards system for Sasa app. Create a collect points features
for users to know how much points they gain in the system.
Week 13:
Overall okay. Try your best to finish low-fidelity prototype ASAP
to continue designing your final project.
REFLECTION
Designing the app from start to finish was a new experience
that pushed me to think critically and creatively. At first,
transforming rough ideas into a structured design felt like a
big task. However, breaking the process into steps by starting
with wireframes and then gradually refining the interface—made
it more manageable. I focused on ensuring clarity in the app’s
layout and making navigation as straightforward as possible.
A major takeaway from this project was understanding how
essential user feedback is. Conducting usability tests allowed
me to gather insights, such as improving the organization of
certain elements and enhancing user interaction. These
insights drove important revisions and helped me approach the
design from the users' perspective. Even minor tweaks, like
adjusting spacing or button sizes, made a noticeable
difference in the overall user experience. Working with design
tools like Figma allowed me to explore new features.
Experimenting with interactive options, such as clickable
buttons, made the prototype more engaging and realistic,
giving me a deeper understanding of how to create functional
designs.
Overall, this project taught me how to balance visual appeal
with usability and highlighted the importance of an iterative
design approach. Despite the initial challenges, seeing the
prototype come together was satisfying, and the experience has
given me a solid foundation for tackling future design tasks.
Comments
Post a Comment