Establishing ease and efficiency when purchasing items for your home or office.
Let's set the scene...
Film & Furniture, based out of the UK, began as a blog. It quickly developed into an online curated shopping experience. They offer items featured in film and television. They wish to keep customers supporting their business by purchasing with efficiency and confidence. Product information and the VR feature were important to the users.
I appreciated the founder's pragmatic approach in addressing the business needs. The updates would be implemented by a team consisting of an engineer, a web developer and a graphic designer.
I would like to...
When synthesizing all the research and data, the consensus was the need for product info and reviews. Questionable features, which might not be of value to target users, were removed. Usability testing results generated the need for the VR feature.
Business needs & persona
“There are no dimensions, but after looking at the table in a room on the site, I’m guessing it will fit in my living room.”
The Film & Furniture site experienced a drop in conversion rate. Digital users would be directed to third-party sites, causing confusion and an increase in the abandonment of carts. Users found it challenging to navigate through the site and couldn't find any reviews or product information.
Combining film and decor was an obvious conclusion for the persona, the cinematic decorator. The decorators want to see how purchases would fit and look in their home. They find reviews with images useful.
After evaluating, the results are in...
“Only because I just started, can I tell that I’m on the first page, but it's not clearly visible.”
During usability tests, users needed an indication of where they were. The evaluation led to giving users the ability to view items in more detail.
• Target users needed visibility of system status to see what page they were at while shopping (1)
• Second violation was the lack of help and documentation (2)
That Cinematic Decorator
“I search for measurements to confirm it will fit in my place. I also look at reviews, with pictures.”
The cinematic decorator struggled to get through all the texts and images. Duplicated categories confused them.
Let me take you on a journey
The cinematic decorator needed item specifications and to see how items fit with their current decor. Instead of being an enjoyable shopping experience, they expressed the pain-point of being lost within the site while hunting for measurements and expressing the need & value in reviews.
Zara home gives users both product info while being able to view prices. Users have a separate screen to see measurements along with care instructions.
Both allbirds and Ikea give the user a virtual representation of furniture in your home and a virtual fit with sneakers.
What seems to be the problem here?
“I wanted to see measurements and product info, but I can’t find it!!”
The cinematic decorator;
• Prefers an easier experience and not get lost by all the categories
• Less text to get through on the page
• Would like to view items in their home before purchasing
The hypothesis is telling me..
• Add customer reviews with images, and product information
• The ability to see how, where, and if items will fit in their home or office
How's the foundation architecture?
“It’s a little hard to see what I’m shopping for because of the way it's organized.”
The current site had categories that left testers confused and lost. There were duplicate categories within categories, causing users to question what page they were at.
Let's give it an update
Merging the informational architecture created a smoother shopping experience for the users while decreasing cart abandonment.
Work out your thoughts, pen to paper
The process begins with the users’ journey through their pain points. It highlights the steps to complete a specific task while giving visibility for any iterations needed.
Iterate before committing to wireframes
There’s always a need to work things out before committing to wireframes. This is my discovery point for any iteration needed, as opposed to being in the trenches with high-fidelity frames.
"A" better than "B"?
“The white color at the bottom looks like an afterthought.”
• Testing results aligned with the transparent bar at the bottom. Testers found it was still visible while not interrupting the visual aesthetic (1)
• The smaller scale images were easier to view. Testers found the larger image frames competing for attention (2)
"Let's work through the iterations and how they tested"?
• Though this would load faster due to fewer images, testers felt still heavy with text, the problem wasn’t solved (1)
"The picture show"
• This option was heavy with images, which takes longer to load. It broke the rule of minimalism design, causing testers to struggle with the level of importance (2)
"The featured attraction"
• The final iteration addressed users' need to distinguish the hierarchy
• Product cards were important for increasing visibility in searches
• Micro-interactions engaged users and provided feedback per their actions (3)
There were certain features that tested horribly;
• Too many affordances in the same frame caused confusion
• This led to a need to edit down or deleted unnecessary CTA buttons
Branding required a fresh coat of paint; a redesign to simplify the overall experience. Creating the design system was a bit of back and forth. The system was updated to have a cohesive, minimal branding approach.
I get the picture now
“There are still too many steps to complete this task, I feel there is a need for simplification.”
Usability testing on the final prototype confirmed how crucial it is to test, test, test!!! Certain testers got lost when asked to complete certain tasks. This led to simplify and delete excessive frames.
The prototype, along with the MVP
Through usability testing on the existing site, affinity mapping, and journey mapping led to two MVPs:
• The cinematic decorator needed to validate their purchase with reviews
• Need for product info and specifications
The MVPs were simple enough that they integrated with the overall aesthetic and ethos of the brand. There was a final concern; was it the right balance between the number of overlays and the amount of hidden information?
The redesign achieved what I had set out to accomplish. The project scope grew due to iterations needed with each usability test. With more time, I would add a help/documentation section, a full-functioning search bar, and the ability to share finds.
Let's reflect for a moment
Being a movie and interior design enthusiast myself, this project was a challenge for me to keep my personal design opinions out of the project. With the client being based in Europe, and limited availability in communication, I had to take initiative and proceed with the project.
Final Integrated features;
• Customer reviews with images
• Confirm specification page with measurements & product info
• View items in their home/office