REDESIGNING A
LANDING PAGE
CONTEXT
THE PROBLEM
As an early-stage startup, Better Off’s Development Team had prioritized the back-end of their product over the front-end. However, in preparation for investment pitching and public launch, the team recognized that their existing landing page did not visually reflect their brand voice.
For a product designed to foster in-person social ecosystems for young professionals, the landing page needed to better capture the excitement and unique value of the experience-driven platform.
PROJECT GOALS
🎉 Excite and engage users through appealing visuals and showcasing product features.
🥳 Align visual identity with brand voice without compromising informative and intuitive design.
🚀 Optimize for conversion of stakeholders and users.
🎨 Expand the design system for scalability
⏳ Deliver under time constraints.
THE DESIGN PROCESS
BRINGING THE GRADIENT IN
🎉 Excite and engage | 🥳 Align visual identity with brand voice | 🚀 Optimize for conversion | 🎨 Expand the design system
In my first round of editing I sought out elements on the existing page that could easily be enhanced with the logo gradient that existed in our current design system. The vibrancy and three-dimensional appearance of our gradient can be used to emphasize CTAs and drive user navigation.
PREVIOUS
FINAL
EMOJI STICKERS
🎉 Excite and engage | 🥳 Align visual identity with brand voice | 🎨 Expand the design system
Through direct competitor analysis, we observed that similar brands used badge-style graphics to break up rigid layouts and create a more fluid scrolling experience.
We designed beveled emoji stickers, drawing inspiration from established components in our mobile quiz—to embed throughout the page. This added emotional resonance to our brand voice without over-gamifying the user experience. To maintain consistency, we selected emojis directly from our app's existing iconography, reflecting user interests and notification patterns.
PREVIOUS
FINAL
SHOWCASING OUR PRODUCT
🎉 Excite and engage | 🥳 Align visual identity with brand voice | 🚀 Optimize for conversion
We felt that the visual design for the proposition statement was not impactful enough upon first impressions, and needed to be changed in order to drive conversions. We also strategized to make our site more image-centric to showcase our brand value through product visuals.
We iterated on several design variations—experimenting with typography, alignment, polaroid-style imagery, and the previously mentioned emoji stickers. To maintain a consistent brand voice and reinforce that our product’s primary touchpoint was a mobile app, we ultimately chose to lead with the emoji stickers. During this phase, we also debated whether to stick with our light-mode theme or incorporate dark mode elements to introduce greater visual contrast.
Through surveying our beta testers, we found that 76% of users felt the dark purple put a stronger emphasis on our messaging and visual elements.
Still, I felt the design lacked a strong enough expression of the product’s core value: offering a diverse range of experiences beyond the typical weekend bar scene. Through design research, I found that many e-commerce platforms effectively used card-based carousels to highlight product variety—a strategy we could adapt to better communicate our offering.
PREVIOUS
FINAL
HIGHLIGHTING APP FEATURES
🎉 Excite and engage | 🚀 Optimize for conversion
With our primary CTA focused on driving app downloads, our CEO was eager to spotlight more of the app’s core features. Having just redesigned the quiz as part of our shift in brand voice, I saw an opportunity to unify our visual elements into a cohesive user journey. The “Take the Personality Quiz” section was designed to visually engage users while making the download action seamless. We also introduced a mock quiz question as an interactive engagement tactic, triggering a secondary “Download the App” popup to encourage conversion.
TAKE THE QUIZ SECTION
INTERACTIVE QUIZ QUESTION
FINAL PRODUCT
FULL VIEW
WEB
MOBILE
RESPONSIVE DESIGN
SIDE-BY-SIDE COMPARISON
BEFORE
AFTER
FINAL THOUGHTS
WHAT WE ACCOMPLISHED
🎨 Unified the brand’s visual identity across web and mobile by shifting the visual hierarchy to be more image-centric, integrating consistent design elements and creating a more exciting voice.
📱 Elevated the homepage experience by highlighting the app’s unique value proposition—diverse social experiences beyond the typical weekend outing.
🧩 Introduced interactive elements to increase engagement and guide users toward the primary CTA: downloading the app.
🤝 Collaborated cross-functionally with leadership and developers to align design decisions with business goals, particularly in showcasing app features more prominently, whilst delivering under a time crunch.
WHAT I LEARNED
♻️ The importance of design consistency in our UI library when scaling brand voice across multiple platforms (web and app).
📚 How to balance visual storytelling strategically to communicate value and improve conversion without overwhelming users.
🪄 Interactive and visual components can evoke specific emotions that drive meaningful engagement and leave lasting impressions when tied to a clear UX goal.
🧐 The value of competitive analysis in identifying effective UI patterns that align with user expectations.
📣 How to advocate for design decisions using a mix of research, experimentation, and stakeholder input.