UX Case study — Designing a responsive e-commerce website for an inclusive fashion brand 🌱
For a previous challenge, I was glad to work for Hélène, the owner of Hysa Paris. The project consisted in redesigning her e-commerce website, taking account of the new features and targeted positioning of the brand.
For this project I was lucky to work in team with 3 super UX/UI designers Amanda Orbe, Clémence Gueidan and Lina_. The project had 1 week time-box, and the deliverable was a prototype designed in high-fidelity in responsive.
Hysa Paris
Hysa Paris already has an e-commerce website hysaparis.com and is present on Instagram and Facebook. For the moment, the brand sells only handbags for women with an accessible pricing.
When we met Hélène, she explained us that she aims to make the brand evolve with a whole new concept :
- Be inclusive : clothes dedicated for plus-size-women as there are a lack of offers in their size
- Reduce waste : pieces will be produced from scrap fabrics, released by small collections, functioning on a crowdfunding system (clothes will be made only if minimal quantity of preorder is reached, to avoid overproduction).
- Reduce transport distance : All scrap fabrics will be bought from France, and Hysa pieces will be produced in France, to reduce long distance delivery
Inspirations
To begin, we began by searching information from everything in link with Hélène’s project.
- Plus-size-fashion : Asos Curves, Lane Bryant, Marina Rinaldi …
- Crowdfunding : Kickstarter, KissKissBankBank, Ulule, …
- Preorder specialists : Asphalte, Réuni, Aatise …
- Animal-leather-free materials : Ashoka, Bihotz, Corail …
And of course, we audited the existing website of Hysa Paris, and wrote down elements to keep and those to improve (multiple and different navigation menus, different names for the same page …).
A new sitemap
Based on the insights we got from researches, the team and I shared our ideas and designed the future sitemap of our prototype.
With this sitemap, we wanted to make a focus on the ongoing crowdfunding “capsule” collection, but also give an access to the previous collections which had success. We also decided to create several editorial pages dedicated to explain the brand’s values and the eco-friendly concept and also the functioning of the crowdfunding system, as it would be different from a standard e-commerce user flow (the user pre-orders, and the order is validated only if the minimum quantity has been reached).
Mid-fidelity prototype
As we were 4 designers to work together on the prototype, first we very quickly draw the low-fidelity wireframes to agree on the structures of the pages that we were planning to design. Then we divided the prototype in 4 parts (each one of us were responsible of 2 screens).
Once each screens were finished, we put them together in Figma but we noticed that few consistency was a little bit missing between screens (oopsy 🙈).
So, we took few moments to unify elements in all pages : for example Amanda were responsible of grids and spacing, Clémence of text contents, Lina of prototype interactions and I was responsible of unifying components and styles.
Mobile first !
The brief of the project was to design the website in responsive, so we needed to design one version of prototype for mobile screen size and another for desktop screen size.
We began by conceiving screens for mobile first, then we adapted the same structure for wider screen.
We kept the maximum of same displaying orders between the 2 devices for keep the consistency and also to facilitate the coding phase.
Time to check
With our mid-fi prototypes, we asked to 6 potential users to realize some actions identified in our user flow. As we had two versions of prototype (mobile and desktop), we asked to 3 users to test the mobile one and 3 others to test the desktop version.
As always, the usability testing phase was really interesting, as it’s the opportunity to check that our concept is well understood by real users and improve details to make the final version as relevant as possible.
Globally our testers really appreciated the crowdfunding and eco-friendly concept. Especially our target, who are plus-sized-women, agreed on the fact that there were a big lack of clothing offers for them, and it was very welcome to have an ethic brand dedicated for them.
We also got very precious feedbacks on the user interface :
- The values and the concept were not understandable enough at the beginning, they need to be more emphasized from the homepage.
- Available sizes should be highlighted even from the homepage : for plus-size-women, unavailable sizes are the principal issue when they shop. So communicating what sizes are sold on a website would be a very appreciable attention.
- Explain the crowdfunding and preorder concept before the cart page. In the mid-fidelity prototype, this explanation text was displayed only in the purchasing tunnel, which was quite late in the user flow.
- Highlight more “sharing” feature, as it’s important to reach the minimum order quantity as to the production could be launched.
Thanks to these feedbacks from the mid-fi prototypes, we were able to integrate them in the final version and make sure that our interface would match with the user’s needs.
What about the brand image ?
Based on the 3 brand values which are kindness, transparency and elegance, and the initial brand color which was a dark violet, we constituted our moodboard.
The colors we picked from the moodboard are Russian violet, Old lace and Mint cream. We also selected 2 fonts to represent femininity and roundness : El Messiri Bold and Lato Regular.
Based on these first elements, we created in Figma our icons and components : all very rounded to be in match with the design.
Then when we got our first 2 hi-fidelity screens we ran a quick desirability testing with about 20 testers, to verify that our style was matching correctly with the target brand image. We showed our screen for 5 seconds and asked them to pick 5 adjectives among 42 propositions. The result was very satisfying, as the top results were Feminine, Smooth and Honest. We had our green light🚦to deploy our design on the rest of the screens !
And here is the final result !
The final prototype on mobile version has been recorded in this video :
And hereunder some hi-fidelity screens adapted for mobile and desktop width :
To finish, I would say that I was really glad to have this nice opportunity to work for a such inclusive and eco-friendly brand. I hope this kind of initiatives will be more and more numerous to make our society even better ❤️
Thank you again for reading, hope you enjoyed it and do not hesitate to comment 🤩
