UX/UI case study: Redesigning a showcase website into an e-shop

How to rethink an existing website to optimize it

Idée lumineuse is a shop of upcycled lights created 10 years ago by an enthusiast for peculiar objects found in fleamarkets.

After 30 years in the insurance world, this creative man at heart decided to bring wonder and joy to the world by giving life and a new utility to the forgotten objects he collects and transforms into lights.

In 2018 he created a showcase website to present his shop and creations but since then no changes had been made and the design looks outdated.
Over time the stakeholder started selling his lamps on Facebook and Instagram but it’s time-consuming. He also tried to sell on Etsy but it was an unsuccessful experience.

In 8 days our team of four UX designers: Anass, Cécile, Kyne, and myself, designed a high-fidelity prototype for mobile and desktop. We added an e-shop section to the website to consolidate the online sales and facilitate e-commerce management for the stakeholder. We created a brand new UI Design to ensure that idée lumineuse set itself apart from its competitors.

We work remotely but collaboratively on all aspects of the new design: research, information architecture, UI design, and prototyping.

Understanding the context of the company

We interviewed the creator of Idée lumineuse which is the only stakeholder of the company. The interview gave us a good understanding of the:

• scope of the project
• brand history of the company
• nature of the products
• clients profile
• competitors

At this point, we realized that the stake of the project was to showcase the expertise of idée lumineuse in the market of upcycled light, the peculiar story that led to the creation of the company, and the necessity to sell the creations on the website.

Building the structure of the website

The information architecture

We did a sitemap as is of Idée lumineuse website to have an overview of what is in place.

We then did a content audit to have a better understanding of what the user can find on the site. These two steps helped to rethink the information architecture.

The content audit showed us that the home page and the atelier page had very similar content. The wording in the menu “decoration” and “creation” are confusing.

We created a new sitemap, our goal was to emphasize the story of the store because it’s an element that set the company apart and integrate an e-shop section.

In the e-shop section, we chose to separate the on-demand order from the e-shop because the on-demand order must be discussed between the client and the stakeholder, it’s a different process than purchasing an object online.

How to design the shopping experience?

We did a user flow for the purchasing experience of table light. This allowed us to think about every step the user would have to take. The user flow made evident that since every piece is unique, the user doesn’t need to pick different options and therefore we create a straightforward buying experience.

Creating the interface

At this point, we did a low-fidelity paper wireframe each on our own to have several ideas to build upon. After sharing and discussing the possibilities it gave us a common vision of how to do the layout of the pages.

Since, the home page is the one that gives the tone we did it together to be sure of how we wanted to present the content.
We also worked on the menu and footer together. And then we distributed the rest of the page amongst us.

User tests

We did a mi-fi prototype on Figma to do user tests. We conducted 6 remote user tests: 3 on the mobile version, 3 on the desktop version to understang how the user manage to buy an item on the website.

We analyzed the data from the user tests.

We saw recurring pain points that emerged:

• In the menu: Confusion due to the wording
• The impossibility to sort by price the products on the category page.
• The impossibility to go back to the previous page when you are on the category page and the product page.

So we iterated on our mi-fi wireframes.

From an overdated look to a new visual identity

To create a brand new UI Design we started by defining the brand attributes of Idée lumineuse, it conveys the feeling of wonder, nostalgia and the love of hand-made object.

The brand attributes helped us create our mood board to know which design direction we were going to pursue.
Our constraint was to stay in the color of the brand: black, orange, and grey

So armed with our moodboard we started looking for the right tones of
color and we defined which use to give to each color of the color palette.

Hi-fidelity prototype

We started by creating the home page together, deciding which image should be the first that the users see. The one that conveys instantly what Idée lumineuse is about.
We also decided to include a photo o the artist working to humanize the online experience and create a relationship with the user.

We then divided the work between us, each working on a page.

After a design critic session with other designers, we decided to adjust the font-size that was too small and increase the spacing of some elements like the entries of the menu or the space between the page title and the rest of the content.

Reflection

I am thrilled to have participated in the redesign of the Idée lumineuse website, not only as a designer the project was a great challenge but it was a pleasure to collaborate with this particular shop.

During the redesign, I found that analyzing the existing website was a key step to know what is the departure point, what are the pain points, what brings confusion. I found it to be an interesting phase.

The next step of this project would be to test the hi-fidelity prototype to uncover lingering usability pain points, and then develop the website!