Just a moment.
Q1, 2024 | Feature Scoping, Prototyping
My Role
UX Lead — Feature Scoping, Research, Interaction Design, Visual Design, Prototyping
Main Squad
Lisakki Rotko, SWE
Mario Buikhuizen, SWE
Maarten Breddels, PO
Pei Liu, PM
Timeline
Design Handed off in Q1 2024.
Estimated launch in Q4 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.
Although we have a booming Github community with over 1800 stars, we lack a professional API Documentation to communicate our capabilities and support users, thus hindering the monetization.
I owned the design strategy for the API documentation project as UX Lead, and collaborated cross-functionally within a team of 5 to prototype and implement feature sets, thus 100+ design components have been integrated into the existing codebase, revamping in-house components.
We estimate reaching over 3,000 users, tapping into a total addressable market (TAM) of $10 million USD.
Highlight
Support the future of front-end development in the Python ecosystem — an API documentation for communicating Solara's capabilities and supporting users.
1.1a
Switching Light/Dark Mode Interaction
VIDEO
1.1b
Light/Dark Mode Homepage
INTERACTIVE
1.1c
Light/Dark Mode Modal
INTERACTIVE
1.2
API/Component Page Interaction
VIDEO
1.3
Footer Review Interaction
VIDEO
1.4
Left Pane Interaction
VIDEO
1.5
Top Navbar Layout
IMAGE
1.6a
Sample Dev Handoff: Flow
IMAGE
1.6b
Sample Dev Handoff: Components
IMAGE
1.7
Mobile Design
IMAGE
1.8
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.
Besides communicating our value proposition, we can establish a unique visual language on the marketing site and differentiate ourselves from competitors.
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
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
