Application Design 1 - Low-fi Prototype (Task 3)
1/7/2024 - 5/8/2024 (Week 11 - Week 15)
Katelyn Tan Kye Ling (0354148)
Bachelor
Of Design In Creative Media (Application Design 1)
Completed Mobile
Application Design Prototype (Task 3)
LECTURES
WEEK 11:
This week was to wrap up and finalise our task 2 UI/UX document. Mr. Zeon
then briefed us about our final task for this module. For this week, we had
to complete 4 parts of the UI Kit as well as our low fidelity
prototype.
I started of by doing my UI Kit which i followed a guild line I found on
Figma community which was taught by Mr. Zeon. This week I focused on doing
colours, typography, icons & grid system.
Then I did my entire low-fi prototype on figma as well. It was pretty
difficult at first because I wasn't really used to the app. However after
watching some tutorials I was able to pick up some new skills. There were
some difficulties still like doing some transitions etc.
Tutorials I watched:
WEEK 14:
As per usual, we had 1 to 1 consultation with Mr. Zeon and this week was our last consultation of the semester. Mr. Zeon gave me detailed feedback of my low-fi prototype so that I could finalise it.
FINAL SUBMISSIONS:
Week 13:
WEEK 12: (Public Holiday)
This week was a public holiday so I focused on continuing my low-fi
prototype after getting feedback from Mr. Zeon. I did more features and more detailed processes, because previously I only
did the main features of the app.
While doing the prototype, I removed the filter feature as I felt it was
not much of a use as everything is already categorised well. I also
forgot to add "points history" & "real-time delivery updates" to the
user flow chart and site map, so I added it during the making of the
prototype.
So during this week, I fully completed the login/register process, home,
member, favourites and cart page. Which means I still have the profile
page to do.
WEEK 13:
When I was correcting and altering the prototype, I noticed that new
arrivals shouldn't be a feature because grocery stores don't have new
products coming in every week and they just have restocks. So I decided to
change new arrivals to "save more" which includes the discounted
items. I then continued to finalise my low-fi prototype and clean up every thing
while implementing Mr. Zeon's feedback to prepare it for user
testing.
I also changed my flip book category to a swiping one instead because I
felt that it isn't so suitable and user friendly for an online grocery
app.
Fig 1.1 New Flipbook
After finalisng my prototype, I created 3 scenarios for the user testing
which are:
Scenario 1:
You want to log in through your friend's phone but have forgotten your
password. Head to the forget password feature to set a new password and
log in again. Check whether your current points are still in the member's
page and also if your points history are correct. A member's exclusive
promo caught your eye and you check it out. Next, you find your order
history in the profile page that you wanted to show your friend that was
done by self pick-up. Then log out of the app under settings.
Scenario 2:
Log in. Go to the beverages category and add "MILO ACTIVE-GO CHOCOLATE
MALT DRINK" to cart. Next, claim vouchers and coupons at the member's
page under "rewards catalogue" and check if coupons are there under "my
rewards". Then go to the checkout process which is the cart page. Select
the free delivery coupon to use and also choose to use your Lotus's
points before checkout. Select COD as payment method and place order.
Lastly, go and track your order.
Scenario 3:
You first log into the app. You're not sure how to do something so you ask
the live chat. You then use the search bar to search for "MILO ACTIVE-GO
CHOCOLATE MALT DRINK" which is your daily breakfast. You add it to
favourites under the breakfast favourite folder. You go to the breakfast
favourite folder to check if it's there. You also want to share your
breakfast favourite folder to your friend and do that through the share
feature.
After doing the first user testing, I noticed that there was too much
guidance in the first user testing. So I switched up my other scenarios to
make it less guiding and for users to find out where things are on their
own.
Updated Scenarios:
Scenario 2:
Log in. Go to the beverages category and add "MILO ACTIVE-GO CHOCOLATE
MALT DRINK" to cart. Next, claim vouchers and coupons and check if coupons
are there under "my rewards". Then go to the checkout area. Select the
free delivery coupon to use and also choose to use your Lotus's points
before checkout. Select COD as payment method and place order. Lastly, go
and track your order.
Scenario 3:
Log into app. You're not sure how to do something so you ask the live
chat. You then search for "MILO ACTIVE-GO CHOCOLATE MALT DRINK" which is
your daily breakfast. You add it to favourites under the breakfast
favourite folder. You go to favourites and check if the item is under your
breakfast folder. You also want to share your breakfast favourite folder
to your friend and do that through the share feature.
Feedback from user testing:
Feedback from user testing:
User 1 feedback: (Scenario 1)
- Confusing because she doesn't know what features was on the app, she
was new to the app.
- Easy to do only because I told her everything she needed to do.
- Display number of points in the homepage.
- Previous orders -> order history.
- Layout is okay.
- Cart button in homepage only.
User 2 feedback: (Scenario 2)
- Less unnecessary buttons, more straightforward.
- Easier to navigate, less buttons, less things so that means lesser
distractions.
- The favourite feature is added, instead of 4 there are 5 buttons at
navigation bar.
- Clear and sufficient information
- Clearer design and layout.
User 3: (Scenario 3)
- Good layout.
- The favourites page share and delete feature button can change to 3
dots button instead of pencil symbool.
- Nothing to change because it's already well designed.
Click here for user testing recordings.
After getting the user testing, I edited what I think suited the app
with the user testing's feedback.
As per usual, we had 1 to 1 consultation with Mr. Zeon and this week was our last consultation of the semester. Mr. Zeon gave me detailed feedback of my low-fi prototype so that I could finalise it.
I went back home and finalised the low-fi prototype and proceeded to
start with my high-fi prototype. I changed the colours of the buttons
and some texts.
FINAL SUBMISSIONS:
WEEKLY FEEDBACK
Week 12: (Feedback via Outlook)
Week 12: (Feedback via Outlook)
"Low fidelity wireframes should use only monochrome colors, such as
dark grey and light grey. You can keep the current color version
wireframe and duplicate another file, changing all colors to monochrome.
Continue working with the monochrome version, while keeping the color
version for the high-fidelity prototype."
"Overall, good effort, and keep it up. Please continue to finish the
low-fidelity wireframes."
Week 13:
- Add text to features that will have text, don't leave blank.
- No white space in some parts of page, makes it look tight and
cluttered.
- Member page "Scan to earn points" feature not so important, don't make it in the
center. Make the points collection more important.
- Live chat make into new page instead.
- Shorten product description.
- Decide on 3 scenarios (Exp: Find a product to buy & checkout and
track the progress)
Week 14:
- Change button of "exit" to "go back to previous page" style.
- Onboarding page in High-Fi prototype.
- Make add to cart button linked to new page to show item added.
- Add time to track order.
- Item -> Cart, then cart need "go back page" which leads back to
item.
- Add buy now button in items page.
- Lesser discounts in the best seller.
REFLECTION
Experience
I would say among all the assignments, this one was one of the most hectic because of how many parts there were to this assignment and also how tight the due date was. However in the end I was still able to complete my work which I was satisfied about. Though it was quite a lot of work, I found it quite fun to learn how to use figma through the tutorials online that actually were pretty helpful. Seeing my prototype build up bit by bit was fun. It felt more like a puzzle. Also user testing was helpful too so that I could gain immediate user feedback. I also learnt a lot about how simplifying an app can bring better experience to users. Overall, this was a fun experience for me and thanks to Mr. Zeon's weekly detailed feedback I was able to stay on the right track.
I would say among all the assignments, this one was one of the most hectic because of how many parts there were to this assignment and also how tight the due date was. However in the end I was still able to complete my work which I was satisfied about. Though it was quite a lot of work, I found it quite fun to learn how to use figma through the tutorials online that actually were pretty helpful. Seeing my prototype build up bit by bit was fun. It felt more like a puzzle. Also user testing was helpful too so that I could gain immediate user feedback. I also learnt a lot about how simplifying an app can bring better experience to users. Overall, this was a fun experience for me and thanks to Mr. Zeon's weekly detailed feedback I was able to stay on the right track.
Observation
Throughout my journey of creating the low-fidelity prototype directly in
Figma, I noticed a lot about the design process and myself. Jumping in
without any sketches, I relied on Figma’s tools and my gut feelings. As I
worked, I saw how my design choices affected usability—button placements and
navigation flow were big issues. This hands-on experience showed me how
important it is to have an easy-to-use design and to keep tweaking things
based on user feedback. It was a journey of figuring things out, learning,
and constantly making changes to improve the user experience.
Findings
Creating the low-fidelity prototype in Figma taught me a lot about the design process. I realized that many of the initial issues, like confusing navigation and unclear button labels, were easier to spot when I saw how users interacted with the prototype. Simplifying the layout and keeping the design consistent made a big difference. I learned that user feedback and also weekly feedback from Mr. Zeon was crucial and that making small, iterative changes can significantly improve the user experience. I also find that planning is important, due to the fact we had no time to do sketches, I was kind of all over the place at the start. However, after doing the prototype bit by bit with good time management, I was able to complete everything.
Findings
Creating the low-fidelity prototype in Figma taught me a lot about the design process. I realized that many of the initial issues, like confusing navigation and unclear button labels, were easier to spot when I saw how users interacted with the prototype. Simplifying the layout and keeping the design consistent made a big difference. I learned that user feedback and also weekly feedback from Mr. Zeon was crucial and that making small, iterative changes can significantly improve the user experience. I also find that planning is important, due to the fact we had no time to do sketches, I was kind of all over the place at the start. However, after doing the prototype bit by bit with good time management, I was able to complete everything.
Comments
Post a Comment