Projects

Edee Mobile App Design

/ Contract Full-time 2023

Profile Design Revamp

/ Full-time 2022

Design System Creation

/ Full-time 2022

RoS Mad Libs Board

/ School Project 2022

Liven Magazine

/ School Project

Tokyo Tonight

/ Freelancing 2023

Others

Home

About

Poster Gallery

Resume

Project Overview

As the lead designer to revamp MeaningfulWork's user profile feature, I was in charge of researching, wireframing, and defining visual and interaction strategies of the new profile.

Deliverable

The final design was fully componentized using the company’s design system and handed over to the dev team with full-spec documentation.

tools used

Figma

scope of work

  • UI Design,
  • Design System,
  • Mobile design,
  • Visual Design,

Final Outcome

Cover Image
Section

  • Allowed more customizability for users
  • Invoked visual interest / engagement at a glance, making each profile unique to each user whether they are a volunteer or a non-profit.

Better
Storytelling

  • More weight has been given to Mission and Media section
  • The new media section allows non-profits to upload a media (photo or video) of their choice to best support Mission statement

Better Ways
to Connect

connect with the non-profit internally and externally.
  • Message button- allows both users to communicate directly on the platform
  • Follow Us - allows volunteers to stay up to day with non-profit’s newest opportunities
  • Transparent Icons buttons - allows volunteer to learn more about the non-profit

Flexible Design
for Future

Incorporating tabs allowed to display nonprofit's opportunities with minimal scrolling and created a modular design for other features to come

Impact

FullStory recordings showed non-profits were 3X more likely to share their profile. The rate of volunteers applying to opportunities more than doubled within the 3 months period
-from one of our regular nonprofit user

About MeaningfulWork

MeaningfulWork offers a smart web platform that connects skill-based volunteers to non-profits with similar causes, to make a bigger and better impact in the world. MeaningfulWork was founded on the belief that everyone has the responsibility and ability to ensure the health and sustainability of our society and environment.

The Motivation

MeaningfulWork has a profile feature for two different user account types: volunteer and non-profit. Here are some motivations that led to the redesign.
1.
The need to integrate new features like opportunities and impact stories in the profile.
2.
During 15 interviews with volunteers, more than 50% of them reported that it was challenging to find attractive non-profits they want to work with.
3.
In 100 FullStory recordings, we noticed very few volunteers were applying to the posted opportunities.
The company was losing volunteers and needed a better way to engage them in the opportunities and non-profits on the platform.
We started brainstorming, "how might we better connect volunteers to non-profit’s opportunities to increase volunteer engagement and retention?"

Observation

I noted down some potential pain points in the user flow of previous profile design that could hinder non-profit discovery process for volunteers and vice versa.

Visual + Interaction Research

Ambiguous hierarchy of information

The previous profile displayed different sections of the profile in blocks, making it hard to see which information to focus on at a glance.

Missing social aspect

Volunteers couldn’t directly reach out to NGOs they want to work with and vice versa.

Unflexible layout

We couldn’t find effective ways to add features to profiles without lengthening the vertical scrolling due to unflexible layout design.

Lack of Personalization

There was not much room for customization for users to showcase their niche and make their profile unique. The experience of viewing other people’s profile was monotonous and boring.

The Goal

With the profile revamp, we wanted to create a flexible and engaging design that allows our users showcase their unique personalities and passions. This would make the profile viewing experience more engaging, as well as better link volunteers to organizations that share the same vision as them.

Research

Each non-profit on our platform is important and unique. But the current profile wasn’t demonstrating the full potential of what each organization is about and the causes they support. We researched how we can better tell the story of the non-profits through the profile as we believed this will pique volunteer’s interest to support the cause and part take in the opportunities.
More volunteer engagement meant more retention of users on the MeaningfulWork platform.

15 + non-profit websites

Upon looking at several different non-profit websites, we noticed some recurring characteristics:

  • Large hero images and mission statement
  • Infographic of impact metrics
  • Impact areas represented in a visual form
  • Featured movements or projects

Competitor Apps

Many of our competitors did an excellent job of outlining the organizations' cause areas and impact data, but they lacked visual engagement.

Popular Communication Apps

We also looked into more communication-focused platforms like Facebook and LinkedIn as their user interfaces are more geared towards connecting different individuals. We found these pages to be generally more engaging and interactive.

research Take-away

  • Nonprofits value clarity in communicating their mission and their accomplishments.
  • Nonprofits like to represent themselves visually, using infographics, photos, and videos to evoke empathy and cater to diverse audiences.
  • Use of cover images to allow personalization by individual users.
  • A clear separation between the account section and more info section to allow ease of navigation.

Design process in a nutshell

Conducting the research gave us guidance on what content to prioritize and the look & feel we want to pursue with our layout. Displaying impact metrics was an important factor in making each non-profit profile unique from others. But since our impact feature was still under construction, we needed to come up with a MVP (minimum viable product) design that fulfilled our values while being flexible enough to incorporate future profile features. We also needed to keep in mind the dev team’s capabilities to implement our designs.

Handover to dev team

Once the final design has been approved by the team, I updated the MeaningfulWork’s Figma design system with profile’s new components. I created dev-handover document for the final profile design which includes all the necessary mobile/desktop designs for different user flows as well as the specs and states of the new components needed by the dev team.

New Component
Documentation

Instagram |LinkedIN |
© Katie Park, 2022