UX Case - Good Time App

UX Academy, UX Prototype course

Role: User research, UX Design & Prototyping
Timeline: September 2021
Tools: Figma, InDesign, Miro, Marvel, Pencil & Paper

During the project, I kept the Design Thinking methodology in mind.


Introduction

Let's turn back the clock ⏰! A few years ago, I dove into a volunteer gig, teaching Dutch to a Syrian refugee. This meant dedicating a solid 2-3 hours every week. Balancing this with work, sports, and social life was no walk in the park, but my friends often quipped, "I'd love to do that!" or "Girl, where do you find the time?" These remarks revealed the barriers to volunteering, which. And that’s a shame. Because – in my opinion – it is as good for the one you help as it is for yourself. You do good with your time, and that is time well spent! That's why I set out to create an app where you decide when and how much you want to help. 🌟


For everyone who wants to give a helping ✋🏻✋🏼✋✋🏾✋🏿

 
  1. Research

Competitive
Analysis

The initial step in my research was a competitive analysis. It unveiled competitors' strengths and weaknesses, guiding us to determine the product's unique value proposition and differentiation.

 
Competitive Analysis Buddyhulp. Weak: a lot of text (not easy to find information), you have to commit for 2 hours, only one type of work. Neutral: Only a website, no App available.
Competitive Analysis NL Cares. Weak: Only in Randstad. Neutral: Only a website, no App available. Only offers supply (no demand). Good: good filter options. Offers different types of work.
Competitive Analysis Platform Vrijwillige Inzet. Weak: looks outdated. Unclear navigation. It's hard to find information, there is a information overload. Good: Via postal code able to find work.
Competitive Analysis Speak. Neutral: volunteer job for online. Worldwide. Focussed on one theme (learning a language). Good: content and information is visually displayed. Easy to find information.

Interviews

To get to know my potential App users a bit better, I interviewed potential users.

I created an interview guide. The questions are classified according to the steps of the customer journey (awareness, consideration, transaction, service, and loyalty).

With the outcome of these interviews, I created my personas and it helped me create my journey map.

 

2. Empathize

Personas

To empathize with my potential users, I created 2 persona’s, based on my user research.

 

User Journey

In order to map the insights from the user research, I created a User Journey Map of the awareness and consideration stage of Shamira.

Current State Journey Map - The beginning of volunteering for Shamira
 

3. Ideation

Opportunities

Thanks to the User Journey Map, I have an idea of the possible features of the app.

 Overview of the Opportunities

  • Help people during their search with a variety of filter options

  • Use user reviews to support people during the search

  • Make clear how the process works with a step-by-step plan

  • Make the process a bit more playful, and offer ‘matchmaking’ to find your perfect volunteer work match

Prioritization

Now we have a better sense of which problems we have to solve, we can prioritize them with the help of the NUF-Method (New, Useful, Feasible). We can use the opportunities that came out of the User Journey Map and we added one extra idea which was mentioned during the interviews (to plan and book activities with friends).

According to the NUF-method the opportunity ‘Tinder’ scored the lowest compared to the other 4 opportunities. That’s why we decided to exclude this feature from the prototype for now.

NUF-method showing the features: plan/book activity with friends. Filter system for work categories. Uses reviews. Tinder to find your type of work. Step-by-step plan of the process.
 

4. Prototype

Sitemap

I created a site map to show how the app could be organized. This map can be a discussion point when talking this through with the client. The pages in red are the ones I included in my wireframes and prototype.

Sitemap with a red marked track which represents the flow of booking a volunteer activity.

Wireframes

With the research, personas, and ideation in mind, I started to draw my first low-fidelity wireframes on paper. After a few iterations, I selected the ones which represented the NUF-method priorities the best. Then, I tested the paper wireframes with my classmates, using the Marvel Prototype app.

After the sketches on paper, I made high-fidelity frames in Figma.

Wireframes of the booking process of Shamira.

Prototype

After a few iterations on my high-fidelity wireframes, I created a clickable prototype in Figma. The prototype is used to give a visual view of how the app would look and function and can be tested with end-users.

 

Reflect

What have I learned from this project?

Process
They say a good start is half the battle. You can see this case as proof ;-). Because I started this project with solid research, the ideation process was peanuts 🥜! My research made the ideation process easy and structured.

The second key insight is that it’s important to spend some time creating good personas. What are the ways your personas browse the internet? Which channels do they use? If this is clear, it will help you later on in the process of Prototype.


Personal
When I started the Prototyping course at the UX Academy, I had finished the first course which taught me the fundamentals of UX Design. I already learned about the UX design process, how to draw wireframes, and so on, but I didn’t know yet how to make a clickable prototype. I knew my way how to create flows in Figma, but this course opened a whole new world of interactions and animations.

I feel more confident and structured working with Figma. Now I know how to make assets, components, and a clickable prototype to bring wireframes to life!

Tip 💡: Figma has a great community to learn from! Exploring this community can help you with your designs in many ways!

Previous
Previous

UX (volunteer) - Research

Next
Next

UX Case - Plan & Play