Home Furnishing Website Design

Left 3 weeks behind in the UX Design Immersive course and here I will explain the design process I followed for my second project — design of a microsite. See my first project “mobile app prototype in 3 days” here.

For this project I received a brief for a John Lewis microsite, to make it easier for people to find inspiring room desing ideas and create the look they’re interested in for their own homes.

The brief clearly detailed the personas of the company’s users, required functionality by John Lewis and deliverables. I was going to create a website that is entirely separate from the company’s primary website — in a 2 week sprint! It had to meet the objectives of the brief and retain the existing branding of the company.

PERSONAS & USER INTERVIEWS & USER JOURNEY

My solution addresses all 3 personas’ needs while mainly focusing on Midori, 29 year old graphic designer who loves modern styling as primary persona as she is representing John Lewis’ user base more closely in comparison.

I was given 3 personas that represent user base of John Lewis

I interviewed users matching personas’ profiles to understand the journey they go through while designing their homes.

User Research

While they all seemed to have different needs and expectations, common pain points started to emerge as I dug their struggles deeper. 3 key takeaways from the research are:

• People generally know what they like but they struggle with bringing ideas together
• Once they find a product they like, they keep searching other brands for similar and more affordable alternatives
• They care about the opinion of family and friends

Home Design User Journey / Experience Map

Research insights mapped on the user journey above clearly brought out the problem the areas the solution needs to focus on.

INFORMATION ARCHITECTURE & DESIGN STUDIO

I followed various design methods to come up with the solution.

Card sorting revealed that the users tend to think of home products within room categories rather than function. I decided that the menus and navigation of the site should reflect the categories people have chosen.

Card Sorting to define Information Architecture

User Flows of the four main goals

After identifying the main problems and broad categories, we ran a design studio with fellow classmates to bounce off some ideas on how to tackle those problems. It proved to be a very useful exercise as every team member had valuable ideas and bringing them together allowed us to come up with the best approach.

Design Studio

Initial Sketches

PROPOSED SOLUTION

My proposition is a microsite that will allow users to:

1. Browse from complete room photos for inspiration
2. Find the products that make up the look of a chosen room
3. Find similar products in other brands or price categories
4. Find complementary products
5. Save products
6. Create, manage, share multiple shopping lists
7. Set a budget on a shopping list
8. View updates from users that the list is shared with
9. Add products to the basket and checkout
10. Track purchases

John Lewis Home Decorating & Furnishing Website homepage wireframe

FIRST ITERATION & USER TESTING

I used Omnigraffle to digitize my work. Omnigraffle is a simple tool to create user flows, sitemaps and wireframes in short time. Then I created a clickable prototype on Invision to be able to test with users.

First Ieration — User Testing

Testing of digitised prototype revealed several usability problems. While the users expressed their liking for the clarity and simplicity, they didn’t appear inspired by the pages of room photos. They thought they were looking at products rather than ideas. I figured a change in layout was going to fix that so I have hidden the filters and descriptions to allow people to freely browse through images and re-arranged the layout to emphasise large photos.

Another usability issue appeared on the separate projects/ shopping list / basket options. Users weren’t clear on the different purposes of these functions, so I decided to merge projects and shopping list under one ‘multiple shopping lists’ functionality.

PROTOTYPE

Browsing Room Design Ideas [ interactive version ]

Manage Saved Items, Budget and Multiple Shopping Lists [ interactive version ]

Try the interactive prototype to see how it works and rest of the functionality.

NEXT STEPS

I thoroughly enjoyed working on this project. I had 2 weeks to bring it to it’s current stage. When I have more time I will be adding in extra functionality such as:

• Advanced filtering options on room ideas
• Home stylist and professionals directory
• Helpful tips