Case Study: On-boarding for Success
This UX/UI design case study outlines the process I went through with my team at Red Academy to validate the CommuniHelp app concept, design a simple intuitive on-boarding process and create the brand look and feel.
Client: CommuniHelp
Project Length: Three week sprint
Team: Natalie Black (UX), Nadia Hogg (UX), Kiersten P. Mosley (UX/UI)
Previewing the app
My final project at Red Academy — a non-profit app called CommuniHelp. It is the brainchild of a duo who are using their off-work hours to make skill-based volunteering more accessible to their generation.
The current app design front-loads the volunteer’s information and preferences through a series of onboarding screens. The user’s data is then filtered to match opportunities from a listings database provided by organizations looking for skilled volunteers.
CommuniHelp already has a team donating their time for UX design, UI design, web development and marketing, however, they wanted us to:
Validate the product idea
Optimize the volunteer on-boarding process to discourage drop-offs
Create the user interface
The ‘Re-search’
Once we reviewed CommuniHelp’s research findings and glimpsed their current prototype, we began our own UX design process from scratch. The first couple of sprint days were spent reading and logging findings from over 50 studies and we were able to validate the current volunteer landscape in Canada:
44% of Canadians spent 2 billion hours volunteering in 2013
77% of these volunteers want to use their skills when volunteering
63% want to use volunteering to gain experience
44% of volunteers under 35 seek skilled volunteering to boost job prospects
We also confirmed five of their seven volunteering causes, however, they were missing the third top cause, religion. Even though on the decline, especially with younger generations, we advised that religion be included in the cause section of their app.
Social Services — 20%
Sports & Recreation — 18%
Religion — 15%
Education and Research — 11%
Arts and Culture — 6%
Health — 5%
We then conducted a survey and a mini interview session with a group of Millennials. As I compared our data to CommuniHelp’s volunteer personas, I found that their male volunteer, Seasoned Steve, was more likely a Gen Xer and their female Millennial, Busy Betty, was actually two people — a GenY.1 (1990 to 1996; 21–27) AND a GenY.2 (1980 to 1989; 28–37).
These small but significant findings can be useful in many ways. For example, when marketing, the Active GenY.1 is motivated by her ego; whereas, the Occasional GenY.2, is motivated by the cause. Also, since the GenY.1 is largely active on Facebook and the GenY.2 on LinkedIn, both social medias should be present as options for the CommuniHelp app login.
Next, we looked at different domains — everything from volunteer and job hunting to dating and classifieds. We screen capped and discussed feature lists, common themes, and the pros/cons of different processes.
Filtering for best results
Usually the UX process is split into five stages, but we overlapped planning, designing, prototyping and testing to develop the on-boarding process. With each iteration we came closer to our ideal, however I felt like we were missing something. We went back to the whiteboards for what would be our last rapid ideation session.
As a team, we optimized the on-boarding process even further:
- Leveraged Facebook and LinkedIn to simplify login without impacting security.
- Rationalized downloading of the app showed engagement, therefore ‘guest user’ was no longer necessary.
- Allowed users to search via Google’s API to reveal opportunities upfront which creates instant gratification and reduces drop-off.
- Further filter (location, duration, etc) to enabled the user to find opportunities more aligned to their needs.
- Having a numeric indicator of results throughout to showcase value and precision.
We also identified the missing something — “The CH Match” — the engine of the app that creates gradual engagement and progressive disclose. Designed as an isolated minimal user flow, it captures the volunteer’s cause interests, skill level and desired volunteer type. By leveraging the algorithm developed by CommuniHelp’s web dev, the number of opportunities simultaneously increases or decreases with the change in data. The result is an ideal match between volunteer and organizational opportunities.
Applying my skills
In addition to participating in the UX design process with a focus on the personas and “The CH Match”, I developed the user interface. CommuniHelp already was on their second logo design and was using a green-blue gradient. Leveraging my Art Director background, I validated the colour choice as representative of skills and charity, however I wanted to add complementary colour to create visual interest and hierarchy among elements. I chose tones to align with the GenY and GenX audience.
For brand cohesion, I curated an image library (purchasable through iStock) of people happily working in volunteer positions and reflective of the colour scheme.
I chose web safe fonts with readability in mind — Open Sans for body and Museo for headlines, call-outs and button copy. The rounded serif of Museo is fresh and when used in a heavier weight maintains legibility. To ensure AA accessibility, size and colour contrast of typefaces were top of mind.
Recommendations
Through our research we identified the need for additional filters and ways to monetize the app. We found segments that are interested in alternative durations — episodic and micro-volunteering; segments looking for group opportunities; and an increased interest in using skills virtually.
Online we located calculators that attach a monetary value to volunteering. By incorporating this for an optional fee upgrade, volunteers could use the results in their resumes.
Already incorporated in our design is a method commonly used by social enterprises — paid advertising. For a nominal fee, organizations can showcase their opportunities in a feature area (above the listings) that horizontally scrolls promoted ads.
Lastly, we presented a way to optimize the app store experience and convert more users by showcasing the features upfront and their value to volunteers in a suggested hi-res layout.
A successful match
When doing sprints, teams always consider what is achievable in the time frame. In our case, the three weeks produced a considerable volume of information. Not only did we validate the need for the CommuniHelp app, created a fresh user interface, and provided recommendations, we optimized on-boarding and created the engine process for a successful match.
