Hanger
(Information Architecture)
Hanger is a concept mobile shopping App for woman's clothes. In an advanced information architecture class in term 4 at VFS, We were tasked to make a mobile shop App in 8 weeks. I found difficulty in building the best user follow for both repeat customers and new customers. Researching competitors helped me to decide on an information hierarchy.
​
​
My role: Information Architecture, UX design
Duration: 8weeks (Solo project) Device: Mobile App
The Problem to solve
Nowadays, despite the online shopping industry is growing especially since the pandemic has started, users experience some stress and confusion to find the items that they want to buy because there are various items and each website or App has different experiences.
Research (SWOT)
Analyzed shopping experiences on some online shopping sites and Apps(i.e. X-girl, Coen, Uniqlo, Lululemon and Amazon) to find out the trend, strengths and weaknesses.
​
Key insight
​- Using a well-organized menu and sort system also has a search option
- User account system provides a shortcut of shopping for repeating users
​
Goals​
- Creating a service that has a smooth experience for new customers and the frequent customers
​
The Challenge​
- Create easy navigation for both new users and repeating users
- Provide a comfortable experience to new users to come back for shopping again
​
Solution​
- Creating smooth user flow based on an information hierarchy
- Creating my page to keep a history of searching or purchasing
- Maintain using simple language
[Sketch and categorize] (Click to pop-up)
- Categorized items for users to understand easily, considering sort by items and colors.
- Sketched out and analyzes an information hierarchy
[User flow] (Click to pop-up)
- Categorized items to users to understand easily, considering sort by items and colors.
- Sketched out and analyzes an information hierachy
Low fidelity wireframe (Images are pop-up by clicking)
Used two colors to identify interactive and noninteractive.
Wireframe evolution (Images are pop-up by clicking)
Category sort section: The action buttons need to be able to be pushed by the fingers of any user, therefore made them bigger to easier to click for reducing stress.
Item detail page: The description can be moved below the CTA since some users do not need to read. Moreover, colours should be near the image, if the photo color will be changed by clicking.
High fidelity wireframe (Images are pop-up by clicking)
Used key color on the highest hierarchy CTA.
Showcase (Images are pop-up by clicking)
Learned from the project
By researching competitor, found out that each website or Apps have a different approach due to having different target users and items to sell, therefore it is important to know about the target audience's behaviours.
Furthermore, I learned that grouping the information is also important when I ievoluted the item detail page. In the begging, I cared about hierarchy more, however, image and color are in the same group, in that case displaying them as a group provides a smooth experience to users.