Re-designing an E-Commerce responsive website — Ironhack
Electronic commerces (or e-commerces) are digital storefronts for people to make transactions on the internet. Nowadays, we are one click away of any type of service or product and it’s all thanks to this digital businesses.
For our second project, we were tasked to pick a local business and re-design their image and website and not only that, but we were required to make it responsive for different viewports.
From the logo and colours to the information architecture, we picked a small interior design company named Espacio Mostaza to work with. This company operates in a 100% online manner and they have been up and running since 2021.
Secondary research
In 2020, the worldwide interior design market was worth $150.7 billion. Interior design is defined as the art of refining and enhancing the interior of a building and, according to Foyr, nine out of ten individuals in interior design careers are women, so it’s a strongly female dominated field.
The stakeholder
We scheduled a meeting with María, founder and owner of Espacio Mostaza, so she could paint a picture for us on what was most important for her and what challenges she may be facing with her current business model.
María told us that she had been working in several interior design studios before and that she had been noticing how this was an exclusive service that not everyone could afford. She let us know that her main motivation was to make this service accessible for anyone by offering affordable online solutions.
She also mentioned a couple things like the fact that her customers were typically women who owned their own houses, and that sometimes she felt as if the process of collecting the brief from her clients could be improved by implementing an online form on the website.
“… The extra time I have to spend on each call is less time that I have for my projects. More time for me means advancing more on my projects.”
Empathizing with customers
After collecting the stakeholder’s insight it was time to look at the other side of the coin, the clients. We interviewed 5 women who could be potential clients and were within the age range of the target audience (from 25 to 40 years old). We asked them questions such as if they had ever considered hiring this kind of services, how important it was for them and what would they expect from it.
With this insight, we formed our Affinity Diagram:
Some of the patterns we observed were comments related to the concern of it being an expensive service* and the need to know how exactly the process works. All these women expressed that interior design was important for them and they put great value in the fact that having a visually comforting place to come back to after a long day is a pleasure. However, they also expressed that before hiring any service, they would need to fully understand how the process works.
* We realise that we don’t have a saying on prices, but we can signalise what the service includes, how it works and show how affordable it is considering the value/offer.
Empathy map:
Closely related to our affinity diagram is our empathy map. This is the method of gathering all the insights and dissecting them for more understanding about the people’s way of thinking, their pains, gains, goals, etc:
We condensed all this information in the image below:
Problem statement & User persona
Collecting all this data helped us define a problem statement and create a user persona:
We created “Lavish Laura” to help us understand the type of users that come in contact with the company, their goals and motivations and also pain points. After this step, we created a case scenario to demostrate the kind of challenges real users may encounter in the average user journey:
Ideating solutions
So, we want to provide a reliable solution for people like Laura. For our MVP we decided that, at the very least, people should be able to clearly understand how the hiring process works and how much it costs. It’s really important for us to let people know that it is an affordable and reliable service, so we added different features that MUST be present and left some others for future iterations.
We used the Moscow method to choose the absolutely important features:
and then, brainstormed with a Crazy 8’s session:
Site map & User flow
We created a very simple and intuitive site map for our website, with the user’s behaviour in mind (like seeing the portfolio and contacting the provider before making any purchase).
Competitive analysis
We analysed three competitors, both visually and technically to figure out a way of standing out among similar providers, on the broad aspect we gathered that:
- All of them have a strong social media presence.
- They carefully showcase their portfolios on their websites
- None of them present themselves from an “affordable” angle
- All of them have strong visible branding that represents their values
- Some of them had a way of automating the process of brieffing (something our stakeholder misses in her own page)
Visual competitive analysis
We were able to find opportunities on how to stand out from the competitors by studying how they brand themselves. We observed a trend in using minimal and modern graphic elements such as fine lines for the logos and icons, slim and stylish typefaces and also neutral and elegant color palettes. This allowed us to work on our own brand attributes and moodboard:
Our main goal was to showcase our brand as a luxurious, yet attainable and approachable service. So, with no further adue, Let me introduce you, to our new brand:
We chose to have an elegant jewel green in contrast with the softness of a pale pink and white for our primary colors and a mustard yellow in combination to accentuate certain elements and also give warmth to our brand (since we want to appear friendly to our audience), we also decided to use warm greys as our neutral colors to keep the harmony in the palette.
We also chose Merchant as our primary typeface because of it’s elegant fine lines and the diversity within the font family, we needed a font that worked both in Spanish and English. This one is used both for the logo and important titles. On the other hand, we have Raleway as our secondary font, used for paragraphs and links, a perfect match due to it’s simplicity which makes it easy to read.
Prototype
We started with our Low and Mid fidelity prototypes (which look almost the same), since our results after performing usability testing showed us that people were already finding the interface pretty self-explanatory and easy to use. However, there were some changes in the wording and some page elements. For example, we found out that our Contact page (which had a fill in form) was obsolete, since all test users expressed that they always prefer to contact the provider by themselves.
High fidelity prototype & responsive versions
Not only we prepared a complete desktop version of the website, but we were also tasked to do an iPad and mobile version. The importance of making your website responsive lies on the fact that we must always provide the same experience for people despite the viewports. We learned about information hierarchy in different devices and how to showcase information in a way that nothing gets lost when the screen size changes.
Desirability testing
We performed the 5 second testing on different people and asked them to tell us 3 attributes that they thought when looking at the homepage, the results were satisfactory for us since they correlated to our previously established brand attributes. Testers expressed that the interface looked clean and high-end, among other adjectives.
Conclusions
Once again, user testing proved to be a humbling step in the process. What you think will be valuable for people may not be the best solution, one must keep users always first in mind. We also learned to balance the stakeholder vs client’s needs to reach a common ground that will satisfy both parties and the importance of responsiveness when it comes to the overall experience.
Last but not least, I want to thank my teammates Davidbuckley Online and Andrés for making this project possible, our stakeholder Espacio Mostaza for letting us practice our UX/UI skills with her brand and everyone who gave us a couple of minutes of their days to interview or test.
