UX Case study — Designing a responsive e-commerce website for an inclusive fashion brand 🌱

Image for post
Image for post
Presentation template from Slidesgo and photo by Atelier Brunette on Unsplash

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.

Image for post
Image for post
Sitemap — Target version / Presentation template from Slidesgo

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.

Image for post
Image for post
Mid-fi wireframes for mobile

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.

Image for post
Image for post
Image for post
Image for post
Cart page in mobile and desktop versions

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.

Image for post
Image for post
Hysa’s Moodboard — Composed of images from Pinterest and Unsplash

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.

Image for post
Image for post
Hysa’s style tile

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 !

Image for post
Image for post
Presentation template from Slidesgo

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 :

Image for post
Image for post
Homepage — contains images from Unsplash
Image for post
Image for post
Index page (“Capsule” collection)
Image for post
Image for post
Cart page

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 🤩

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store