Inside Retail desktop Home Page
Inside Retail Mobile article page
Background
Inside Retail covers news and trends for the retail industry through print and online medium. My roll in this project is to redesign the desktop and mobile website from the current website and improve the user experience.
Research (Gathering data)
Google analytics - Find typical user flow.
Observational study - Simulate the typical user flow of both mobile and desktop suggested via Google analytics while the 6 participant perform think out loud once through desktop website and once through mobile website. Data gathered via note taking.
Semistructured interview - After the participant perform the think out loud on both desktop and mobile website a short semistructured is conducted on the participants overall experience.
Typical User flow
Understanding the Data gathered using affinity mapping
Making sense of the data via Affinity diagram
Results
Data from the google analytics suggest majority of the user start their journey at the article page and only a very small percent of users make it to the home page or other news pages. This insight plus the data from observation study and semistructured interview reveal 3 main emerging themes. They are
1. User find the layout unclear and confusing. User find the site overwhelm with information, messy and feels cramped.
2. User feels confused and distracted with the content. Especially regarding the premium content. Also the layout distract them to finish reading the content.
3. Navigation is unclear. There are confusion with the navigation and also most user do not feel the navigation does not give them any feedback on their current whereabout on the site.
These 3 themes resonates to the underlining problem which is the lack of clarity of the current desktop and mobile site.
Problem statement
The redesign of inside retail needs to address the key issue which are the lack of clarity in its layout, content and navigation in order to improve the user experience of the desktop and mobile website usage.
Design Iterations
initial idea desktop with same ad layout
initial idea desktop with new ad layout and navigation
initial mobile idea with new layout
initial Low fidelity desktop wireframe
initial Low fidelity desktop wireframe different ad layout
initial low fidelity mobile
Through out different stages of the design iteration the concept is to focused on creating more clarity through layout and spacing of the article and giving user feedbacks on their location in the site. The aim is to allow spacing and layout for the user to focus on the content. Navigation is made clear and simple with user able to see their location at a glance via the header. Content hierarchy is reorganised to take less guess work out of the user.
Wireframe via sketch app
invision prototypes 1
invision prototypes 2
invision prototypes mobile 1
invision prototypes mobile 2
Different Prototypes were setup via InVison and tested internally for feedbacks before further design iteration.
Final design solution
Final chosen Design
Below showcase some of the features of the desktop and mobile websites animated via aftereffect.
Cursor hover on top of fix header to retrieve sub-category navigation bar
Fix header with scrolling up to retrieve sub-category nav bar
Menu feature
swipe feature for premium content selection
Navigation and login pop up feature
Current status of this project is complete with plans to implement later this year.