Behind the Scenes of DriveBuddy

A web-based app designed to connect elderly users with volunteers for everyday support tasks.

Role
UX Research
UX / UI Design
Branding
Prototyping

Team
4 designers
4 developers

Duration
April – July 2024 (13 weeks)

Highlights
Best Web Product Award

🎬 Demo First?
Here’s a quick demo if you’d rather watch than scroll.
(But if you stick around, the case study goes deeper—because I want to show just how much heart, teamwork, and thinking went into this project 💛)

The Problem

19.3%

of Canada’s total population is seniors as of 2023
Increasing pressure to ensure adequate support in areas such as health care and home care, transportation etc.

The Solution

Meet Favr

Discover

Each team member conducted user interviews with elderly individuals, their family members, and potential volunteers to understand their needs, concerns, and motivations.

I’m grateful to our devs for pitching in on user interviews — not their job, but their help brought in richer insights and better early decisions.

Based on our findings, we created user personas representing each group to guide the user experience across different touchpoints.

Define

We brainstormed possible features and solutions and created user flows and a site map to visualize how users would navigate through the product and complete key tasks.

The overview. Click the picture to see full site map and user flows in Figma

Design

Getting Started with Wireframes – Baby Steps
Only one of us had product design experience, so he led the way. To help us start, we mapped out the information structure in three tiers. We used only text and simple screen shapes to lay things out clearly (see example below), which really helped beginners like me figure out where to start.

An example of the information structure. Click the picture to see them all in Figma

Even though we were designing a web app, we kept responsive design in mind from the very beginning, so we created wireframes for both versions side by side.

An example. Click picture to see all the wireframes in Figma

Visual Direction Setup

  • Chose 3 adjectives to define the desired look and feel: Trustworthy, Helpful, Caring
  • Used them as a guide for mood, tone, and branding choices
  • Explored logo ideas, color palettes, and typography based on those keywords
The final logo

Below are some logo and branding explorations from the team—not selected, but full of heart and a fun part of the process.

After each designer explored logo, type, and color options, we voted as a team to finalize the visual direction.
From there, we began building the UI kit and mockups in parallel. Since most designers were new to design systems, our design lead took the lead on creating a solid library the rest of us could build on confidently.

Mockups

  • Focused on simplicity, readability, and large touch targets
  • Designed with accessibility and ease of use in mind

Prototype and Testing

We built full interactive prototype in Figma for the usability testing

Click the picture to try the prototype for yourself!
  • Ran tests with a script, recorded results in spreadsheet + video
  • Discussed findings with devs → prioritized changes based on timeline
  • Iterated design + devs updated code

QA: tested final build, reported bugs via GitHub for easy tracking

Click the picture to see our app on GitHub

Deliver

With smooth collaboration and clear communication throughout, delivering the final product felt like a natural finish to a strong team effort.
Check out Favr: https://favr.onrender.com/

Reflections

Completion > Perfection

One of the biggest lessons I’ve learned: don’t wait to be “ready.” Just start.
I used to spend too much time trying to optimize my input—preparing, researching, organizing—hoping I’d get things “perfect” before making anything. But good work doesn’t come from perfect prep. It comes from putting something out there, learning from it, and iterating.
No one laughed when my first drafts weren’t good. In fact, getting feedback and moving forward fast is how you get good. So now I try to fail fast, learn quickly, and prioritize progress over perfection.

Teamwork is everything

The best teams aren’t just about dividing tasks—they’re about supporting each other.
Respecting everyone’s time, giving clear and kind feedback, not taking things personally, and being open to help or advice—these were the things that made our collaboration strong.
We had teammates who crossed disciplines: a former UX designer now in the dev stream who offered thoughtful suggestions, and a developer with a sharp design eye who gave constant design feedback. That kind of cross-pollination made the project stronger—and reminded me that great design doesn’t happen in a vacuum.

Surround yourself with the right people

Writing this case study after graduating from this amazing program, I can’t help but feel proud of how far I’ve come. When we started, I didn’t even know what a design library was—let alone how to begin a wireframe. By the final term, so much started to feel natural.
What made that growth possible wasn’t just practice, but the people around me. I was lucky to work with experienced, generous teammates like our design lead, Jason. He could’ve jumped straight into mockups, but instead, he took time to guide us through approachable steps—starting with information structure before wireframing. (I know, you don’t usually hear that in a textbook.)
That kind of patience and support created the kind of learning environment where people actually grow. I’ll never forget it.

Let’s Work Together!

Now accepting new projects, cool collaborations & cat memes.