Objectives

• — Create a unique web experience with an intuitive filter system.
• — Users must be able to easily, safely and securely shop for furniture.
• — Needs to have an extensive, dedicated area where user reviews are created, collected and displayed with the help of AI.
• — Must have a function where users can easily compare prices with other online stores.

Challenges

• — Implementation of a complicated filtering system.
• — Large database of stock with mismatched product images.
• — Lack of an existing design system or approach.

Role

• — UX Designer, in a small agile team where multiple roles were designated between product owner, myself and the development team.

Tools

• — Figma — Notion — Illustrator — After Effects — Typeform — Protopie

Understand

User Survey

• — We distributed through existing social media channels a concise survey to target demographics in the Montréal area to refrain from any geographical preference. The survey was created and sent out on a 5 day sprint through Typeform to increase user engagement, with the findings then easily synced into Notion to review with the team.

Persona

• — From the survey results previously gathered, we could compose an aggregated empathy map by collecting crucial information from various questions to help form our main persona. This persona was then used as a model for our design process with the prevention of bias.

The Problem

• How might we achieve:


• — A user friendly filtration system


• — Built in product and price matching


• — Display products in an elegant, appealing way


• — Create a database of unbiased reviews


• — Reduce anxiety through use of color, language and page layout

Explore

Competitive Analysis

• — Through comparison of both direct and indirect competitors we were able to recognize key features that we would be able to iterate and improve, such as common filter systems and static customer reviews. We deliberately wanted to make the customer review experience a larger part of the process which made you feel like you, as a customer were contributing to something to help it improve, garnering a sense of well-being as well as purchasing for yourself.

User Flow

• — Developing a detailed user flow from an initial e-commerce related task flow powered by ChatGPT, allowed us to quickly put down foundations for key navigable pages (search results, product listing, a detailed filtration system, and checkout).

Low Fidelity Wireframes

• — Breaking down the user flow into 3 manageable sections; pre-purchase, checkout & post-purchase we can clearly showcase the visual footprint to the client whilst also helping ourselves ideate where buttons, text and images belong in correlation to each other. Building a wireflow at this stage is a valuable resource to hand over to the development team further down the line - allowing them to visualize what screen specific button presses take the user.

High Fidelity Wireframes

• — Our design process allowed us to create a responsive website, mobile first with the understanding that it can easily scale up using auto layout to a desktop version through development using flexbox. When a majority of low fidelity mobile screens were created, is when we began working on a simple design system and high fidelity wireframes. We could then showcase these with the client and begin short usability sessions with simple prototypes.

• — With the product filtration system we wanted to keep it both easily accessible but hidden, as well as both comprehensive but uncomplicated. Taking data from our aggregated empathy map and reviewing existing competitor data we defined key filter titles, removing or combining where we would to keep total amount low. We experimented with tabs but with some target areas more dificult to reach the thumb zone we settled on a concise accordion design with easily identifiable icons to usability test.

• — We discovered during our initial user survey that 58% of participants were more likely to commit to a purchase if there were over 25, 5 star reviews. With this data in mind, we brainstormed ideas on how to increase the amount of use reviews. CTA's within multiple pages, sections on particular pages, and a unique, intuitive approach to writing a review post-purchase allowed us to put a strong emphasis on a natural way of building constructive user reviews using AI.

• — Excited by recent advances in AI, I am always looking at improving my own workflow and thinking of solutions where AI can be utilized in a products lifecycle. Our early research found that users were less likely to leave reviews for products they were happy with due to time constraints needed to write a seemingly perfect review. Here our approach is to give the user a list of keywords associated with the product and listed at random, where they choose and submit a star rating out of 5 - before the chatbot API writes a well worded, full sentenced review.

• — We adapted two email client UI screens from another project to show how emailed marketing campaigns can pull the customer back to the site for tracking information and leaving a product review.This allowed us to gather a usability testing base for both projects simultaneously. View the minimail case study here.

Design System

• — A robust design system was implemented early and continuously adapted as further iterations were made. This gave time for client feedback and to utilize usability testing to ensure the system is easily reusable, consistent and scalable, with any feedback taken into consideration for changes to be made with each progress update biweekly.
• —The display typeface and accent color had some changes from initial variations but were easily updated with global changes to be applied to multiple components with correctly setup text styles.
• — The small icon set needed was geometrically based on Material Symbols but designed with softer corners, edges, and caps to employ a feeling of soft comfort in the product.

Materialize

Usability Testing

• — We distributed static and interactive prototypes to our initial research group to gather constructive feedback on functionality, design choices, micro-interactions and the various features we wanted to implement. These motion graphics also, later served as a useful resource for the development team, to use alongside notes and wireframes whilst building movement into the product.

Problems

• — Prototyping high fidelity screens for static using AE and interactive using either Figma or ProtoPie is time-consuming. However, conversations with colleagues, developers, and others the consensus has always been that it is all a viable mix of useful documentation leading to less problems in the future, which is why I continue to employ this multi-prototype approach.
• — Initial plans to develop a bespoke price comparison API were scrapped due to time implications. Instead, offering an off-site experience for that functionality.

Conclusion

• — Using Notion as a project management tool to easily import data and sync other important applications such as Typeform.
• — Key insights, aggregated empathy map and personas were easily gathered by spending time at the start of the process to research and write concise questions for the user survey.
• — Taking on multiple roles is exciting to help reach a desired outcome. Previous experience working in full branding agencies, working within a team and sharing updates with clients gave me a great footing to understand the target market, begin research tasks and, establish the design system.
• — Our collective deep understanding of not just experience design, but front and back-end development allowed us as a team to easily communicate what was possible, what we wanted to apply and how it might be achieved - through conversation, annotations & prototypes.