INFORMATION ARCHITECTURE
SITE REDESIGN:
WWW.SHOPPIGMENT.COM
Client: Case Study - www.shoppigment.com
Role: Information Architect, UX Designer, UI Designer
Skills: Information Architecture, Mobile-first Design, Wireframing, High Fidelity Design
Tools: Sketch, GlooMaps
description
Information architecture re-design of an existing website with a mobile-first approach. www.shoppigment.com is an e-commerce website for a locally curated shop selling design-savvy gifts, flora, and furniture.
challenge
Examine the current information architecture for the site on desktop and mobile and re-design the site using IA best practices. Meet the business goal of increasing product sales through the website by increasing findability of items, and overall user experience. Wireframes for this project were limited in scope to mobile.
key redesign features
new site structure and navigation menu
Card sorting and a survey of similar e-commerce sites were used to develop a new site map and navigation structure more in line with user's expectations
Menu items were re-organized and new sub-categories (such as 'dining' and 'tools' under category 'kitchen') were created to improve organization
Changes to the IA of individual screens critical to the user journey
New product category landing pages created (such as 'dining')
New product pages created with added sort and filter capabilities
PROCESS OVERVIEW:
Current Site Structure & IA Evaluation —> Future State Site Map—> Redesign: Mobile-first Wireframes —> High Fidelity Mobile Wireframes
Evaluating the Current Experience
The current experience was examined by:
Creating a current state site map to document the current site structure and IA at the navigation level
Identifying key user groups, scenarios, and a task journey
click any image for a closer look
CURRENT STATE SITE MAP
The site’s current primary navigation has the majority of products listed under a catch-all category titled 'shop everything'- with little rationale as to why other main navigation categories (such as ‘party goods') are kept separate.
SAMPLE SCENARIO & TASK journey
Identifying a key scenario & task allowed me to outline and examine the user journey:
TASK JOURNEy:Each of the 3 paths to the right yield different results:
path 1: no mugs found
path 2: 13 mugs found, none grey
path 3: 19 mugs found, 1 is grey
Using the Search function yields a grey mug that is unable to be found through menu navigation.
Evaluating the current experience and IA revealed some key problem areas & helped identify high level goals for the redesign:
SITE STRUCTURE
Inconsistencies exist in how information is categorized throughout the site, with multiple paths to the same page
Some product categories are extremely detailed (ex: party goods) while others are extremely broad (ex: 'shop everything')
Hierarchy presented in the navigation menu lacks clear rationale and doesn’t match existing mental models around e-commerce organization
NAVIGATION & PAGE LAYOUT
The navigation menu does not follow a consistent type of categorization, switching between product type and curated collections (ex: 'jewelry' and 'on the go')
A lack of breadcrumbs, back function, and page headings make it challenging for users to know where they are and navigate effectively
No sort or filter options on product category pages makes it hard to find specific products
HIGH LEVEL redesign GOALS
Improve product categorization
Re-organize navigation menu to better match users’ mental models
Improve navigation to help users have a better understanding of where they are on the site and allow them to go back
Redesigning the Experience
future state site map
A future state site map was created to provide a visual representation of the structure of the re-designed experience:
For a closer look click here.
REDESIGNED NAVIGATION MENU: mobile view
Key features:
New top-level navigation menu with distinct and clear categories
Navigation categories were changed to 1 consistent form of categorization (product type)
New sub-categories where created that align with the kind of products that Pigment carries.