Designing a responsive e-commerce site for a furniture company and introducing an augmented reality feature.
DURATION
2 weeks
ROLE
UX/UI Designer
Branding
Prototype and testing
OVERVIEW
An online sustainable company focusing on quality and details with a dash of personality targeting young professionals who take pride in their living space.
01. DISCOVERY
• User Interviews
• Personas
02. DEFINE
•Information Architecture
03. IDEATE
• Mid-Fidelity Wireframes
04. DESIGN
• Branding
• UI Kit
05. VALIDATE
• Hi-fi Prototype
• Usability Testing
01. DISCOVERY
INTERVIEW SUMMARY
FINDINGS: Since the pandemic and people had been quarantined in their house:
people are more invested in their furniture pieces
and while working from home, most would like to have a zoom-ready space
and augmented reality feature had positive feedbacks
CONCERN:
size accuracy on online orders
seeing and feeling physical material before purchasing
actual look of the furniture in the space with its own lighting, wall painting, and other elements
02. DEFINE
INFORMATION ARCHITECTURE
From my finding during the competitive analysis, I was able to organize the information hierarchy while the 1-on-1 interviews had given me an insight into the emotional process of the users.
Then site map, task flow, and user flow were created in order to map out the information architecture in a logical way so users can navigate as easily as possible.
Information architecture below:
03. IDEATE
MID - FIDELITY WIREFRAMES
A responsive mid-fidelity wireframe was build to show an overall layout for the site. In doing so, I was referencing back to my research, persona, and IA while keeping in mind the business’ purpose.
04. DESIGN
BRANDING
I first created a mood board that reflects the stakeholder adverbs: timeless, minimal, and sustainable.
From there, I started sketching a few logos and decided on a text logo for its versatility then proceeded on the development style guide.
HIGH - FIDELITY WIREFRAMES
Designs were carried throughout desktop, tablet, and mobile for the full experience of the product
05. VALIDATE
USABILITY TESTING
Conducted usability testing with a high-fidelity prototype via Zoom to observe how participants complete certain tasks.
RESULTS
Success:
100% of participants were able to search and order a sofa easily
AR feature was easily found and was thought that it was “so cool”
Participants like the UI aspect of the project
Doubts:
13% of participant did question the back end of AR after going through the prototype
While on camera, everyone just went through and dropped the furniture in place and did not use the measuring tool.
ITERATION
Based on usability test findings, a step by step guide was added upon choosing to use the AR feature. This will show how to use the feature to its maximum capability. And for repeat users, there is an option to close out and bypass the instructions.
Hero images have been changed to represent the brand’s identity better. While the icons that represent the brand’s sustainability, heritage craft preservation, and poverty reduction were moved higher on the page to tell the company’s story instead of starting with showing the products.
