Miel&Mostaza —
Re-designing an
E-Commerce
responsive website
UX RESEARCH ✦ UI DESIGN ✦ BRANDING ✦ STUDENT GROUP PROJECT
🕑 DURATION: 9 DAYS
PROJECT OVERVIEW
(TL;DR)
❌ PROBLEM ❌
Stakeholder:
They needed a way to automatize the data collection from customers (previously done via call + Word document).
Customers:
They needed to know how exactly the service works + know that the money they'll be spending will be worth it. Customers won't spend money without feeling safe and informed.
🧩 SOLUTION 🧩
Stakeholder:
We included a form page before check-out for data recollection (measures, preferred style, materials, etc.). We also adjusted the information architecture according to user behavior in order to increase conversion rates.
Customers:
We specified the steps of the process in the homepage, put a focus on showcasing high-res pictures of previous works, elevating the look and feel of the brand and redesigned the about me page for brand credibility.
🚷 BLOCKERS 🚷
We gathered that people are often hesitant to hire interior designers because they believe the service will be expensive by default and have problems trusting a designer with their house and money. They NEED reasurance.
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.
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.
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.
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.
THE STAKEHOLDER
We interviewed 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.”
EMPATHISING:
AFFINITY DIAGRAM
After collecting the stakeholder’s insight it was time to look at the other side of the coin, the clients.
Interview criteria:
-
👥 5 women
-
✅ Ages 25-40
-
🏠 Home owners
Some of the patterns we observed were comments related to the concern of it being an expensive service* and the need to know exactly how the process works. All these women expressed that interior design was important for them as they relate it to a higher quality of life.
* 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.
Highlights
-
"I would hire this kind of service if I had the money"
2. Interviewee would like to have a better understanding of the process.
3. Interviewee would like to take a look at the portfolio and testimonials from previous clients
4. "I would like to see images of the actual results of other projects"
5. Potential customers need to perceive credibility before spending money.
PROBLEM STATEMENT
Collecting all this data helped us define a problem statement and create a user persona:
URBANITE WOMEN NEED TO FIND A WAY TO UNDERSTAND HOW THE INTERIOR DESIGN SERVICE WORKS BECAUSE THE STEP-BY-STEP IS NOT CLEAR.
How might we make the information about the
process accessible and easy to understand for
urbanite women?
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:
IDEATION
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:
Crazy 8's
MoSCow Method & MVP
SITE MAP &
USER FLOW
We created a very simple and intuitive site map for our website, with the user’s behaviour in mind (for example, seeing the portfolio and contacting the provider before making any purchase).
The user flow consists in the potential client browsing through the previous projects, where they'll see the portfolio. Then going to the about page, to learn more about the designer and their credibility and finally the service page where they can see the prices
COMPETITOR 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 the following information:
Insights:
1. All of them have a strong social media presence.
2. They carefully showcase their portfolios on their websites.
3. None of them present themselves from an “affordable” angle.
4. All of them have strong visible branding that represents their values.
5. 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 compete and 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. We were able to create our new brand based on our findings:
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 wanted to appear friendly to our audience), we also decided to use warm greys as our neutral colors to keep the harmony in the palette.
Merchant was chosen 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.
PROTOTYPES
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 perceived as obsolete, since all test users expressed that they always prefer to contact the provider from their own email accounts.
HIGH FIDELITY
PROTOTYPE
You can see the final flow in the following video and responsive versions of the homepage below:
DESIRABILITY
TESTING
We performed the 5 second testing on different people and asked them to tell us 3 attributes that they thought about 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, and that it was easy to understand.
LEARNINGS
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.
