Carrousel Dreams

Overview

As the web designer and developer for Carrousel Dreams, I was tasked with the full stack development of the company’s e-commerce platform. Carrousel Dreams is an e-commerce-first vintage designer fashion retailer tailored to the female, Gen-Z demographic.

Role

Sole UX Designer and Web Developer

Team

Visual Designers and Stakeholders

Tools

Figma, Webflow, Photoshop, Premiere Pro, After Effects, Zapier, Cinemad 4D

Design Process

Research

I began the research phase of my design process by conducting market research and competitor analysis to identify strengths and weaknesses.

The Problem

How could we offer the best online shopping experience for the designer vintage market? The target demographic is heavily invested in personal narratives and cares deeply about the products they buy, as these are unique and not part of a current production line. The users are young women of the Gen-Z demographic who care deeply about the social and environmental impact of their consumption.

Competitive Analysis

I analyzed competitors’ key objectives, marketing profiles, and overall strategy. My research uncovered a wide variety of vintage retailers. I was able to narrow down competitors to curated designer vintage fashion retailers, excluding P2P and fast-fashion vintage businesses. Furthermore, I was able to find those catering to the young demographic that Carrousel Dreams was targeting.

User Interviews

I carried out user interviews to gain a robust understanding of Carrousel Dream’s users, including their needs, goals, and points of friction. I asked questions focused on users' experiences with vintage shopping, both in-person and online. I analyzed the users' answers by sorting them into an affinity map to gain overarching insights.

Overarching Insights

Through the aforementioned research I gained crucial insights that allowed me to generate guiding principles and essential product features.

User Journey

By using the data collected during my research I was able to map the user journey through the construction of user personas, user journeys and user flows.

User Personas

User personas are used to represent the variety of users.

User Journey

User journeys provide an avenue towards understanding how the users would complete a function and what they would need to accomplish it. The users' emotional responses are anticipated.

User Flow

User flows provide an an additional avenue towards understanding the way users navigate a given function and what they would need to accomplish it.

Ideate

Armed with the insights achieved through the user journey schematics, I began the design ideation process by developing a site map. I was able to refine a preliminary sitemap by conducting a card sorting exercise.

Site Map

The card sorting exercise informed the site structure by showing the optimal structure for the majority of users. Since most of Carrousel Dreams' customers are only looking to purchase clothes, the home page directly funnels them to the shopping page without readily providing an option to access the rest of the site (bottom navigation is present still). Additionally, customers wanted to have the support pages readily accessible (as this something they often look for when purchasing second-hand products) so this was provided in the navigation bar modal, rather than merely in the bottom navigation as it is customary.

Prototype

At this stage in the design process, I began the creation of low-fidelity and mid-fidelity wireframes using Figma and high-fidelity prototypes using Webflow. Each stage entailed subsequent iterations to improve the app’s functionality and UX.

Wireframes

Since the site was going to be developed in Webflow, I decided to only carry out the initial wire framing stages using Figma. By using Webflow as the final prototyping platform I was able get a much more accurate testing experience, while simultaneously making significant headway on the project's development.

Test

I carried out usability testing by creating a test plan and test script and then conducting a moderated test with 4 participants through Zoom. Using the test results, I created an affinity map to organize the data into actionable insights which informed a slew of design decisions, including the two examples you can find below.

Before

The users commented that while the top navigation was unique, they often wanted to access their cart while scrolling through the product page, but it was cumbersome to scroll all the way to the top do so. Additionally, some users reported that they could not tell that the 3D animation buttons, particularly the navigation modal button, were clickable and thus were not able to find the navigation menu.

After

The top navigation was redesigned to take up less space and was given Sticky positioning so it would remain fixed to the screen as the user scrolled through long pages. Additionally, the 3D animation buttons for the cart and navigation were replaced with static pngs to reduce load times and a label was given to the navigation modal button.

Before

The users communicated that they could not tell that there were links to model pages or designer pages, both of which are unique features to this store and can greatly enhance the shopping experience by making the user invested in the product.

After

The links received a colored shadow that both enhanced their visibility and was aligned with the use of text shadow throughout the site.

Peer Review

After implementing the insights gained from usability testing, I asked fellow designers in various forums, including the FinSweet slack community and the Webflow forums, for input on my final prototype. It is important to note the power of Webflow in creating fully working prototypes that can be easily shared and tested by other people as these are essentially finished products.
‍
Notable insights gained from the peer review process include:
‍
1. Replacing the Museum feature, which was envisioned as a repository of sold products, with a much more streamlined Archive page that showed a smaller but curated collection of previously sold items. UX-minded people recommended a general reduction in complexity while achieving the same goal of offering interested clients a look book for outfit ideas.
2. Reducing loading times by removing unnecessary characters from custom fonts was an important comment that allowed me to reduce load times.

Style Guide

Color

The website's main colors are black and white, with ample usage of white space to generate powerful contrast with a wide range of vibrant colors that are used to accentuate elements throughout the site.

Typography

The site uses Endor as the the header font, which demands attention and conveys a degree of mystery and communicates the brand's young essence. The product sorting and filtering system uses Almendra, which is a unique yet legible font. The rest of the text uses Droid Serif to ensure legibility.

Icons

The site forgoes traditional icons in favor of unique alternatives that speak to the brand's youthful and mysterious identity.

Concluding Remarks

Carrousel Dreams was a wonderful project to work on as it provided me with a unique set of design challenges and freedoms that tested my ability to balance brand identity and functionality. The website was well received by customers, who often praised its unique style and how fun it made the shopping experience. Large fashion publications commended the refreshing look it brings to a market saturated with templated shops. The site stands to be improved in a number of areas, mostly in the development side of things. However, the current home stands to be overhauled as it may be too simple for the needs of a growing business.