Context
The proposal is to design a e-commerce mobile website for Arnette’s eyewear products that appeals to its current target group: the Gen Z.
Process highlights
Role: Research, Interview, Testing, Prototyping for Product Page and Customization Page.
Background
I participated in a UX Bootcamp organized by Talent Garden Innovation School based in Vienna. During the camp we got the opportunity to provide a concept proposal to Arnette, an eyewear brand that speaks to the young consumers, especially the Gen Zs. The project consisted of 3 people including me and we were given 4 and half weeks to create an e-commerce website for Arnette.
About the company:
Arnette is a daughter company of Luxottica, which leads a lot of international fashion brands like Ray-Ban, Vogue Eyewear as well as licensed brands like Giorgio Armany, Ralph Lauren and Prada. Founded in 1992, Arnette has been an eyewearbrand that „talks“ to the young consumers, „aiming to be the voice of the youth culture.“
So what's the Problem?
Gathering Insights
The current Arnette website only contains of products, which looks like a mere product catalogue with little product info and not even any information about the company. They have been selling their products through retailers, their website doesn't any possibility to purchase directly from there. Our task was to propose a concept for their website which not only serves as a shop but also can represent the company and a website that is usable and attractive to their target group as well as for their existing customers.
Process:
Define, Discover, Empathize
Research Methods:
Desk Research: Market and Competition Analysis
Initially we researched in the internet about the market, their competitors as well as their target group. We conducted interviews with Gen Zs to get to know them deeper: their online shopping habits, their opinion about sustainability as well as about companies supporting sustainability through their products.
User Interviews: Remote (Via Zoom) and Physical (4 Interviewees)
Our interviews were conducted both physically and remotely via Zoom. Beforehand we have prepared questions about the topics mentioned above and also let them tryout some websites to understand their technical behavior on this websites.
As a result we created user personas, a customer journey map to have a full understanding of the process, knowing their needs and finding their pain points.
After getting to know the Gen Zs, we analysed the competition that Arnette has in this field and we looked into different solutions of different companies. During this research we stumbled upon a trend called the adorkable brands, which then later became one of the inspirations for this project.
An adorkable brand tries to attract this generation with „jarring visual aesthetic and an authentic emotional appeal“ (more about that in this article from Bloomberg Opinion - https://www.bloomberg.com/opinion/articles/2021-01-24/the-gen-z-brand-aesthetic-is-both-disruptive-and-adorkable)
We looked for best practices especially from the websites of eyewear brands that most Gen Zs find appealing like Ray-ban, Akila and Lexxola.
It is also important to mention that we tried to empathize the company through business model canvas and Value Proposition Canvas:
In the end of this process we created a scenario focused on one of the personas, Aiden to start with ideating a solution for this problem.
Site Map
Ideate:
At first we wanted to create a desktop e-commerce website for Arnette but then we changed our minds halfway and decided to create the mobile version of the website, since most of the Gen Zs use their mobile phones more often than their laptops/PCs.
After creating the scenario, we figure out the important functions needed for the website, so we then defined our MVP
-
landing page
-
product main page
-
checkout,
by creating a site map and added the features that Arnette wanted to have on this website, to experience a different and exciting process aside from just buying a pair of sunglasses:
-
a Virtual Try-On
-
Customization Page
-
a fast check-out from social media platforms like instagram.
User Flow
Eventhough a fast check-out was later preferred because Gen-Zs tend to know what they want and is assumed to have researched about the product already, we still made user flows for three different types of users:
The Explorer
The Inventive
The Decisive
Prototype:
After creating the strategy, we started with the Paper prototype. As mention we wanted to create a desktop version first, after learning that some Gen Zs prefer using their laptop when shopping online. Eventually we changed route and went for mobile version, because of the fact that Gen Zs in gerneral using their phones more often.
Afterwards we created our lo-fi and hi-fi wireframes for 3-4 days.
What I only show you here is the part were I was assigned with, which is the Product Page and the Customization Page.
Product Main Page
Product Preview Page
Customization Page
I was very inspired by other UX Designers on Behance but mostly for this project I was mainly influenced by Zalando’s approach on showcasing their products.
We took the brand style guide provided by Arnette and integrated it into our design system. We checked out Arnette’s instagram account and we took their pictures from there as well as from the retail brands they are partnered with.
Test and Iterate:
After getting feedback from the client, we conducted a usability testing on our prototype with our colleagues in the bootcamp first. After improving the prototype we then tested it later with 3 people from the target group as well as others who were not Gen Zs to get more insights and feedback.
Impact:
"The structure of the product page was clear and direct."
"I like that I can try it on virtually, not worrying how it would look on me in real life and also see how it looks like on other people through lookbook and social media section with pictures of them wearing the product."
"You've shown a big progress in terms of design in a very short period of time. Just be careful with the graphics and motion. - on the customization page."
Takeaways:
Technical:
In the end, I realized that maybe adding accessories could be a plus for this customization page. Overall, a learning process about being creative and at the same time how to make things familiar and usable for the user. I learned the complexity and the flexibility of Figma, which made the whole process even more interesting.
Personal:
This was the very first group project that I had and I enjoyed it a lot. Our group had fun empathizing with this generation, since our age was not so far from the Gen Zs. I learned in this process how to voice out my ideas as well as to try out ideas from others. As a beginner, I saw how my work ethic and mindset looks like in this industry and I know now that I still have so much to learn. I missed a bit more detailed feedback in general, but I am glad that in the end that the client saw our progress from the wireframes to the final design of our product. UX Strategy is a part that I wish we tackled as well to have a better structure of how to approach the problem. During this project the main lesson for me here aside from the importance of teamwork and humility is open-mindedness to new and different solutions. This experience has given me the significance of the client's feedback and their own study on the problem as well.
