Want to work together?
If you like what you see and want to work together, get in touch!
susirepo@gmail.com
Lien is a consumer electronic device and accessories with AI integrated e-commerce responsive website.
I worked alongside a mentor who worked as a manager, and other students from the Bootcamp as indirect team members who gave me feedback throughout the process every week.
Researcher
UX strategy
UX design
UI design
E-commerce responsive webstie
1 months
Figma
Figjam
Design an e-commerce website for consumer electronics that is easy to understand, has the flexibility of options to enhance communication minding diversity, and feels bold and modern, thus, targeting a younger audience.
Design a brand that stands out from the other well-established and worldwide recognized brands. Find a gap in the market to position the product and the brand.
Communication-wise, consumer electronic devices can be confusing and contain a lot of technicalities and features to describe that make them hard to read. Design a bold, young, trendy website without distracting users from important information and shadowing the products.
Design a website that represents the ideals of a younger user, effectively communicating the different products, and finding new channels to reach them.
I designed a website that uses the power of AI to allow users to navigate through the website just like they would on their devices using the smart assistant. A product that is flexible and customizable to cover a wider range of audiences’ preferences. And finally, design is based on the fresher and most relevant trends.
I began by running a competitor analysis to understand the similarities and differences between the eight most prominent competitors in the market of consumer electronics. Then created a map to lay down the gaps I found and started building a mental map of the product. To complete the mental map I ran a few interviews with users of the different brands analyzed previously. This allowed me to notice different profiles of personas. With the persona in mind, I then researched market trends adding the most relevant to the chosen persona to the mental map.
After interviewing several consumer electronic users I noticed a couple of potential personas. Among the young interviewees, I noticed the importance they give to aesthetics, function, and innovation. Therefore I directed the design towards bold visuals, innovative features, and a high focus on product features.
After understanding the target user I went ahead and researched the market trends creating a parallel between the most noticeable for the young Millennial and Gen Z groups.
Bold, colorful, and with a lot of inspiration from the Metaverse and web3. As younger users are so immersed in new tech universes, I wanted to convey those aesthetics into this web 2 e-commerce site.
This website will bring nostalgia from vintage vibes and modernism with bold and innovative features.
Rounded corners, bright colors, and bold fonts. Blobs of colors, colorful imagery, and motion design. This website will create a candy-like pop that will attract the eyes of a younger audience.
Among the vibrancy and boldness of the website, modernism and simplicity will come through to create an easy-to-read experience while amusing and surprising users.
After research, I had a pretty clear idea of the sections and features of the website. Therefore, I started digital, trying to create dynamism, clear communication, and a clear flow.
My main goal was to bring a lot of movement to the website while keeping the communication straightforward and clear.
By starting digital I was able to explore the aesthetics and interactions. During the research, a lot of the competitor’s websites are either too stiff or had too much movement it creating confusion, so I wanted to bring a more balanced design.
Since I had a rather clear idea for this design after researching and understanding this user and the upcoming trends in the market, I decided to start with a more advanced version of the wireframes for the user tests. It was better to test with a more mature version early in the process because of the importance of interactions and the motion of this design.
The final design didn’t have significant changes from the prototype version. Aspects like communication, navigation, and hierarchy were modified throughout the pages designed, however, as I kept the design straightforward in each section it was well received, understood, and liked by users.
The imagery in the hero section has a lot of movement to evoke a happy place and dynamic products. This subtle up-and-down hover is inviting without being distracting.
Taking reference from newer websites and NFT websites to bring a modern and fresh look to the Rave-like aesthetic. This creates a transition that allows users to notice the change in sections and their similarities at the same time in a dynamic way.
A lifestyle video that creates ambiance, gives insight into the use of the products and communicates products interact with each other creating a system at home.
Light, movement, and rave vibes. These blurred blobs of color give texture to the website. It also denotes the change from section to section.
To continue with the homepage's trend, the image from the opening section transitions toward the second section where the product's concept is described. This motion creates a dynamic shift from one section to another.
A navigation bar allows users to visualize the information about the products in semi-customizable ways. This bar will stay at the top allowing users to jump pages without having to scroll back up. *The preview button replaces the AR preview and VR preview combining all the different previewing options into one.
The image of the product rotates with the scrolling displaying a different angle and descriptions of its features. This motion creates a vertical guide of the product that is easy to read and exciting without creating confusion or overwhelming users.
Products come in different finishes and versions, but users seldom see these options on the description page. The color swatches section allows them to play and engage with the product and customize it even before considering purchasing it.
To users comparing different versions of a product or different products of a category is a crucial part of their purchasing journey. Therefore, a compare section is built separate form the others and located at the top navigation.
Smart assistants are gathering more space among our personal and home devices users get more used to voice commands and the convenience it brings to searches and internet exploration. I bring the smart assistant of Lien devices to navigate the website. Users can press the microphone icon and ask ARTY for any product or bit of information about the brand and find it right away.
I'm aware of how important accessibility is in the industry and I'm keen to learn more about it, so ensured to research the subject and include my learnings as part of this design.
The target users are empathetic towards the empowerment of diversity, thus appreciating sources of customization and diversification of products.
Most users will go to channels like Youtube to watch reviews to listen to the tips and opinions of influencers they follow and trust before buying a product. To bridge the need for visual and audio descriptions of products, I added a section for video review.
This section will be one stream of visits, when potential buyers visit those videos on social media, they find a direct link to the product page, same wise users can watch the reviews of the most renowned influencers from the official website.
Younger users are becoming more used to using digital aids to navigate around different devices and worlds. Tools like AR and VR sets are not new to them and shortly they'll become an even more common thing to have around. Therefore, I added to the navigation patterns a variety of preview options that include AR, VR, and 3D visualization as a way of foreseeing what these users may be able to use and may need.
* These CTAs don't appear on the final version because during user testings participants mentioned how monotonous/ repetitive these were across the website ending up overwhelming them. For the final, they are put together under a button on the navigation bar of the product pages.
This is the prototype of the last version, ready for further user testing. The main goal of this prototype was to understand the search habits and content information relevant to users. In addition, I was also able to test and try different ways of animating a prototype using Figma.
Link to prototype in FIGMAAfter finishing with the latest changes upon user testis feedback I'd work on enhancing the communication of the different sections, design the accessibility control panel, ARTY's experience, and the full check-out process. I'd also work on the motion design and the preview experience right after.
This project allowed me to improve my UI skills and get a first sense of motion and animation integrations to a design. I was also able to debunk my own constructed myth that e-commerce was already well-known by users thus making the navigation patterns easy to tweak without risking confusing users. What I like about this project is that I was able to integrate technologies and accessibility features that are not only trending at the moment but that I felt curious about exploring.
If you like what you see and want to work together, get in touch!
susirepo@gmail.com