Clo's Marketing Website
Overview
A responsive web design for a marketing site that promotes the Clo app - a virtual closet & inspiration hub.
Project Type
Solo - Case Study
Timeline
1 week
Role
UX/UI Designer
Copywriter
Brand Strategist
Tools
Figma
InVision
Bringing Clo to the Masses
Problem
When creating a mobile app, a marketing campaign is detrimental to the product's success. Users are constantly being introduced to new apps, so how does one stand out in a sea of others? It’s clear that competition in the mobile app space is stiff; thus, designing a compelling marketing website for Clo was very important to help expand our reach.
Solution
I designed a responsive site for Clo that effectively communicates the product’s value to users and sets the tone for the brand. Throughout this process, I leveraged my background in marketing and product development to design marketing collateral that served as a natural extension of Clo. This site not only promotes the app, but it engages with users and, in turn, taps into invaluable analytics.
Inspiration, Community & Femininity
Moodboard
Honoring Clo’s brand visual identity and tone, I expanded Clo's moodboard with a curated collection of images that conveyed: inspiration, community, and femininity.
A key difference between the app and the marketing website is that the website is meant to be more colorful since its purpose is to get users excited about Clo.
UI Inspiration
Through competitive research, I explored a lot of different marketing websites. However, the ones that stood out were the ones with catchy headlines, witty copy, clear explanations of features, and testimonials.
Ultimately, I was inspired by websites that provided their product with a spotlight and didn’t steer attention away from them with unnecessary, fancy animations.
I also wanted to incorporate UI staples/patterns from other landing pages including a sexy hero image, minimalistic navigation bar and footer, proof points, and a CTA near the footer.
Ideate
Stepping Into the Design Lab
Mid-fi Wireframes
I translated sketches into grayscale wireframes that would serve as a rough blueprint for high-fidelity wireframes. At this point, I was able to get a better idea of what the page could look like.
Desktop
Mobile
Mid-fi Content Flow Diagrams
Creating contnt flow diagrams helped me better visualize the responsive website and outline its hierarchy before moving into hi-fi wireframes.
Desktop
Mobile
Prototype
The Dress Rehearsal
High Fidelity Wireframes & Protoype: Version 1
In my hi-fi wireframes, I included mockups of users interacting with Clo since I felt that these were impactful and fun. I kept my brand’s color palette readily available for reference as I went through the color injection process. However, I utilized color more freely on the marketing website since it’s a bigger canvas and meant to entice users to download the app.
In the mobile version, I implemented more horizontal scrolls since the width of the screen is smaller/limited, while keeping the same content that was on the desktop version.
Desktop
Mobile
Test
Initial
Initial
Final
Final
Feedback
Users were confused about what “New from your favorites” meant.
Some users didn’t realize that they could scroll horizontally to see the new outfits from influencers.
I updated the title of “New from your favorites” to “New outfits from your style icons” so it was clear to users that these were outfit posts from their favorite influencers. I also moved this section to the top, so the screen would look more like a feed.
I included a preview of the next image on the right, so users would understand that they could scroll horizontally.
Unveiling the Final Look
Along with the revisions from the peer critiques, I made further updates to the high-fidelity prototypes for desktop and mobile by adding realistic interactions and design edits to improve the interface and overall experience for users.
For example, I added hover states to the navigation bar and footer (desktop) and added a video demo of the visual search tool to the mockup in the value proposition section (desktop and mobile).
Phoning a Friend or Ten
Implementing Feedback from Peer Reviews
I conducted a round of peer critiques with 10 designers using the hi-fi prototype. While most of the feedback was positive, I received constructive criticism that was very useful. I organized all of the feedback into a prioritization matrix to help me prioritize revisions; most of the notes fell into the high-impact category. Ultimately, I made all the suggested revisions since time allowed for it.
Below are some of the key revisions that I implemented to the desktop and mobile viewpoints based on the feedback.
Initial
Feedback
-
The fonts are too big and some of the sections are too wordy.
-
Make sure CTAs are aligned.
-
Remove the download button you designed, since you must use the Google and Apple CTAs.
Initial
Feedback
-
Steer away from using ‘stylist’ so much since it may create confusion.
-
Add auto-padding to the testimonial cards.
Final
Solution
-
Changed typeface and reduced font size of headings, sub-headings, and body copy.
-
Condensed the heading and sub-heading copy.
-
Aligned CTAs.
-
Revised copy in the features section.
Final
Solution
-
Replaced multiple instances of ‘stylist' with ‘fashionista’ to avoid confusion among users.
-
Added auto-padding to the testimonial cards for consistency.
Final
Feedback
-
Most of the copywriting is surrounding the style side of the app and doesn’t really highlight the sustainability aspect.
Solution
-
Added a section after the testimonials dedicated specifically to the environmental impact of Clo. Since the app was created to reduce overconsumption and the wasteful impact of the fashion industry, it was important to highlight that.
Refine
What's Next?
I'd like to launch the marketing website to get users excited about Clo! After launch, I'd be able to obtain useful analytics that will indicate whether the website is successful at attracting and converting users.
Key Learnings
Don't Lose Sight of the Main Goal
A good user experience is always the main goal. When building a marketing website, it’s important to keep user experience a top priority. If a marketing website creates the impression of a bad user experience, users will be hesitant to download the app altogether.
Voice & Visual Identity
Since this site is a touchpoint for users, the brand’s voice and identity must shine through. The goal is for all marketing collateral to serve as a seamless extension of the product.