JOURNEY MAP

I connected the key features into a cohesive experience.

Designing a learning platform catering to every role involved in the software development lifecycle.

Interaction Designer, Visual Designer (team of 2)

ROLE

Wireframing, Interaction Design, Visual Design, Design Pitching

SKILLS

UNIFYING SOFTWARE

DEVELOPMENT PRACTICES

CISCO

Holistically unifying software development practices in a company with 75,000+ employees.

SOLUTION

CodeOn, a learning platform guiding teams towards consistent, effective development flows - from engineer to project manager.

IMAGE CREATION

I created imagery highlighting the sleek design of the products, while displacing them from their usual environment into a surreal oasis.

KEY PAIN-POINTS

Finding initiatives that are in need of your personal abilities.

02

Finding volunteering opportunities with causes you already care about.

01

Finding volunteering opportunities where you feel like you are contributing meaningfully

03

CONCEPT GENERATION

& REFINEMENT

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.

RESULTS

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

more meaningful. 

Tell us what matters to you

In a few taps, pick causes that you'd like to help drive forward.

SYSTEM MAP

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.

KEY PAIN-POINTS

Lack of visibility into what data is being collected when, and where it goes.

01

Feeling clueless and out-of-depth around their online privacy. Worrying about risks both known and unknown.

02

Lack of preparedness - how do you prevent bad stuff from happening among changing technology and regulations? 

03

Feeling of being a potential target for the entire world - both companies and ill-intentioned individuals. 

04

Stressful, confusing trade-off between benefiting from data-based products vs. loss of control over where that data goes.

05

STYLE GUIDE

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.

ANIMATION

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 design process? Check out this case study.