Background:
The yeuu app project is a redesign of a previous website prototype that was created using HTML5, CSS3, jQuery, and Javascript. The previous project, yeuu online, was limited. It's design relied heavily on the constraints of my own personal coding abilities at the time and was designed with the mindset of what I was able to translate into code. There was a large focus on the marketed items themselves with very little mention of what the yeuu brand stood for.
The yeuu app project will focus more on branding and the message behind the brand while still marketing products.
The original design for the yeuu online project (https://annlie.github.io/yeuu/):
User Interviews:
I interviewed 7 university students through direct message interviews and unmoderated survey interviews. The goal was to determine user pain points while online shopping and how they traverse around them. Respondents were aged 20-26, following our target audience.
Results showed a high level of importance in regards to categorizing inventory. Users noted the higher quantities of items as one of their pleasure points for online shopping; however, many found overly specific (having to click through multiple categories or having to sort through multiple similar categories) and under specific (not knowing where an item would be located) category systems as a pain point.
A smaller percentage of users mentioned homepages as a pain point as well; comments included homepages being too long and containing too much information packed into one screen to the point that users no longer want to scroll through them.
Sketches:
User Flow:
Wireframes:
User Testing:
To test the design as well as the intuitiveness of the site, I enlisted10 testers to complete two tasks. The tasks that they were asked to complete were:
1. Purchase two tote bags
2. Create an account and log in
These series of tests provided a few key insights: notifications had to be added for completed actions such as adding to the bag and users prefer the search bar. When looking for items, most users chose to utilize the search bar instead of clicking through item categories or looking through the homepage for featured items, and there was confusion over whether an item was successfully added to the shopping bag. Users understood that they clicked on the "add to bag" from the button color changes, but there was no clear indication over whether it was successful.
Updated Wireframes:
After receiving feedback from user testing, various UI improvements and added functionalities were implemented. A notification system was added for when users are adding items to their bag; the bag icon was changed to include a small number indicator for the amount of items that have been added. A pop-up window detailing what item was added to the bag was also implemented to appear and disappear after a short window of time. Components were better systemized to span over a consistent amount of columns, and a clearer pagination system was added on the search pages.
Style Guide:
