UX Research | UX Design | UI Design | Prototyping

 

E-Commerce Design (Conceptual Project)
Creating an intuitive and pleasant way to shop for furniture online

I completed this project as part of a UX/UI design course in order to grow my skills in product design. This was the first such project that I completed, and while the focus of the brief was more on the interface design, I tried to inform my design using established UX principles, research and testing.

 

 

The Challenge

Maynooth Furniture is a new business selling a­ffordable, high-end, locally-made furniture. The brief was to build an e-commerce website and mobile app for people to browse and purchase furniture for home delivery.

The challenge I identified was that a lot of shoppers still face inconveniences in finding the right products when shopping online, as well as finding the right information to make a purchasing decision.

The higher the value of the products, the higher the risk experienced by the user, especially when shopping online. I sought to minimize this risk as much as possible by making relevant information readily accessible at the right steps in the user journey.


Phase 1: Research

I started by conducting research into competitors as well as other successful e-commerce sites in order to identify any patterns in their IA, interaction design and user journeys.

I also conducted preliminary interviews with 5 users to study their experiences when shopping online, particularly for high end items such as furniture.

 Key Findings:

  1. Buying furniture online posed a greater risk for users compared to shopping in-store, as they were unable to feel the materials used, observe the quality of the build and accurately see the colours.

  2. Users usually had an idea of the style of furniture they wanted to buy before approaching a retailer. Their preferences were influenced by various online and offline sources such as friends, social media, blogs, influencers, etc. In essence the user journey for purchasing furniture begins long before the user visits a store or uses the product.

  3. When shopping for furniture, most users were looking for specific items and wanted to be able to find these as quickly and easily as possible. However, about 60% of users also indicated that they liked to look around the sites they were shopping on for inspiration and ideas.


User Persona
Based on the brief and market research, I developed a user persona to inform design decisions:

Abby Persona.png

Abby | 31, PR Consultant, London
Abby is a senior consultant at the local offices of an international PR company. She earns a salary of £42,000 per year. She’s both style and price conscious.
Abby has just moved in with her fiancée and is looking for new furniture for their 2 bedroom apartment just outside London. She loves to get inspiration on Instagram, where she follows several lifestyle and interior design influencers. She’s digitally savvy and prefers to shop online for everyday items as it saves her time and effort in commuting in and around the city.


Phase 2: Wireframes & Lo-Fi Prototypes

Based on my research findings, I designed wireframes for the website’s homepage, a category page and product page.

I categorised products by room type, as this seemed the most intuitive based on competitor research and interviews. This formed the basis for the main site navigation, in addition to a search bar, cart, user profile area and contact link.

On the main page, I chose to highlight both products as well as content. Users had expressed a desire to see inspiration and trends from furniture stores, and I also felt that it was important to establish the brand as a thought leader in interior design as this would gain trust and minimize some of the risk associated with buying online.

On the product category pages, I used a grid of products with a side menu where users can filter products according to item type, material and availability.

The product page featured a main section which included the most important information (images, product name, price, colour selection) and clear call to action (add to cart button). In a secondary section underneath this I included additional detailed information which users would find important when making a purchasing decision (product details, dimensions, care instructions and delivery & returns policy). These were displayed as collapsible sections for ease of reading. 

 
Artboard+%E2%80%93+2%402x.jpg
 

Phase 3: User Testing

I conducted tests with 3 users whereby I gave them specific tasks to perform using the low-fi prototypes. Their actions, facial expressions and commentary were recorded and they were asked to give feedback of their overall experience after completing the tests.

 Key Findings:

  1. Users found it easy to navigate to the product category they were looking for, from the home page or any other page

  2. On the category page, some users took over 30 seconds to go through and select the filter criteria which were structured in a list format.

  3. 66% of users indicated that they would have liked the ability to filter products by price

  4. On the individual product page, users easily identified various product info and added the product to their cart.


Phase 4: Interface Design & Hi-Fi Prototypes

Based on user testing and feedback, I updated the category page filter to include a price range and changed the format of the filters to expandable menus in order to be easier to use (users could now adjust filters that were relevant to them rather than viewing all the filter options). This also made the interface design of this side menu consistent with the product details on the product page.

I also opted to remove the colour variants under each product on the category page. I felt that these cluttered the page and that users might only be interested in the colour variants for products that they were considering. Perhaps a good compromise could be to display available colours when a user hovers over each product, instead of simultaneously showing all colours for all products.

During this phase of the design I also worked on the mobile app for the store.


Phase 5: Additional User Testing

I conducted a second set of user tests with the high fidelity prototypes of both the website and mobile app, after which I made some final adjustments.


Learnings & Next Steps

In hindsight I would have liked to conduct more user testing and research on the mobile app earlier on in the process, and spent more time to plan how it would differ from the website.

The next steps would be to iterate further and refine the design by creating more detailed prototypes and running further tests, as well as working on the interaction design.

Overall, I received positive feedback on the project and learned a lot about the experience design process.

 
Artboard – 1@2x.jpg
Artboard – 3@2x.jpg
379fd0104940699.5f6df19191b8e.gif
7c274b104940699.5f6df191914f6.gif
511ced104940699.5f6df19190995.gif
Next
Next

Glenryck Rebrand