Project 3 : Creating a responsive e-commerce website for YAS LAB
By: Kia Bürckert
Tags: Ironhack, Ecommerce, Uxui Design, Project

Another week, another project, and another article on Medium. My fourth week at Ironhack has just ended with yet again a new finished project. It’s crazy how the time just flies when you are immersed in different project. Ready for another case-study ? Let’s go !

Overview

The brief

Because of the hard time COVID-19 is currently giving to small shop owners, this time our job was to find a small company and offer to (re)create a responsive e-commerce or a click-and-collect website for them adapted mobile and desktop screens.

For this new project we had 7 days to come up with a design solution by working in a team of 4 individuals.

The company

We had the opportunity to work for YAS LAB, a Lebanese based company, specialized in the design and manufacturing of marble furniture. Thanks to a stakeholder interview we got to get to know her and her needs better.

YAS LAB is a company that was founded 2 years ago by Yasmina Bouchedid who has a background in industrial and interior design. She fell in love with the marble stone and since then she has always tried to design beautiful furniture and décor items to highlight its raw and natural beauty. The founder describes her brand as “minimalistic, complex and tailor-made”.

The company collaborates with marble manufacturers to create her unique pieces while Yasmina imagines and designs them. Especially for customized projects, it is to her crucial to create objects that are unique and that characterize her as a person all while offering a qualitative product at an affordable price.

On top of that, an open and warm one-to-one relationship with her clients is necessary, as it allows them to communicate clearly what they want all while understanding how far the designer is willing to go.



Today, YAS LAB’s only sales platform is her Instagram page. We therefore thought this would be the perfect opportunity to increase her visibility by creating a mobile and desktop e-commerce platform.

Competitor Analysis

Before event thinking and brainstorming ideas as to what we want to create and design for this project, it was important for us to have a look at the direct competitors of the company in order to situate ourselves on the Lebanese market. This helped us understand the positioning of the YAS LAB brand. We based our research and compared the company to other designer companies such as The Piecemakers and Studio Caramel.

The table really highlights that YAS LAB distinguishes itself from its competitors in the way it manufactures its products.

Because there was no pre-existing content for us to work with, we wanted to get inspired by other already existing interface designs and website architectures. Finding inspiration is always helpful, especially when starting from scratch.

Inspiration images, elements that interested us are highlighted in red.

Designing the e-commerce website

Site Map

A site map, is basically an idea of the future website architecture. It gives us an overview of what type of content we want to design. We wanted to keep it relatively simple by not adding too many categories to create a structure adapted to size and the number of products and services offered by YAS LAB.

Low-fi and mid-fi designs

We brainstormed our first low-fi wireframes ideas to see how each member of the group imagined how things would be. The perks of being in a group is that we were able to vote all together which design ideas to take on or not. These basic and hand-drawn ideas were then designed on Figma to become a first version of the mid-fi prototype.

A screenshot of our lo-fi website

It is important to note that we did start with the design of the mobile first.

What is mobile first ?

Mobile first design is a design strategy that says when you create a website or app, you should start sketching and prototyping the smallest screen first and work your way up to larger screens. Essentially, it’s about delivering the right user experience to the right device. (JustinMind, 2018)

This explains why our low-fi and mid-fi prototypes have elements positionned in a way that is adapted to a smaller mobile screen than a desktop screen.

Additionally, we conducted usability testing on mobile and desktop version of our mid-fi prototype and took into account their feedbacks before starting to get some colour and bring out the real vibes out of our design.

Visual Design

Moodboard and Style Tile

After reiterating the mid-fi prototypes taking into consideration the feedbacks, it was time define the foundation and establish the theme of our project. Thanks to previous research concerning the brand YAS LAB we first defined our brand attributes into 4 keywords :

Minimalistic

Trustworthy

Captivating

Design enthusiast

We then created a moodboard to find visual elements that convey these attributes, by gathering inspiration and creating a collage of them on a digital board. Different images that represent textures such as the marble, design aesthetics, typography were set together to create the mood and feel we wanted to give our website.