RB BOARDS: WEBSITE
A responsive website design for a local craftsperson who builds woodworking projects.
Role: UX/UI Design, Branding
Duration: 8 weeks
Background: there are several considerations made by online shoppers when visiting a small business' website. They want to know more than just pricing and product information. My interview participants expect to learn about the maker behind the products, why they make their crafts and what are their values. Beyond that, it is important to instill trust and confidence that they will be getting a unique product from an actual human craftsperson. That is what I kept in mind while designing and developing the website for RB Boards.
Problem: Potential customers of RB Boards currently do not have an online store or informational site to learn more about the company and its goods.
How might we build a unique website that reflects not only the products but the ethos of the maker and their business as well.
EMPATHY STAGE
My goal with interviews was to better understand the motivations, frustrations and expectations of online shoppers. I conducted 5 interviews with people that regularly shop online or visit small business' websites and physical locations.
I discovered many common traits among these users and their online shopping preferences.
FigJam File (Interactive)
PERSONAS
Through my interviews and further research, I developed 1 user persona example of a potential user. This user is based off of my interviewees as well as an actual customer of the business.
Figma File (Interactive)
LO-FI WIREFRAMES
After developing user personas, I started the Low Fidelity wire framing stage of this website. I tried out a few different layouts and landed on one direction based on feedback I received from potential users.
Figma File (Interactive)
HI-FI PROTOTYPE
I had feedback provided on my Low Fidelity wireframes which informed my decisions on the next stage - High Fidelity UI design. The site was designed to reflect the products that are sold as well as the ethos of its owner. I wanted to keep it clean, minimal and focused on the product. I designed the UI for Desktop in this file
Figma File (Interactive)
HI-FI PROTOTYPE
You can also explore the final design for the website on mobile devices here in the Figma file below.
Figma File (Interactive)
ITERATIONS
After conducting 6 user tests on my high fidelity prototype, I moved on to iterations based on tester feedback. I made updates to the main CTA buttons as users felt they were not in focus enough. I added more line shapes to reflect the intricate patterns in the woodwork goods so that theme was carried on in the website. Further, I added a section for social proof by adding a customer testimonial to increase trust in the brand.
The interactive prototype of the site design is here, you can interact below.
Figma File (Interactive)
Solution: A bespoke website that attempts to be both novel and familiar. I wanted to be sure this did not feel like a template but also delivered on user's expectations of an online business site.
Reflection: While the problem for this project is simple enough, I feel that the main deliverable aligns with the vision of the business owner. The client agreed that the site's minimal aesthetic focused on the work and shaped a picture of the company that reflected their values.