I connected the key features into a cohesive experience.
Reinventing oral care aesthetics - creating a dreamy, surreal landing page for quip.
Solo Visual designer
Visual Design, Design Pitching
quip (lowercase intended), a contemporary oral care company, tasked us to create a landing page inventively showcasing their products.
Surrealism and dreamscapes are a massive source of inspiration for me. In this project, I linked quip's focus on creating delightful in-use experiences with a UI that visually exudes dream-like relaxation.
I created imagery highlighting the sleek design of the products, while displacing them from their usual environment into a surreal oasis.
Finding initiatives that are in need of your personal abilities.
Finding volunteering opportunities with causes you already care about.
Finding volunteering opportunities where you feel like you are contributing meaningfully
With good starting points from the interviews, I hand-sketched options in quick iterations. As these stabilized, I moved them to Sketch and iterated on interaction, and how the different components would work together. I then built an interactive version of these wireframes on InVision and used it to connect the screens and consolidate the interaction.
With the testing data, I solidified the key product features that effectively empowered users with the skills to protect themselves online. I also refined the interactions that made these features most engaging, intuitive, and fun.
VISUALS & VOICE
I used Speakable’s primary colors and tone as starting points to create a visual brand that feels like a sibling to their main product, the Action Button: related, but different. I also used friendly, impact-driven language to help volunteers feel valued, empowered, and part of something meaningful.
Tell us where you shine
Getting to use your superpowers
makes volunteering that much
Tell us what matters to you
In a few taps, pick causes that you'd like to help drive forward.
To keep track of how the different components interconnected within the experience.
Get matched with volunteering opportunities that are meaningful to you
There are NGO's out there that need you and your skills. Actable helps you skip the search and the hassle.
Lack of visibility into what data is being collected when, and where it goes.
Feeling clueless and out-of-depth around their online privacy. Worrying about risks both known and unknown.
Lack of preparedness - how do you prevent bad stuff from happening among changing technology and regulations?
Feeling of being a potential target for the entire world - both companies and ill-intentioned individuals.
Stressful, confusing trade-off between benefiting from data-based products vs. loss of control over where that data goes.
After consolidating the structure and layout of the page with wireframes, I created a style guide for the UI. I integrated the core elements of quip's brand, including their two typefaces and quip green into a surreal, airy universe with a hint of retro.
To amp-up the dreamy feel of the page, I integrated floating movement and soft blur animations in the images using AfterEffects. I also animated the UI elements to gently guide the eye throughout navigation.
Want to see my UX process in more detail? Check out this case study.