top of page
Hanger_edited.jpg

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

Screen Shot 2021-09-15 at 1.02.52 PM.png

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. 

Screen Shot 2021-08-04 at 12.25_edited.jpg

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

research

[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

User flow

Low fidelity wireframe (Images are pop-up by clicking)

Used two colors to identify interactive and noninteractive.

Click here to low fidelity prototype 

Low-fi

Wireframe evolution (Images are pop-up by clicking)

Web 1920 – 1.png

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.

Web 1920 – 2.png

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.

Click here to low fidelity prototype 

UI

Showcase (Images are pop-up by clicking)

mockup

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.

bottom of page