Overview

Communiteer is a web based volunteering platform that aims to make volunteering a more accessible and personal experience for it’s users.

We set out to create a MVP for a mobile app, that could be developed in accordance to Communiteer’s overall 2024 goal to acquire more student volunteers.

Duration: August 2022 - September 2023 (5 weeks)

Role: UI design Intern (Part Time)

Responsibilities: Student Research, Information Architecture, User Flows, User Testing & Figma Prototyping

Teammates: Designers (Jonathan Kraft, Aashia Aljabri), Product Manager (Alexander Barros), 2 developers from Ethos Bytes Development (Ronald Cheung, Juliet Espadilla).

PROBLEM STATEMENT

When trying to onboard university students Communiteer’s non-responsive web based platform is a big point of friction

In the past Communiteer was focused on building a web first experience for corporate volunteers. However, after receiving funding from the government, the scrappy start up now needed to update it’s user journey to capture student attention.

THE SOLUTION

An app with an updated visual design that resonates with university students

OUR DESIGN PROCESS

While information in this case study will be presented in a linear fashion, In practice we were jumping around between different phases.

As information from our users was uncovered through our different research efforts, we were then able to make adjustments to our designs.

DISCOVERY

Understanding the design preferences of university students

Communiteer up until this point had not yet conducted research into the design preferences of university students in Australia. In order to inform the design language of the app, I took it upon myself to investigate this problem space.

BACKGROUND RESEARCH

Gen-z brands build their identity through their marketing materials not through the visual design of their app

After an analysis of popular gen-z apps such as BeREal and UP Bank I was surprised to see that these apps were quite minimal in their visual design. What gave these brands their gen-z appeal was the surrounding marketing material and tone of voice adopted. Rather than the visual design of the app itself.

Discovering University Student’s Taste in App Design through a Survey

After conducting background research I created a survey to compare different app designs that I found on dribbble. These were all designs that were rated highly by the users of the website. This survey was sent out to students within the Communiteer volunteer network. While we waited for responses to the questionnaire we began the process of simplifying the app concept.

DEFINE

Prioritising App Features

Before we could work together to create a prototype in figma we needed to reach a consensus on the information architecture of the app.

A rough map of the information architecture of the blue sky prototype (left) compared to iteration 1 of the mvp (right).

For the MVP our priority was the experience of onboarding, finding and joining the first volunteering opportunity. With this in mind, retentive features such as the impact garden and groups were removed. Keeping features that would only matter a couple months into the user journey would be a misallocation of resources.

The map view was also cut out. This decision was more difficult to reach a consensus on internally. While having a map in the app to showcase the close by opportunities had the potential to be a pleasurable interaction, it would be secondary to the search feature in the explore tab.

Results and Insights from the Student Survey

Based on the 38 responses to the survey we were able to identify that students wanted their volunteering app to have focused screens with a minimal design approach that uses colour and illustration with consideration.

USER TESTING

4 Major Changes Made to the Design

Now that we had the information architecture mapped out, we translated it to a Figma prototype. We already had the work from the prior design sprint so we stuck to the visual design that had already been established. The decision to user test was made last minute so we had to settle for a user testing cycle with 3 users.

FINAL ROUND OF USER TESTING

Validating The Design and Making Changes While Working Around The Developer’s Workflow

After apply the last round of changes, we had to then submit the design for storyboarding and pointing with the development team. We came to realize that we could still address glaring issues in our design if any were uncovered in testing. Doing so would require communication with the developers, and us to update the Jira tickets in the backlog.

What did our users have to say about our MVP?

This time around we made sure to recruit 5 users to test who more accurately reflected our target demographic.

  • Students liked the layout of the updated dashboard.

  • They felt like the app was easy to navigate.

  • Students described the visual design as calming and intuitive.

The Final Product

Reflection

This project was my first project at Communiteer and my first project working within a team that included developers, marketing and other roles that promoted cross contamination of ideas. Here are some of the lessons I learnt:

  1. User Testing is key in justifying design decisions. When working in a team and attempting to reach consensus on different design decisions I often found discussions reaching a stale mate. One example that stands out is the toggleable filters on the feed. This was an idea I had during iteration 2 that was rejected by the project manager. However after testing it with our 5 users and presenting the insights the project manager was much more willing to take my suggestions on board.

  2. Designing for errors and system status updates needs to be factored into design time. When designing the onboarding I had been made aware of the requirement for error screens. This was something I had not thought about as my student projects were often focused on the ideal user journey. In the future I would like to be more proactive in designing all possible user flows.

  3. Documentation and clear labelling is important when working with multiple teams. Due to the part time nature of my internship and our strict deadlines, work was often being passed around between designers. Once work was completed the work was sent to developers. It was important that frames and layers were clearly labelled. Especially later on when trying to make the files into working prototypes.

Why not read another case study?

Helping Parents identify their parental knowledge gaps and providing them a framework to improve.

Journee was my capstone university project that begun as research and led to the design of a fully functional MVP. Gamification helps the app provide a personalized and engaging experience for busy parents.