Case Study : building an personalised e-boutique for a handcrafted shop
2nd Project for our Ironhack bootcamp, we must deliver our first functional prototype… here we go. I worked with Emilie, Nadia and LC for this project.
THE SHOP
“I want a more professional website than Esty, while giving a glimpse of my universe”
We decide to work for Ulysse Sauvage, a Glassblower Modern Craftsman based in Montmartre, Paris.
She already has an etsy page who brings her regularly new customers, and an instagram page where she can share her universe new creations and talk with some customers, but she also expressed some frustration : she want to look more professional in the artisanat commerce community.
SITEMAP
We had to think about the information we wanted to appear on our website. What’s important to the user ? What Margaut, the shop-owner, wants to highlights and to emphasize ?
We were focused on the homepage, because we want to give to the user the information needed about ulysse sauvage, and guide him step by step toward the product page during his first visit.
And, if he wants more information, he will be able to go to the other pages.
HEURISTICS
We did heuristics evaluation of a competitor with roughly the same profil , it revealed a lot of flaws in the website. Here is a few of them :
- Visibility of system status :
When we scroll down, there is no indication to see if we reach the end of the screen.
2. Match between system and real world
Statut bar at the top but no icon.
3. User control and freeedom
There is no button to escape from the picture flow on the main screen, you can’t come back directly at the top.
4. Consistency and standards
On the project screen you have to click on a picture to see more, it’s not intuitive.
MID-FI USERS REMOTE TESTING
With our first low-fi prototype, we were able to test with some users. We realized we were focusing too much on the artistic side and not enough on the shop. People were coming here primarily to shop so we had to acknowledge that and finds the right balance between a shop and a portfolio.
The testing session allowed us to realise we did not respect some of the principe of the usability heuristique :
- We tried to make a really beautiful landing screen, but we forgot to put signfiers that indicates the users could scroll down. A lot of them were stuck at the beginning…
- Our wording for different section was not enough “shop oriented”, the testers was confused about the term for the shopping section.
- There was no back button, the user had to go back on homepage and interrupt his shopping flow.
- On the Shop page : We also forgot to put a search bar, the user wanted to look directly for an object when they came directly from instagram.
FROM MID-FI TO HI-FI : MOODBOARD
Contemplative, Wistful, Handcrafted
Our app must reflect the mindset of our shop-owner. We came up a moodboard to capture Ulysse’s universe.
When we think about her brands, what comes to mind is : transparency, reflect, softness, delicate. We should feel dreamy and a little bit contemplative.Ulysse’s owner also real love pastel colors.
ACKNOWLEDGE AND ITERATE
From here we were able to correct some of the ideas and delivered a better version of the site.
Here is a little video to see it moves in real time !
Key Learnings :
📱 Users tests, users test and users test. As good as you are as a designer, a developer, or a UX designer, you will never succeed in trying to think of all the intercations the users will have with your product. We were pretty confident with our first prototype and it revealed pretty much a disaster as people just couldn’t get passed the first screen.
👨🎓 We learned the hard way that rehearsal was essential for presentation. I let the last slide way too long for the team, and it was not our best slide… long story short, somebody was mad 😄.
🌍 We did everything remotely for the test and it went smoothly, it really widen the opportunity of tests from users all over the world
