Splendid Homewares
An e-commerce website for a fictional houseware store in Aldgate.
The problem
The opportunity was to design a brand new e-commerce website for Splendid Homewares, a fictional neighbourhood houseware store based in Aldgate.
The purpose was to allow users to purchase products online for delivery or collection. Enabling them to intuitively search, discover, purchase and repeat orders, utilising an online checkout system.
The toughest challenge
Information Architecture was a big priority for the design, particularly as I was given an inventory of 75 products. However, not all products were easy to categorise into universally understood terms.
I made the decision to exclude a product if it did not add any value to the business and wasn't something users expected to find in the shop's inventory.
Outcome
Client
Splendid Homewares
(Concept Project)
UXDI Course (General Assembly)
Timeline
2 week sprint
My Role & Tasks
UX Designer & Researcher
User interviews
Usability Tests
Wireframes
Visual Design
Team
Zena Zerai
A brand new e-commerce website including a homepage with clear global and local navigation, a product search page utilising filters, a product description page, checkout and account pages.
Read the in-depth case study below
Discover
Site Visit
Competitor Analysis
User Interviews
Contextual Inquiry
Define
Card Sorting
User Flows
Site Map
Navigation
Develop
Paper Prototypes
Mid-fidelity Wireframes
Clickable Prototypes
Usability Tests
Deliver
High Fidelity Prototype
Presentation
Information Architecture
With such a large and diverse product inventory, it was essential to arrange the products in a clear and understandable way. This was to ensure a seamless and enjoyable experience for users while using the site.
3 user interviews
'I like to touch and feel the items’
"I usually have a budget in mind"
Real-world experience
I visited my competitor, John Lewis’s flagship store in Oxford Circus. Here I observed shoppers habits as well as the store’s functionality and layout. This would later help my design by closely matching the online system with the real world experience.
-
Brand | Items were categorised by topics, then by brand.
-
Customer Service | Shoppers relied heavily on shop assistants to find products.
-
Real-life products | Shoppers picked up items, touched them and looked at them 360°.
-
Save Function | Shoppers mentioned they would browse and return another day.
Sizing up the competition
I researched the online offerings of three main competitors, John Lewis, Ikea, Robert Dyas. The purpose was to identify common features that users would expect from a similar e-commerce site. In addition to spotting any interesting opportunities for my site.
Common features
-
Product recommendations and reviews
-
Offers on the homepage
-
Brand recommendations
Interesting features
-
Search by Room
Ikea's search by room feature online
Learning about my user-base
I conducted interviews with users who frequented homeware stores. This was to learn about their shopping process and experiences.
-
Instore | Preference for buying houseware items in store.
-
Images | Lack of trust of online images, need for more context on quality and size.
-
Bargain | Want products to look expensive, but like a bargain.
-
Room Search | Users liked this feature.
-
Influencers | Heavily persuaded to buy items by posts on instagram.
-
Sharing | People wanted to share their home images on socials.
Categorising Items
I conducted card sorts to test the best way to arrange the products. This enabled me to test what groupings worked best for the products.
Many users struggled with categorising a number of items, such as health and safety and cleaning products. I removed those items that didn't add any value to the business or that users wouldn't expect to find on the site.
4 open card sorts
5 closed card sorts
Mapping out the site structure
Following the card sort, I designed a site map, a visual representation of the website layout and the navigation for the site. This enabled me to visualise how many steps users would need to take to locate certain products.
One of the tasks set in the brief was to enable users to search for gifts. Consequently, I added 'Inspiration' to the primary navigation.
Desigining the flow
I moved onto designing the user flows for the three journeys set in the brief (search & buy, discover and repeat order). This helped me to focus on what screens I would need to start sketching out as wireframes.
Wireframing and testing
I then sketched out paper prototype of each of the journeys and put them into InVision to test with real users.
I gave the users specific tasks to carry out. This enabled me to get feedback on the functionality of the site and see which parts were unclear.
Paper prototype homepage
Paper prototype product page
Paper prototype product list page
Mid-fidelity prototype
product list page
The final design
1
2
3
4
Inspiration | After confusion during testing, this was changed to 'ideas', which users understood.
Sort by | Allowed users to sort by price, as research showed they were budget conscious.
In Stock | This filter was included based on user research showing frustrations at late notification of items out of stock.
Brand | This filter was included to match the way products were displayed and customers searched, on the site visit.
Product List page
1
2
3
4
Basket addition | Included a notification when an item has been added, as its important users are aware of the system status.
Multiple images | Based on users desire to see quality and context of items.
In stock notification and reviews| Included to add trust for users about the products.
Wishlist | Option to save for later, based on user research.
Product Description page
Conclusion
I was happy with what was produced during the short sprint and that I was able to design clear navigation for users to complete the three tasks set by the brief.
What I Learned
-
The importance of clear information architecture, particularly with a large product inventory. Bad information architecture increases the risk of losing users from the outset.
-
A notification system is important to make users aware that their interactions have had an effect. e.g an item has been added to the wishlist.
-
Best user-centred methods to structure forms.
Thanks for reading!
If you'd like to learn more about the project or just have a chat, please feel free to send me an email.