Project 3 : Creating a responsive e-commerce website for YAS LAB
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.
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.
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.
When then moved on to creating our style tile. A style tile is a design deliverable that helps designers demonstrate all visual elements that would be used in their high-fidelity prototype. It helped us describe and frame the visual language of the website we were designing. It also is a great way to see if the chosen elements, colors, typo and icons work well together.
Our mid-fi for mobile and desktop were finished, so we were able to start with the hi-fi version of our prototype. After having designed the hi-fi version of it taking into account our color palet and the vibe we wanted to give the website, we had a session of Design Critique.
Design Critique is when you show your design to people external to your project to get some interesting feedbacks and eventually change specific aspects if needed.This helped us adjust certain elements before delivering the final product.
Deliverables
Hi-fi prototype for the mobile version
Here a short video of how designed our e-commerce solution for the website on mobile. We are very pleased with result and really think it reflects the spirit of YAS LAB.
Responsive design between mobile and desktop
Compared to a couple of years ago, the amount of screens through which we read and scroll for information has significantly increased. When in the 90’s we had only one TV screen for the whole family and you were fighting with your siblings of the remote control, today everyone can watch whatever he wants from his Iphone, tablet, desktop and TV.
Adapting web design to this technological progress and creating websites than run smoothly across all type of devices has therefore become crucial. That is exactly what this project was all about. Look here what we’ve come up with !
Desirability Test
We tested our design with 25 users and the 5-second screen show test.
We got conclusive results as the most common adjectives to describe the feel of the website were the follow :
What’s next and what I’ve learned during the process
The next steps ?
The next steps for this project, would be to show our design to the owner and founder of YAS LAB, to get her feedback on what we have worked on. Stakeholders’ feedbacks should be multiplied during such a project, just so you can double-check if you as a designer are still on the same page with the client you are working for.
Then, maybe add other features or elements to the website, such as a 3-D feature so the customers can see how a specific article looks in their own home. This would reduce misunderstandings when it comes to the sizes of the products YAS LAB sells, which according to the owner has happened more than once.
Lessons learned during the process
This project was a challenging one and it was really hard to keep up with schedule. However, I’ve learnt new techniques such as desirability testing which really comes in handy if you want to get a quick feedback on what your design may project to future users.
For this projects we were a group of 4 people, where each of us had different skills. In the beginning I felt that we needed some time to adjust to each other — which is completely normal — until we knew how to create a dynamic between us. In the end, we worked pretty well together and it was really fun !
Thank you for reading until here, as usual, comment if you like it or not (hehe), write to you soon !
K.B.
