Redesign Zeles Volunteer App
Zeles app redesign improves volunteers’ experience and design aesthetic, making it more intuitive and enjoyable to use. Launched in 2017, Zeles is a mobile app that connects volunteers to Non-Profit Organisations (NPO) activities.
Role: Usability research, support user interface design
Team: Beverley Ongah, Ember Chew, Rachel Lim, Tiffany Liang
Year: 2019
Prototype: Link
Part 1: Overview
Zeles has two distinct user types
To start, we requested a list of users we can interview from the founders. From the list, we found out there are two distinct group of volunteers.
👵🏻 Regular Volunteers
Made up of retirees age 50s-60s. Use Zeles as social platform.
👩🏻💼 🧑🏻💼 Ad-hoc Volunteers
Made up of students and working adults in 20s-30s. Usually participate in a one-off activity.
👵🏻 Regular Volunteers
Made up of retirees age 50s-60s. Use Zeles as social platform.
👩🏻💼 🧑🏻💼 Ad-hoc Volunteers
Made up of students and working adults in 20s-30s. Usually participate in a one-off activity.
Designing for the elderlies
As the elderlies made up a huge percentage of the user base, it is important the user interface is optimized for senior users.︎ Large click target
![]()
Click target height: 45px
Click target height: 45px
︎ Bigger font size
![]()
Min font size: 16pt
Min font size: 16pt
Our first step is to find out if there’s a reason to redesign.
Existing App
Usability testing reveals users’ top challenges. 90% of the volunteers fail to join an activity, which is the app most important task.
![]()
︎ Not familiar with interface and label naming.
︎ Menus are hidden
︎ Overwhelmed by the amount of information
︎ App doesn’t look like volunteer platform
Proposed solution
The team identified few key areas we can work on.︎ Follow common volunteer app design convention
︎ Reduce visual clutter and simplify copy
︎ Redesign app styling
Relook into menu navigation with content audit
Next, we look into existing navigation in the app. The issues with existing navigation hierarchy:- Too many menus at the same layer
- Conceptual overlap between menu categories
- Menu options are cluttered
Existing: Flat Navigation HierarchySolution: Reduce breadth of navigation by 50%
Due to time constraint, the team did card sorting to rearrange the menu information based on our intuition and competitive analysis. This arrangement proves to work when we did usability testing later on.
Due to time constraint, the team did card sorting to rearrange the menu information based on our intuition and competitive analysis. This arrangement proves to work when we did usability testing later on.
New: Reduce breadth of navigation
Part 2: Design Details
Quick and easy Sign Up
- Introduce Zeles with a liner
-
Request only required information for sign up
-
No indication what the app is
- Long and complicated sign up form
Introduce new users onboarding feature
- First-time users can personalize dashboard activity by selecting desired causes to support.
- In-app onboarding tutorial is also introduced to help learnability.
Left: Personalization, Right: In-app onboarding tutorial with overlayIntroduce Zeles Unique Selling Point: VoHours (Volunteer Hours)
Unique Behaviour: We identify a unique user behaviour as an opportunity to differentiate Zeles from its peers. We found out users are reluctant to exchange their VoPoints with rewards as it will deplete the points displayed in homepage, making it seems like they did not volunteer as much.
Solution: We introduce VoHours (Volunteer Hours). While VoPoints will go up and down, the hours clocked will only increase.
Display hours clocked as a feel-good element
Bottom navigation bar as top level navigation
From content audit exercise, breadth of navigation is narrowed down to 5 top-level menus and displayed as bottom navigation. This allows users to easily explore and switch between top-level content with a single tap.
New: Bottom navigation | Existing: Hamburger menu
Empty State
Success Metri
︎︎︎+90% Increase in task completion rate
Usability Testing on the new prototype shows huge improvement over the current expereince.
Majority of volunteers convey their satisfaction with comments like “Can’t wait to see it launch!”. Reduced ‘fail’ and ‘succeed with difficulty’ scenarios prove users are able to use the app easily and quickly.
Majority of volunteers convey their satisfaction with comments like “Can’t wait to see it launch!”. Reduced ‘fail’ and ‘succeed with difficulty’ scenarios prove users are able to use the app easily and quickly.
What’s Next?
- Recommend activities based on users’ behaviour and interest with AI-powered recommendation system.
- Expand to website to complement the app. For people who prefer to browse on bigger screen.
- Connect Zeles with various social media platform
Next project
