Solara Marketing Site
Q2, 2024 | Visual Design, Branding
My Role
UX Lead — Visual Design, Interaction Design, Prototyping, UX Writing
Main Squad
Lisakki Rotko, SWE
Mario Buikhuizen, SWE
Maarten Breddels, PO
Pei Liu, PM
Timeline
MVP achieved in Q2 2024.
Estimated launch in Q3 2024.
Overview
Solara, an open-source web development framework, empowers developers to create scalable, high-quality web applications using pure Python, prioritizing ease of use and maintainability.
I spearheaded the redesign of both marketing and product web pages, optimizing user flows and delivering high-fidelity prototypes.
Through this project, I established Solara's visual identity, leveraging the inherent association of our name "Solar-a" with space and warm colors. This distinguishes us in the web app development landscape, typically dominated by cold or neutral color schemes.
We estimate reaching over 3,000 users, tapping into a total addressable market (TAM) of $10 million USD.
Highlight
A marketing website for establishing Solara's visual identity and attracting new users.
1.1a
Homepage Hero Section Motion
VIDEO
1.1b
Homepage Showcase Section Motion
VIDEO
1.1c
Homepage Feature Section Motion
VIDEO
1.2
Sample Components
IMAGE
1.3
Components Catalogue
IMAGE
1.4
Sample Dev Handoff
IMAGE
1.5
Mobile Homepage
IMAGE
1.6
Testimonials From Colleagues
IMAGE
Problem
Solara is effective but didn't sell well.
Most users came from and only stayed in Github.
Currently, the landing pages have low conversion rates, hindering user acquisition and eroding user trust. Our marketing site needs to communicate our value proposition more effectively and generate more leads.
2.1
Solara Github Page
IMAGE
Current website didn't have clear visual identity.
Designs
Stellar look, professional feeling.
Seek Solara's visual identity
Inspired by current website (Figure 3.1) and astronaut image (Figure 3.2), I transformed original toy-like spatial gadgets into hyper-realistic animation of the hero section.
3.1
Before/After Homepage Hero Section
INTERACTIVE
3.2
Inspiration for Homepage Hero Section
INTERACTIVE
The card component's backdrop was a nod to the hero section's animation — featuring the Solara emblem (bgAurora) as a background fill against a foreground layer (before). When hovering, the opacity of foreground color decrease and Solara emblem eases out (Figure 3.3).
3.3
Component Backdrop Logic
IMAGE
The iconic visual pattern
I collaborated closely with SWE to design and implement a card component hover motion concept, representative of sunrise (Figure 3.4).
By only adjusting fundamental opacity and colour properties, the animation was lightweight and implementable purely with CSS transform.
3.4
Component Hover Effect Concept
VIDEO LOOP
Link
Want to take an in-depth look at my design files? I prepared a sneak peak file for you.
Retrospective
Collaboration is key.
All outlined OKRs of Q2 were successfully achieved.
Landing page design along with mobile responsiveness is achieved by the end of Q2. Stakeholders are flattered by the result (figure 4.2).
Under "one page, one goal" principle, new landing page has few navigation links, which is estimated to led to a 20-30% increase in conversions.
Besides, WCAG 2.1 AA compliance across all CTAs and core information.
4.2
Testimonials From Colleagues
IMAGE
Key takeaways
Cross-functional partners should be involved as early as possible
It fostered a holistic approach to the project, where content strategy and technical limitations were considered in tandem.
Deliver quality design within constraints
Considering limitations through diverse lenses facilitated the development of innovative solutions for other challenges.
Take an incremental approach to get stakeholder buy-in
Build traction by creating a small-scale prototype and gradually expand based on demonstrated success.