macbook_Homewares.jpg

SPLENDID HOUSEWARES
 

Project: e-Commerce website
Role: Design Research & UX/UI Design
Team: Solo

Platform: e-commerce Website

Tools: Sketch, InVision, Photoshop, Keynote

PROJECT OVERVIEW
 

This e-commerce concept project is for a local Housewares store, based in the Algate neighborhood, in London. The brick-and-mortar store has been a local favorite for the past 20 years and is now looking to expand a curated offering of select items on a web platform.
A large emphasis is placed on information architecture — organizing the online experience to match the ethos and the look and feel of the store. The MVP prototype successfully navigates users through the online selection, as well as the user-focused purchase experience.


The Challenge: To sort and organize the products, creating successful information architecture for the site. Also to create a smooth user flow for the main tasks: search, discover and repeat orders, utilizing the e-commerce checkout function. 

The Solution: Via user-research methods, such as card sorting, successfully create Visual Hierarchy and Information Architecture focused on user's needs. This will assist in creating a smooth and efficient user flow in the check-out process. The double-diamond design method will be an ally in the iteration and synthesizing process. 

1. RESEARCH
 

Brief overview
Competitive/Comparative Analysis
Site Visit
Card Sorting: Open & closed method

Brief Overview
 

Splendid Homewares was looking to translate their ethos and experience into a trusted e-commerce site. I was given approximately 100 curated items, in random order, to be featured in the store. It was hence essential that I focused a good portion of the sprint on Information Architecture. I employed methods such as open and closed card sorting and a site-visit which granted further insights into the feel of what was most vital for the online platform. 

Show More
Show More

Competitive/Comparative Analysis
 

Looking at competitors: Lords, Robert Dyas, Anthropologie, Maison Curate, two key primary user functions were confirmed. The search bar needed to be front and centre. This was going to be one of the key navigational tools for an
e-commerce website. The brief was echoed in the competitors' application of the store's contact details being offered prime real-estate on the home page. Splendid Housewares wanted to continue their core value of service and care as they expanded to this new digital model. 

Show More

Search Bar: prominent

Contact

Site Visit
 

During my site visit to each of the following businesses, my key takeaway was noting how important clear spacial organization completely shifted a customer's experience. Robert Dyas was cluttered and overwhelming, whereas Maison Curate struck a perfect balance of warm and inviting, yet beautifully curated. It was clear that the website needed to reflect this same welcoming atmosphere. 

Show More

Card Sorting: Open & Closed
 

Starting with an open card sort, the outlying items quickly became visible. With each user sorting through, simplicity and organization arose to the surface. It was important to note the importance of global taxonomy. If a non-native English speaker couldn't find an item — the point of the navigation system was lost. After the initial refinement of the open sort, the closed sort allowed for further streamlining, folding any excess into efficiency. Thus began the information architecture of the site, through the core pillar of keen user-research & insights. 

Show More

2. SYNTHESIS
 

Affinity Mapping 
Site Map

Affinity Mapping
 

Affinity Mapping with this particular creative problem, doubled as a navigation tool.  It further defined the categories and the hierarchies within the information architecture. 

1/2

Site Map
 

As each layer in the UX process builds upon itself, the Site Map, is a further synthesis of the methods preceding it. The Kitchen and Garden & Home categories were further tested and users still found the Taxonomy confusing. Kitchenware was the widest range, hence needed the prime real-estate. It couldn't be folded into Home. A further iteration of this became: Kitchen & Dining plus, Home Accessories, which solved the hierarchy and user experience. 

Show More

Kitchen & Dining | Home Accessories
User friendly

Show More

User Journey
 

This represents the User Journey specifically for the Discovery Flow. This Happy Path highlights the Wishlist. It was a key feature that was requested during our user-research. Users employed it as a comparison method, it built their trust and enhanced the checkout flow
I created User Journeys for the Search flow and the Checkout flow too, in order to ensure a holistic customer experience. 

3. IDEATION
 

Sketching 

Sketching 
 

During the sketching phase key takeaways were assimilating the user flow into the flow of the screens. It was also important to continue the thread of clear, efficient navigation to match the in-store experience. Shipping options became more specific as did adding a clear quantity indicator in the items checkout flow.  
 

Show More

4. PROTOTYPE
 

User testing 
Wireframes
Clickable Prototype

User-testing 
 

This phase of user-testing was pertinent to ironing out various bugs within the flow. With each round of tests, it smoothed any core issues out and refined the system. The checkout system needed to feel entirely secure to the user, the level of trust might be easily shaken, so extra care was taken to ensure ease and clarity.
The profile icon and sign in copy refined due to user feedback.   

Show More
Show More

Wireframes 
 

Through user-testing, I found clear indicators of my unconscious assumptions, the menu bar being a wonderful example. I kept adding an anchor to the menu which would guide users through the menu. But quickly learned that it was not only taking up prime real-estate, it was also a hand-hold that was not necessary. The iterations are clearly indicated below. 

Show More
Show More

The menu bar, resolved

Wireframes continued... 
 

Using Sketch, I was able to add details which might have been missed in the paper prototype. Graying out the screens when the pop-up appeared, detailing the items individually and on the home page enabled a deeper understanding of the information architecture.

Show More

Prototype
 

This e-commerce store guides new users through the search function and navigation of the site. It efficiently guides them through the discovery process, to the final purchase page. 

macbook_Homewares.jpg

5. NEXT STEPS
 

Information Architecture
UI High-Fidelity

Information Architecture
 

I would like to continue building out the items in the menu bar and to expand the MVP to be able to search by brand. 


 

UI, High Fidelity
 

Next steps here would be to iterate further and complete the High-Fidelity mock-up to refine the product. 

  • Instagram - Black Circle
  • Facebook - Black Circle