homescreensplendid.jpg

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

iconfinder_icon-ios7-search-strong_21181

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

Screenshot 2019-03-13 at 12.07.03.png

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.

IMG_1201.JPG

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.

.jpg

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.

user flow .jpg

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.

IMG_2004.jpg

Paper prototype homepage

IMG_2006.jpg

Paper prototype product page

IMG_2005.jpg

Paper prototype product list page

oldproductlist.jpg

Mid-fidelity prototype

product list page

The final design

Screenshot 2019-03-17 at 20.12.06.png

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.

Screenshot 2019-03-17 at 20.11.50.png

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.

phoneversion.png

Next Steps

As research has shown that large percentage of users do their shopping on mobile, I have begun the stretch goal of designing a mobile responsive website.

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.