Maynooth Furniture is a new business selling affordable high-end furniture online. They need an e-commerce website for people to browse and purchase for home delivery.
I set out to create a design system to ensure Maynooth Furniture encompasses best-in-class usability and aesthetics across all corners of the website.
This is a personal portfolio project where I worked on all aspects of the design system and UX. The following case study is inspired by Udemy’s UX Design Course and Adobe XD Course.
I followed a user-centered design approach that allowed me to empathize with users through interviews and probes for context mapping, defining and ideating problems and solutions, and conducting user testing of prototypes to validate my final design.
Empathize with users
Having participants in the comfort of their own home, I carried out user interviews through Facebook's facetime, and by telephone with friends and family to understand:
1. Why users would purchase new instead of used.
2. What factors influence their purchasing decisions.
3. Why they prefer shopping in person vs online.
For Online Shopping:
+ I don’t have a car and I need help moving items
+ Online is quicker and easier than going in person
+ I can see the prices and styles online
Against Online Shopping:
- I need to see and feel what I’m buying in person
- I don’t want to pay additional shipping charges
- It’s hard to schedule a time to be home for delivery
During the user interviews, I asked the participants to complete a set of tasks that would allow me to probe into how they shop for furniture online.
They needed to choose an online furniture store and talk their way through buying a few pieces for a room of their choice.
Although relatively straight forward, this probe allowed me to discover any pain points they experienced with online shopping and at the same time gave me usability insight into competitors websites.
Define the problem and ideate solutions
I created the persona of Kathlene, an ideal user of Maynooth Furniture based on my user research from the volunteers. She experiences common issues when shopping online that many others face. The next step was to start ideating solution using common like Point of View, “How might we” Questions, and Challenging Assumptions.
POINT OF VIEW
Kathlene needs to buy pre-assembled furniture online that will be delivered to her home address on her schedule. Since she’s alone, she’ll need help moving the furniture into her house and put in the appropriate rooms, including on the second floor.
“HOW MIGHT WE”
- HMW allow for delivery and pick up 24hr/day to meet peoples busy schedules?
- HMW provide a service to aid those alone at home to move heavy furniture?
- HMW provide a service of furniture assembly before or after delivery?
I created a storyboard that shows the steps Kathlene takes in her shopping experience where she needs to take further action by contacting support for help. This allowed me empathize with potential pain points users may face, and helped me plan the next steps when thinking of wireframing.
Using and adapting pre-made wireframes from the Adobe XD Kit (2017), I began the layout of the website based on the projects initial requirements (Home page, Category page, Product page, and Contact Us page). As the design process kicked off, the wireframes were modified until a final version was appropriate to develop into a High Fidelity mock up.
The design concept for the High Fidelity was inspired by Kathlene - after all it has to appeal to someone with a sense of style! A sleek and minimalist appriach was empathized to give the site a modern look and feel. Photos from Unsplash.com were inputed for the mock up.
As my first UX Design project, I not only had to become comfortable with taking a user-centred design approach, I also had to learn how to use Adobe XD. Transitioning from Graphic Design, I found Adobe XD easy, but struggled with the initial scope of the website’s design challenge.
This project wasn't a fully designed website, instead there was a focus on several main pages which kept the project manageable. Moving on, there are many ideas I would love to implement, and some design aspect I'd like to further test, develop and change. In my free time I will continue to work on this project by building the missing pages (Account/Login page, Checkout page), and design a mobile version.
After the Adobe XD design course, I completed my certification from IDF and was able to bring many aspects that I learned into developing this project even further (currently version 2).