As part of the Ironhack UX/UI bootcamp, my team and I were tasked with designing a website with e-commerce features for a local business. The challenge would be to adapt our design to the business’s existing brand and market strategy, while also implementing e-commerce effectively.
Looking around, we found Divano, a successful local furniture shop that already had a website showcasing their products, but without any e-commerce features.
Our first step was to have an interview with the shop’s owner, to find out what his business strategy is, what kind of clients he caters to, and how an e-commerce website might fit into his business model. The first real challenge of our project arose from this interview, as we found out that most of his clients are Berlin locals, and that his shop’s USP (Unique Selling Proposition) is offering high-quality custom-made furniture. This meant we had to ideate a solution that implemented e-commerce while also respecting the business’s USP. Another valuable insight from the interview is the most of his customers come to his website through Instagram and Pinterest posts.
Another objective of the interview was to learn what kind of furniture the shop specializes in, the average price point, and the kind of customer they serve. The purpose of these questions was to identify Divano’s position in the furniture shop market.
Wireframing and usability testing
Once we understood the brand and business model we were working with, we proceeded to create a site map and a user flow, to help us in ideating a solution we could test out.
Choosing the user flow we were going to work with was one of the most difficult decisions of the entire project, as we had to decide how to implement e-commerce without taking the focus out of the business’s USP, which is customization. Several ideas came up to address this: should we have an in-website “studio”, where the user can alter detailed features of their item? Should we offer a selection of basic elements, such as color and size?
In order to make this decision, we quickly made low fidelity prototypes to conduct usability testing. The winning idea was to offer 2 distinct paths for the customer: choosing basic variables of the item and ordering online, or to “design their own”. This second path contains another 2 options: to upload their design, if they already have one, or to book a consultation for a custom-made piece of furniture, based on the designs showcased in the website.
Once we had the site map and user flow, we refined and iterated our low-fi prototypes, doing usability testing throughout the process. A major challenge that required a lot of iteration was deciding the position of each button in the product page, as we discovered during the testing that users were confused as to which options they had, and the option to design their own piece of furniture was not prominent enough. Our final mid-fi prototype addressed these problems by placing the “design your own” button very close to the purchase option, and placing an explanatory text.
The mid-fi prototype showcases the user flow: first, the user lands on a product page from a Pinterest post, then clicks on “design your own”, then chooses to book an appointment to discuss their design, chooses a date and a time, introduces their contact details, and then is taken to a confirmation page.
You can take a look at the final prototype by clicking here.
An important thing I learned from this project is how the whole design process needs to conform to the business needs. In this case, we chose to prioritize prototyping a feature that is essential to the business’s USP, which is a more original feature, and a challenge to ideate. In this case, the normal e-commerce checkout would be a further step in the design, while the appointment booking system took priority.