top of page
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.
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.
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.
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.
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.
Kitchen & Dining | Home Accessories
User friendly
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.
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.
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.
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.
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.
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.
bottom of page