Paper+Patch UI/UX Application
You are a team of UX/UI Designers for an interactive agency in San Diego that has been hired to design a mobile app. You will collaborate with one of your classmates, you will design the application from start to finish in Figma.
Phase One
Competitor Research
Competitor Analysis
Interview One:
Name: Kelly Martin
Age Group: Late 40s
Occupation: Teacher
Interview Two
Name: Christopher Frobenius
Age Group: Mid 20s
Occupation: Master’s Degree Student
Interview Three
Name: Bijan Siry
Age Group: Mid 20s
Occupation: Student/Car Salesman
What is your favorite shopping application and what device do you use?
My favorite shopping application is Amazon, which is mostly used on iPhone 12.
How often and what time of day do you use the app?
The app is used daily, mostly in the afternoon or evening.
What’s most appealing about the app?
Easy to use, Fast, and free shipping.
What’s the hardest part about using this app?
Distracting, too many options are provided. Other items result from a search that is not wanted.
Was there anything surprising or unexpected about the app?
Surprised by how much advertisement is used,
What can be done to improve the app?
Remove the “inspire” section of the app. More organized home screen, too much app and information pops up.
What feature of the app do you use the most?
Search feature.
What is your favorite shopping application and what device do you use?
He shops mostly on his phone: iPhone 12. Amazon or OfferUp.
How often and what time of day do you use the app?
Amazon four times a month. He buys on OfferUp 1/2 times a month. Bedtime, right before sleeping.
What’s most appealing about the app?
Amazon Prime, free two-day shipping. OfferUp: You can purchase items way cheaper than MSRP on new and used items.
What’s the hardest part about using this app?
Not every item you want to purchase online is on Amazon (specific brands). OfferUp: Getting people to respond and establishing a time and place to meet.
Was there anything surprising or unexpected about the app?
Different sellers sell the same item at different prices, with different reviews and some are Prime and some are not. OfferUp now has ads and a paid version which is annoying.
What can be done to improve the app?
Amazon could take less of a cut from sellers and make smaller brands accessible. OfferUp, remove the ads, improve search algorithm (allowing for spacing and capitalization, not so specific searches)
What feature of the app do you use the most?
Amazon Prime. Messaging on Offers (OfferUp)
What is your favorite shopping application and what device do you use?
Amazon, used on an iPhone.
How often and what time of day do you use the app?
The app is often used at nighttime, maybe used 2-3 times a week.
What’s most appealing about the app?
Accessibility, in terms of offering so many different products,
What’s the hardest part about using this app?
Avoiding the subscribe and buy feature, the application pushes this feature too much.
Was there anything surprising or unexpected about the app?
Same-day shipping and amount of products offered.
What can be done to improve the app?
Too many recommended products that are not related to the searched item. Also too many advertisements on the home screen.
What feature of the app do you use the most?
The search bar. Always check Amazon first for cheaper prices.
Interview Four
Name: Daniel Kubeck
Age Group: Early 30s
Occupation: Software Engineer
Competitor Flow Chart
Competitor Value Analysis
What is your favorite shopping application and what device do you use?
Amazon. IPhone 14 Pro.
How often and what time of day do you use the app?
Frequently. Evening.
What’s most appealing about the app?
The app has everything, easy to buy.
What’s the hardest part about using this app?
Wish there was an alternative- Concerns about ethics and price.
Was there anything surprising or unexpected about the app?
How quick the shipping is. Also, how many cheap knock-offs there are, but the original item will not be there.
What can be done to improve the app?
Moderation of reviews (fake reviews), transferring real reviews of one item to another different item. Encourage photo reviews.
What feature of the app do you use the most?
Browsing section (search bar).
What were some of the frustrations that your interviewees experienced when using their music/shopping apps?
Too much information
Too many ads
Trustworthiness of products (lack of)
Pushing of subscriptions
What are some of the things you would specifically like to improve when designing your own app?
Include less/no advertisement. Have a clear home screen/ bottom nav bar.
What type of audience would you like to focus on when designing your music/shopping app?
Men and women outdoor enthusiasts, with a strong motivation to build their own gear. Mainly aged between 20-30 years old.
What is the value proposition for your app?
The app aims to deliver reliable and premium sewing patterns tailored for outdoor gear enthusiasts, empowering a community with a strong demand for DIY solutions.
Did you have any difficulty logging in?
The user wanted to input information.
Any issues with the AI generator?
No issues, just unsure where to click for the next page because items were not selectable.
Do you prefer a quiz-based AI generator or a text-based generator?
The user preferred the quiz-based one.
Any issues with adding items to the cart?
No, this was very clear.
Any issues with removing items from the cart?
No issues removing items from the cart.
Overall how do you feel about the app navigation?
It was somewhat unclear where the user was meant to click, the item or next. The text was very legible and the spacing provided stability throughout the app.
Any suggestions?
Further add interaction, so users can click which option they want.
Did you have any difficulty logging in?
No difficulties were mentioned.
Any issues with the AI generator?
On the features page, the scroll is not intuitive - maybe cut off more to show that it is supposed to scroll
Do you prefer a quiz-based AI generator or a text-based generator?
I prefer the quiz-based one.
Any issues with adding items to the cart?
None mentioned.
Any issues with removing items from the cart?
The minus button on the item should remove the item as well as the X.
Overall how do you feel about the app navigation?
For the most part, it is intuitive, however, the back buttons send you into a loop between the same two pages instead of sending you all the way back to the AI and cart pages.
Any suggestions?
No suggestions.
Did you have any difficulty logging in?
The user wanted to input information to log in,
Any issues with the AI generator?
No The concept is clear, but buttons should be clickable.
Do you prefer a quiz-based AI generator or a text-based generator?
The user preferred the quiz-based one.
Any issues with adding items to the cart?
No, this was very intuitive.
Any issues with removing items from the cart?
No issues removing an item from the cart, however when clicked on the back button after removing an item, the item was added back to the bag
Overall how do you feel about the app navigation?
Overall the buttons are clear, the text and layout are very legible, and everything is just not built out completely. The user explained that maybe selecting the item from the quiz, and then being able to click next page.
Any suggestions?
Change the button for the “Special Features” screen there is a button that looks like a horizontal scroll, either change the button or add the feature,
Did you have any difficulty logging in?
No difficulties were mentioned.
Any issues with the AI generator?
No difficulties were mentioned.
Do you prefer a quiz-based AI generator or a text-based generator?
I like both. Maybe have the option to use a text-based generator in the beginning in case they don’t want to do the quiz. Or use it on a case basis, for the user to fill in more specific details.
Any issues with adding items to the cart?
None Mentioned
Any issues with removing items from the cart?
Non Mentioned
Overall how do you feel about the app navigation?
It is good and intuitive.
Any suggestions?
Maybe have a loading page in the AI generator to give the app time to send the request to OpenAI or ChatGPT or whatever AI source.
1.) Cannot return to shopping from cart, Getting stuck in cart.
2.) Animations for email could be faster
3.) On the “profile: camp” page, the bottom nav bar does not change.
4.) The AI quiz was quite intuitive, showing what option was selected was very helpful.
5.) When removing an item from the cart, the top nav bar changes, unable to return.
6.) Add a “save to list” button on items on the search results screen.
1.) Would like to be able to click multiple options when choosing special features
2.) Would like to see a materials list (i.e yardage) at the end of pattern generation
3.) Sometimes the AI search goes to the search nav page, and sometimes goes to the
beginning of the AI process
4.) Thought the animations should be a little faster
5.) Bottom nav. sometimes works, sometimes does not work
6.) Would like to see a number by the cart to signify items in the cart
7.) The snack bars should be able to be dragged away or go away after a set amount of time
8.) When there is a scroll the navbar doesn’t stay at the bottom
9.) The search engine page doesn’t pop up when clicking search on the home page
10.) Should be able to click on snack bars to take you to the specified page (i.e added to cart)
11.) Thought the word ‘pattern’ should be mentioned more i.e. Explore patterns, Tent patterns, etc.
12.) In the cart, the word discount is off-putting, add in $ amt discounts or remove the word
1.) Cannot return from Cart if wanted to continue shopping.
2.) The saved item screen is not correct
3.) Back from “special features” in AI search goes back to cm even when clicking In
4.) AI bottom goes straight to the start of the search
5.) The Bottom Nav bar does not work on Search page
6.) The saved nav bar does not stay on the bottom
7.) The user liked the realistic effect of the sign-in/forgot password
8.) “Your account” does not have a cart in the top nav
9.) The bottom nav bar is acting weird.
10.) Small shift in total in cart pages.
1.) Got stuck in the cart
2.) Wanted a confirmation of the options page at the end of the AI
3.) The Profile page nav bar doesn’t work
4.) Snackbars are too big
5.) Sign In was realistic
(Fig. 3)
(Fig. 2)
(Fig. 4)
Phase Two
Napkin Sketch, Persona, Wireframe
Persona One:
Name: Kelly Martin
Age Group: Late 40s
Occupation: Teacher
Persona Two
Name: Christopher Frobenius
Age Group: Mid 20s
Occupation: Master’s Degree Student
Persona Three
Name: Bijan Siry
Age Group: Mid 20s
Occupation: Student/Car Salesman
Persona Four
Name: Daniel Kubeck
Age Group: Early 30s
Occupation: Software Engineer
Application Flow Chart
Application Wire Frame
Phase Three
Prototype & Low Fidelity User Testing
First Flow with Prototype
User Testing One
Name: Kelly Martin
Age Group: Late 40s
Occupation: Teacher
User Testing Two
Name: Christopher Frobenius
Age Group: Mid 20s
Occupation: Master’s Degree Student
User Testing Three
Name: Bijan Siry
Age Group: Mid 20s
Occupation: Student/Car Salesman
User Testing Four
Name: Daniel Kubeck
Age Group: Early 30s
Occupation: Software Engineer
Updated Prototype with User Feedback
Phase Four
High Fidelity UI & Design System
Design System
High Fidelity UI
Phase Five
User Testing & Interactive Prototype
Testing Feedback User One
Name: Kelly Martin
Age Group: Late 40s
Occupation: Teacher
Testing Feedback User Two
Name: Christopher Frobenius
Age Group: Mid 20s
Occupation: Master’s Degree Student
Testing Feedback User Three
Name: Bijan Siry
Age Group: Mid 20s
Occupation: Student/Car Salesman
Testing Feedback User Four
Name: Daniel Kubeck
Age Group: Early 30s
Occupation: Software Engineer
Final Interactive Prototype
What application are you researching for competition?
Amazon.
Is it a native application, a hybrid application, or a web-based application?
Amazon is a hybrid application.
What is the main objective of this app?
To be the ultimate online one-stop shop. To be the most user-friendly online shopping experience. To be extremely reliable, easy, and intuitive.
What is the overall tone or mission of the app?
The overall tone of the app is professional and straightforward. Amazon focuses on convenience for their customers to ensure an easy experience.
What are its main features?
Speedy delivery, scheduled delivery, quick customer service team (refunds, payments, etc), discounting, product subscriptions, and credit card services.
What areas of the app are reviewed positively?
Free delivery, quick delivery, and one subscription to all of the benefits. Amazon offers Competitive prices.
What areas of the app are reviewed negatively?
Monopolistic behavior, risk of scams, excessive packaging
What is the target demographic of the app?
United States (See Fig. 1). Amazon targets male and female adults 18-60 years old, average age is 37. (See fig.2) Average income of $85,000
What is the user interface like? Does it have a Design System that it adheres to?
The user interface is very legible and easy to follow. The design uses a lot of contrasting white with black text, and different shades of blue as a functional accent color. (See Fig. 3) Amazon uses a custom font named Amazon Ember for all of its interfaces. (See fig.4).
(Fig. 1)