01

Swell Visual System

2019

I spearheaded the visual and iconographic systems of Swell’s first iOS application.

THEMES

User Interface, Branding, Illustration, Animation

TEAM

PM, Developers, Product Designers, Visual Designer
and Myself

TOOLS

Sketch, Invision, Abstract,
After Effects, Illustrator,

INTRO

Investing in Positive Impact

Swell was an investing platform that helped its users invest in socially responsible portfolios that actively worked toward solving global challenges like clean water, green technology, and zero waste. The majority of financial brands out there are dry, technical, or overly complex, Swell was designed to be the opposite of that.

Initially designed as a web platform in 2017, Swell launched it’s iOS app in 2019, continuing its goal of making impact investing transparent and accessible to everyone.

GOAL

How might we improve the experience of investing while making impact investing accessible to everyone?

With over 100,000 users and counting, the Swell team set out to improve our investing experience as we began designing our first iOS app.

My efforts were spent improving the user interface, and updating our visual and iconographic systems.

Research

KEY RESEARCH INSIGHT

Creating a platform that offered
more guidance and accessibility.

When we began working on this project we spoke with hundreds of Swell users through face-to-face sessions, interviews, and prototype reviews to learn how we could improve their experience as we transitioned to the iOS platform.

Many of the face-to-face sessions were conducted via online video calls using a discussion guide. This method allowed for a natural conversation to take place. We inquired about users’ occupations, interests, financial behaviors, future goals, and familiarity with investing.

These group interview sessions were followed by team meetings, where evidence of common behaviors, user needs, barriers to entry, and persona types were synthesized.

Based on this feedback we realized we needed to create a platform that offered more guidance and transparency while also feeling accessible.

Accessibility
& Inclusivity

With a company mission of offering impact investing to everyone, how could Swell create an experience that felt inclusive and inviting.

Guidance

Currently, users without much financial literacy were getting confused in our onboarding process. How can illustration and animation be used to reduce confusion of those new to investing.

Increase Conversion

Ultimately, our main goal with the iOS app was to acquire new users with a conversion rate that would out-perform our desktop experience.

FIRST STEPS

Investing for Everyone

Although we were careful to make the app accessible for those with impairments and disabilities with Apple’s VoiceOver Support and improving color contrasts for those with visual impairments, we also wanted the app to feel accessible.

Previously at Swell we had implemented illustration into our digital advertising and website, however very little had been used within the product itself. It was important to me to take some of the successes we had seen with our playful illustration style in other areas of the brand and bring them into the new app.

DESIGN DIRECTION

Communicating through
Illustration and Animation

In looking for ways to make the experience feel more inviting and accessible, we realized how functional a tool narrative can play in developing a visual story for our illustrations. We decided to implement short animations to add a touch of personality and joy to the experience. Two or three seconds of animation was all that we needed to add emotion and liveliness to our scenes. 

We implemented Airbnb’s lightweight Lottie framework to allow a much more efficient and seamless workflow between the design and development teams. This allowed us to simply export our animations as JSON files before sending them to our development team.

Our visual system was designed with three levels of fidelity: High, Mid, and Low. At the highest-fidelity were the fully animated illustrations, with the  iconography of the app encompassed in the Mid and Low fidelities.

Although our icons didn’t feature the human representation seen in the high fidelity level, the mid-fidelity icons did feature animation in certain contexts, primarily those greeting you at the top of your account screen and on the investment tips screens. Our lo-fi icons functioned as more traditional iconography, lacking both human representation and animation and existing solely to guide users in navigation.

DESIGN DIRECTION

Designing for Humans

Throughout the process, representation of our audience was something we placed a high priority on. It’s hard to forget what one user said to us during one of our early user tests:

“When you think of investing, you think of rich old white guys in suits…. I don’t have a lot of money…this just doesn’t feel like it’s for me.”

— CAITLIN, TENESSEE

This really struck us and reinforced the need to create an experience that felt accessible to people regardless of sex, race, or economic class. We wanted our illustrations to be representative of our diverse user base. It’s a great feeling to hear a user say:

“I'm glad there are some people in the app who look like me! That means a lot.”

— JERMAINE, CALIFORNIA

I’m proud of where we landed, but also know there is plenty of room for growth in showing a wider range of human representation.

Style-Exploration

Early Illustration Style Explorations

DESIGN DIRECTION

Investing Feels Complicated

As someone new to investing before joining the Swell team, I was all too familiar with the confusion diving into investing often brings. The amount of acronyms, account types, and choices can be disorienting. These were all feelings we sought to alleviate in our new investors.

Onboarding

DEFINING THE NEW EXPERIENCE

Guiding New Investors

At swell, the investing process began with creating your “Mix” or a customized combination of Swell portfolios. Each of our portfolios were a curated group of companies that were actively making a positive impact in the world such as ending hunger, providing clean water for all, or fighting for gender equality.

This structure of individual companies sitting within portfolio containers wasn't something immediately apparent to our users. The original sign up flow had almost no hand-holding when it came to explaining this before making your first investment which proved to be troubling for our test groups. 

We decided to redesign these screens to utilize a more graphic and animated visualization by weaving in explainer modals and informational details at this moment where we observed the most hesitation and confusion. 

IMPACT

Results + Next Steps

50%

REDUCTION IN CAC

Post app launch

4.5

STAR RATING

Measured in Apple App store

300%

CONVERSION RATE INCREASE

Post app launch

Judging by initial user feedback, the overall experience was very well received. The Swell iOS app was featured twice in the Apple App Store and maintained a 4.5 star rating with majority positive feedback from our users. Ultimately, Swell was unable to achieve the scale needed to sustain operation. As a result, we closed our doors on August 30, 2019. Even today, there is still a knowledge gap between the finance world and that of our target audience, the average millennial, but during its run the Swell app helped to shrink that gap and offer socially responsible investing options to everyone.

CREDITS

Design Lead - Yasmine Molavi

Product Design - Cristina Stutz

Product Design - Keaton Herzer

Visual Design - Michael Traquair

Art Director - Chris Arellano


2020.CHRISARELLANO