Just a moment.
Q1, 2024 | Visual Design, Branding
My Role
UXD, UXW — Visual Design, Interaction Design, Prototyping, UX Writing
Product Team Squad
Lisakki Rotko, SWE
Mario Buikhuizen, SWE
Maarten Breddels, PO
Pei Liu, PM
Timeline
MVP achieved in Q1 2024.
Launched in Q3 2024.
Website
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 collaborated with engineers to design and ship web documentation and an end-to-end marketing site.
Through this project, I developed a consistent visual identity across all products, 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.
As a result, we acquired 1k+ new individual users and several enterprise users in Q4, 2024, laying the path for a seed round of funding.
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
Problem
Solara's Growth Stunted by Outdated Website
Most users come from Github and rarely use our website.
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.dev Audience Interest
IMAGE
Unclear value proposition leads to product-to-market misalignment
2.2
Solara.dev Incoming Traffic
IMAGE
Designs
A landing page feels like Solara
Seek Solara's visual identity
The current landing page (Figure 3.1), while effectively conveying a spatial theme, has a toy-like and unprofessional aesthetic.
To address this, I replaced the original toy-like spatial gadgets with a hyper-realistic animation of a sunrise in the hero section. This animation, inspired by the image of astronauts floating in space (Figure 3.2), elevated our visual identity while maintaining a professional look.
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
Link
Want to take an in-depth look at my design files in Figma? I prepared a sneak peak file for you.
Impact & Learnings
Collaboration is key.
All outlined OKRs of Q1 were successfully achieved.
Landing page design along with mobile responsiveness is achieved by the end of Q1. Stakeholders are flattered by the result (figure 4.2).
Under "one page, one goal" principle, new landing page has few navigation links, which contributed to a 25% increase of new users in Q4, 2024.
Besides, WCAG 2.1 AA compliance across all CTAs and core information.
4.1
Solara Website Stats - After
IMAGE
Progress was lookin' awesome!
A Solara homepage design prototype was presented at an all-hands meeting in mid-January 2024 and was well-received. (Figure 4.2) The team really wanted to start building it.
It excited many stakeholders — it fulfilled our PM’s vision, garnered engineering support, and set a critical stepping stone for Stadia’s future.
By the end of Q4 2024, just half a year after launch, Solara had acquired over 1,000 new users and seen a 68% rise in sign-ups.
4.2
Testimonials From Colleagues
IMAGE
