UX/UI Case study : Lunettes de ZAC

ZAC is a startup with a social and environmental impact that collects and reconditions old glasses.

My role

I was the UI/UX designer, and in charge of a complete rebranding for the launch of the e-commerce Les lunettes de Zac.

The challenge

The stakeholders gave me research highlighting that more than 100 million used glasses are left and forgotten in drawers in France. Those could be reconditioned and resold at prices more available to the public and consequently have an impact on the circular economy. It was a great project, and I was on board.

Branding

– Create a universe that users could connect to and easily recognise
– Give a fresh and modern feel to the brand
– Make the secondhand aspect of the project attractive

UI/UX Design

Brainstorming and defining the key features:
– Ecommerce
– Inform of the actions of the brand
– Show users where to find dropping boxes and opticians carrying the brand

1. The brand

The branding of Zac had to showcase their values and message in an engaging way. The idea was to build a community, across multiple platforms, that would share Zac’s vision. The branding is aim to help the target audience to quickly recognise the brand, as well as perceiving Zac as a cool way to get new glasses.

2. UX Research

Research

The project had a tight deadline. Fortunately, the team had already done a lot of research and send it to me to analyse and work with.

Personas

Using the research, I was able to create 3 personas.

Primary personas

Secondary persona

Site map

For clarity and planning, I created a sitemap to quickly have an idea of every page I would need and how I would organize them on the website. Sitemaps also help to keep goals on track and are a great way to streamline your conversion funnel as you will have a high-level view of the project.

Information architecture

Example using the homepage wireframe

The purpose of the Homepage

– Designed to suggest a flow to users according to their personas
– Intentional and easy to navigate

The banner and its flow

Wireframe: Case study of the homepage

I created the wireframes using a heuristic method and personas. It was a trial-error process, but after a lot of brainstorming with the stakeholders, I came up with a solution. Here is the final wireframe of the homepage.

Composition of the homepage :

1. Simple header: The logo, a shopping cart icon, and the most important pages: Shop, Contact, and concept. The goal was to make it intentional and easy to navigate. It also shouldn’t distract the user from the content of the different pages, mainly the homepage which is designed to directly suggest a flow to users according to their personas.

2. I wanted the homepage to be adapted to all type of users: The client searching for glasses (Ethical Esther and Student Stephen), the new user that don’t know anything about the brand (Ethical Esther, Student Stephen and Optician Olivier), and the optician who wants to join the adventure (Optician Olivier).
Consequently, arriving on the homepage, the first thing you would see would be 3 options: Contact, concept and Shop in little squares under the header.
The new user could learn more about the brand by clicking on the concept option, but could also be directed to the shop easily. The client searching for glasses could directly access the shop. The optician could quickly find ways to contact ZAC or learn more about the concept.

3. The « new items » section was implemented as to quickly show recurring users the new glasses. Also, it is a great sample of the products and a quick way to be attracted to an item and be directed to the shop.

4. The next part was created as a quick way to be directed to the kind of glasses you are searching for: women or men, directing you, again, to the shop.

5. This part is a short presentation of the brand, which explains in a few lines what Zac is all about intending to make users want to know more.

6. With that part, you could easily be directed to the map and find an optician carrying Zac’s glasses. It is also a quick reassurance to the user who prefers to try glasses on before buying a pair.

7. Next is an Instagram token, to show customers wearing glasses, as well as showing more of the brand universe and its young and cool feel. It is also a way to join the community and have updates on the brand.

8. For the footer, I placed all the elements that I defined as really important. As ZAC is focused on creating a community, you can also join the newsletter or find social media links.

Next to that, I implemented a menu with all the information about e-commerce, such as terms and conditions or other useful information.
I finished this menu with a link to the FAQ and the contact page. The FAQ is there to reassure the user. The team had already done research to find the important question that needed to be featured.

Style guide

The goal of the website was to create a fun atmosphere for ZAC while giving it a trusting and professional feel.
It aimed to make it accessible and attractive to buy glasses cheaper while emphasizing that you were helping a good cause.
I created a branding with calming colours and fluid, modern visual elements. I wanted it to have a strong identity, to create recognition for the brand whilst remaining appealing to a younger demographic. That is all of these ideas that made me create a fresh look for ZAC.

I wanted the logo to be simple, and the team and I finally decided on a clean and modern look. I also knew that I wanted the logo to include glasses.

3. Website

Ecommerce 

​​​​​​​I focused on the pain points of our personas to create the e-commerce experience of this website.
I made the checkout easy with only 2 steps/pages. I made sure the product pages had a lot of information.
I also took a lot of time to create a page for the sizing guide, which I qualified as an important page involved in the decision-making. Buying glasses online can be challenging as it is something you want to try, to be sure that it is adapted to your face and at the right size. With the information we kept on the page, it was really easy to pick a pair and be sure that it would fit you. Making this page visually pleasing and easy to read would help the user be less afraid to order online. For this reason, I focused on the aesthetic of this page and separated big chunks of texts with images and visual elements.

Highlighting the positive impact of the brand 

The concept page was as challenging as the sizing guide page. It was important to make big chunks of information digestible and fun to read. After dividing the information into paragraphs, I separated them with a fun fact in a quote, as well as adding the 3 values of ZAC that I illustrated with icons. I then used some visual elements to decorate the remaining texts, following the brand guideline.

Where to find Zac?

Interactive map to help users pick the closest optician or glasses box 

You will then be presented with a page with a map and a list. By typing your location, it will show you the closest opticians or boxes near you.

Finished product 

Conclusion

Designing this website was challenging and rewarding at the same time. Challenging because I had a tight deadline and a lot to do. But rewarding as the project was really exciting. I had no idea of the number of abandoned glasses, although it makes sense and I am certainly guilty of leaving my old one in a drawer. I loved the fact that this company did everything they could to have a positive impact on the world and I loved seeing the results of the design process.

Thank you for reading this case

More projects