Application Design I / Final Project: Completed Mobile Application Design Prototype (High-Fi)
02.12.2024 - 07.01.2024 (Week 11 - Week 15)
Gunn Joey / 0366122
Application Design / Bachelor of Design (Hons) in Creative Media
Project 2: UI/UX Design Document
TABLE OF CONTENTS
1. Module Information Booklet
2. Final Project
3. Progress
4. Final Submission
5. Feedback
6. Reflection
MODULE INFORMATION BOOKLET
FINAL PROJECT
Completed Mobile Application Design Prototype
A. UI Kit
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
Icons for navigation bar are all from: https://www.iconsdb.com
Images for High-Fi are all from: https://www.flaticon.com/
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.
B. Illustration
All illustrations and icons for each categories are downloaded in
Flatiron to enhance consistency for the high-fidelity prototype
design. These illustrations are placed in all low-fidelity
prototype's images.
After downloading the icons and illustrations, I placed them in
my prototype to make my redesign app visually appealing.
C. Consultation
I have consulted Mr. Zeon by asking him for extra consultation
session in campus. I also attended other section's timetable to
get feedback from Mr. Zeon.
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.
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 payment method selection could be designed by remembering previously used payment methods for faster checkout.
User 2 - Jasslyn's Suggestions for Improvement:
-
Add a search function in the 'Customer Service' section, so users can quickly find answers to specific queries without browsing through all the categories.
User 3 - Pearson's Suggestions for Improvement:
- Add a progress tracker for reward points that would help users easily see how close they are to unlocking certain rewards or promotions.
E. Improvement
I changed the layout of home page products in high-fidelity
prototype. Mr. Zeon suggested me to make the layout looks more
creative, add shapes with corner radius. Sir also suggested me to
test with my colours palette and apply to the container of
products.
I applied colour for the silvcr membership for display. The
previous colour that I applied was white colour. I then applied
light grey because it looks similar to silver colour.
Mr. Zeon suggested me to change the layout of account page. The
layout I designed for low-fidelity prototype was too boring and
standard. I found this layout looks more attractive.
I followed Mr. Zeon's suggestion and changed the layout of rewards
system.Users can click 'under 499 points' and '500 points and
above' to view different rewards.
I added illustrations to replace the image in low-fidelity
prototype.
Mr. Zeon suggested me to apply shadow to all products. I then
found that applying shadow to all containers are also visually
appealing.
I changed the layout of deals page too. I used the layout of home
page. Apply horizontal scrolling for the first category and
vertical scrolling for the following category.
For every continuous page of each main category like home page,
browse page, message page and account page, I deleted the search
bar and decided to use a simple black rectangle placed at the top
of the page and set them as fixed.
F. Final Lo-Fi App Design Prototype
G. Video Presentation
FEEDBACK
Week 14: Overall okay. Add one light tone pink to apply for the background
colour of onboarding page. Search for application design layouts
online and change the home page layout for optimisation.
Week 15: No big issues for high-fidelity prototype. Add shapes as a
container for each products and apply shadow. Change layout to make
the page look layered.
REFLECTION
Developing the high fidelity prototype was a valuable
experience that helped me improve my design skills and
attention to detail. This phase required a deeper focus on
refining the app’s visual and interactive elements. I worked
on enhancing the color scheme, typography, and overall layout
to create a clean and intuitive interface that felt cohesive
and easy to use.
One of the key lessons I learned was how small changes can
greatly improve the user experience. Simple adjustments like
resizing buttons, increasing spacing, and improving contrast
made the interface more user-friendly. Using Figma, I explored
interactive components such as clickable buttons and hover
effects, which made the app feel more engaging and realistic.
These interactions not only added to the visual appeal but
also helped ensure smooth navigation.
Mr. Aeon’s guidance was really helpful in helping me complete
my high fidelity prototype. His feedback allowed me to
identify areas for improvement, such as making key features
more prominent and improving text readability. Iterating based
on his suggestions gave me a clearer understanding of how to
approach the design from a user-centered perspective.
This project taught me that good design is an iterative
process that involves constant feedback and refinement. Seeing
the prototype evolve into a functional and polished product
was both challenging and rewarding. Overall, this experience
has strengthened my confidence in handling future design tasks
and further enhanced my ability to create user-friendly
applications.
Comments
Post a Comment