Voluntopia

Volunteer from anywhere by completing small tasks that benefit your community and the people around you

Results

Interactive Prototype

Table of Contents

Role
UI Designer
Team
Jee Hyun Kim, Youssef Saab
TimeTable
5 Weeks, June — July 2020
Tools
Figma, Miro, Notion
Outputs
Market Research, Moodboards, Style Tiles, User Testing, Design Principles, High Fidelity Mockups, Interactive Prototype, Micro-Interactions, Usability Test Report, Design System

Project Background

When it comes to the sustainable movement our collective habits can shift demands, making our voices heard, and building the future we want.

That’s why Sustaio Founder and CEO Olivia Pedersen, along with CTO Leif Schjeide, created Sustaio — an application that helps people transition their habits to live a sustainable lifestyle. Sustaio guides its users from information to understanding to action, helping them connect the dots of their impacts and track their metrics all while delivering a personalized, self-empowering experience.

Small steps can deliver powerful changes over time. What if we could put this into practice to promote change in our communities? Several people either don’t have the time to volunteer or find it to be a daunting commitment, which is why we created Voluntopia. It’s an all-new way to volunteer from the comfort of your home. You’ll complete small, short tasks that benefit your community and the people around you. Every time you complete a task, you earn points, which can be used to redeem a variety of rewards.

Previous Designs

Success for our clients meant collaborating with a team of three UI designers in order to launch a minimum viable product where the end-user experience of Sustaio would be well-branded, refined, and impactful.

A glimpse into the previous designs given to us by the client

Client Ask

"How can we find a stronger hierarchy of how to use all these colors and find consistency so it’s not this loud, noisy brand? It’s more like very colorful and empowering while still being clean, professional, and not overwhelming."

Olivia Pedersen — Sustaio CEO

01/06 Research

Based on what Olivia said, the overarching challenge for the Sustaio app was figuring out how we could entice individuals to re-examine their daily habits in order to live a sustainable lifestyle.

Our first step in approaching this challenge was research. We began by asking ourselves:

What does the current sustainability market landscape look like?

To answer this question, we leveraged two research methods to help us gather strategic insights pertaining to the industry, marketplace, and target audience of a sustainability-driven application.

Preliminary Domain Evaluation

Evaluating the domain involved taking a deep dive into what sustainability is and what the current state of the digital marketplace looks like. Through this, we identified industry and business trends that would guide Sustaio's product development.

Key Takeaway

Many apps are gamifying sustainability through friendly competition and lucrative reward systems. There are various apps out there to help people live more sustainably, but most of them glitch out or simply don’t offer a good user experience, regardless of their good intention.

Market Analysis

On the other hand, analyzing the market provided a way for us to assess the strengths and weaknesses of current and potential competitors within the sustainability sector. Our analysis was done in order to examine products from a visual design standpoint, ultimately allowing us to gain ideas and inspiration for our designs.

We were able to extract insights from direct competitors and indirect competitors as well as analyze two apps that our clients were inspired by.

From these products, we prioritized understanding certain facets such as:

  • Information architecture
  • Cognitive load — especially important because Sustaio is a content-heavy app
  • Reward systems/gamification
Actionable Insights

Social competition incentivizes users to earn rewards and brings more value to the user experience

Find a happy medium between the way Headspace presents content (organized and strongly-branded) and the simplicity of Down Dog (photo-heavy, no childish illustrations)

Change doesn't happen overnight — Slowly ease users into making more eco-friendly choices as they progress in the app

02/06 Explorations

Challenging Assumptions

After gaining a foundational knowledge of the market landscape, we started exploring and experimenting with Sustaio’s existing brand identity. To understand where our clients' expectations were, we wanted to baseline things with a Challenging Assumptions workshop involving the clients.

This workshop yielded an underlying knowledge of client mental models surrounding key screens of the Sustaio interface.

Style Tiles & Desirability Testing

The Challenging Assumptions workshop allowed us to confidently transition into our style tiles, where we explored different themes for the Sustaio app.

This exploration was inspired by the Greek symbol Delta, which means “difference” or “change in,” and is symbolized with a triangle. Sustaio was founded on the concept of small steps delivering powerful changes over time so I wanted to reflect that concept through the triangles.
A Zoom call with one of our end-users, Tammie
Desirability Testing Findings

01

Guided Experience

The UI should be self-explanatory, intuitive, and naturally lead users to learn more about functions and features.

When you just download [an app] and it has pop-ups to show you what to do and where to go, that's always helpful.
Emily H. — End User

02

Simplicity & Clarity

Users should know where they are in the app at all times, what each button leads to, and be introduced to unfamiliar industry terms.

[An app] can't have so many features where it's overwhelming. It's better to do 1-2 things well.
Tammie W. — End User

Evaluating & Converging Ideas

After feedback from both clients and users, I identified a couple of my style tile ideas just weren’t worth the time. This sparked a rather significant design pivot for my team members and I. Looking back at user research and keeping the project's needs in mind, we each created a converged style tile by building onto existing options, as well as exploring alternative approaches, to see if we could determine a design direction for Sustaio.

In brainstorming sessions with the client, we focused on some different ways to rebrand sustainability and decided that maybe trying a dark theme would be useful.

Incorporating the dark theme was a trade-off but we decided that it would allow Sustaio to keep their competitive differentiation in the market.

Design Principles

After solidifying our design directions, my team and I created four design principles. These principles, crafted with the insights we gathered in our initial research, acted as north stars for our first round of high fidelity mockups.

Don't Rule Out the Importance of Language

Language, although it may seem minor, can have a huge impact on the overall app experience. Use voice to excite, add personality through humor, and resonate with users.

Plant the Seed of Curiosity

Be bold — Spark curiosity and allow people to view sustainability through a new lens.

Respect User Growth

Slowly introduce features so that people have time to get acclimated to the product and progressively disclose information to limit cognitive load.

Leverage Existing Design Patterns

Don't reinvent the wheel — Sustaio should be easy-to-understand and take advantage of the knowledge users have from other apps.

03/06 Design Execution

Styles & Components

Prior to starting my designs, I prioritized organization before execution by creating a component library.

Initial Designs

User Testing Findings

01

Include Impactful Imagery

Take advantage of storytelling — Users should be able to resonate with and envision themselves through images across the interface.

02

Prioritize Instant Gratification

Few people have long-term memory. Incorporating charts and other graphics allows users to see a visual output of what the app is tracking.

03

Personalize & Humanize Numbers

Encourage users to improve their habits and scores with mini CTA’s throughout the app.

04

Explore Excitement & Vibrancy

Sustaio has to be inviting enough to want users to continue to go down the funnel. Experiment with brand colors more to make the interface feel cool and not overly formal.

04/06 Refinements

The user testing key findings helped lay the foundation for iterations. One thing in particular that became abundantly clear after testing was that redesigning the dashboard needed to take precedence over everything else.

Client Ask

"The dashboard should have snapshots or previews of content instead of just links to various pages."

Leif Schjeide — Sustaio CTO

Pivot

At this point in the design process, we had to take a step back. As we started to build out more screens, we were blocked by the flows of the application. They simply weren't clear. Additionally, the wireframes we received were not satisfactory to base our designs on. In order to plow forward and try to understand the functionality of the application, I took it upon myself to create user flows and wireframes.

What Changed?

Sign Up & Onboarding Refinements

What Changed?

What Changed?

05/06 Final Solution

Prototype

Outcome

Our clients, Olivia and Leif, were very happy with the assets we produced. In a short four-week timeframe, we created a consistent look for the Sustaio mobile application and achieved a strong hierarchy of colors. Additionally, we strengthened Sustaio's usability case by creating user flows and wireframes.

Sustaio is currently implementing our assets in their crowdfunding campaign and determining how they can converge on them.

Future Testing

01

Bottom Navigation Bar

Through testing, we discovered that including a bottom nav bar puts valuable pages of the interface within reach. However, this UI element will need more testing as the Sustaio app gets built out.

02

Onboarding

A majority of users expressed interest in an expanded onboarding process that would allow them to tailor Sustaio to their needs. Ultimately, onboarding must be designed in a way that adds value to the user's understanding of the product.

03

Interactivity

UI elements should be interactive in order to create a fun learning environment for users. This could be through quizzes, interactive learning modules, and other dynamic experiences. Future designers should explore how they can best deliver educational content in different forms to reduce cognitive load.

06/06 Reflection

Evaluate First

UI design is not just about designing screens. We failed to fill in the missing information and got caught up in the original scope of the project — providing enhancements and improvements on the visual design of the Sustaio user interface.

It appeared as if everything was well-laid-out for us, especially due to Sustaio's concrete brand identity. In actuality, there were a lot of missing pieces, two of those being the user flows and the wireframes we received. These things should have come first before diving into the visual design and forced me to make a pivot point at a time where I didn’t necessarily have the bandwidth to do so. This is ultimately where I would have adjusted the scope of the project.

Over-Communicate with Clients

Engaging clients in the design process creates moments of collaboration, alignment, and visibility. Throughout this project, we sacrificed moments of communication for moments of work. In hindsight, we should have been open and honest about our concerns, communicating with our clients more often outside of weekly sprint presentations.