Designed for Joy Mobile App Design

The goal of this project was to develop a design and prototype for an app for the local organization Designed for Joy, executing every part of the design life cycle like conducting user research, defining use cases, drawing user flows, creating an interactive prototype, and performing usability testing.

What is Designed for Joy (DFJ)?

Raleigh-based nonprofit

Provides transitional work experience for women coming from trafficking, homelessness, time in prison, overcoming addiction or other vulnerable situations

Provides living wage work hours while building confidence and refreshing resumes

Items made during work experience are sold in the online storefront to help support the cause

https://www.designedforjoy.com/

Problem Description

Currently, volunteer hours are logged by hand on paper
It can be hard to keep track of hours volunteered and to keep up with the hours on paper forms for grant purposes
Desire to create an app that has this function as well as providing a seamless experience for regular donors to donate and for event announcements

User Research and Analysis

*Could not meet with actual volunteers given circumstances around COVID-19

We had an in-depth interview with DFJ management
- We prefaced the interview the following broad questions sent through email:
  - What's the purpose of the app?
  - How will it be used within the organization?
  - Who will be the primary and secondary users?
- We wanted to collect the following information about users through our interview:
  - Age, gender
  - Perceptual ability, motor skills, physical disabilities
  - Level of education, native language, knowledge of particular terminology
  - Computer literacy, level of experience with similar systems, level of experience with tasks
  - Attitudes, motivation to use the system
By the end of our review, we had the following information, with digital software literacy primarily coming from knowledge of tasks that volunteers already did through their volunteer work like using the Square iPad app to process transactions:

Using this information, we created the following two personas using Canva, one for a volunteer and one for a donor:

Donor

Volunteer

Use Cases and Task Analysis

After creating our personas, we defined our essential use cases and performed a task analysis for each main feature.

Donation

Essential Use Cases:

1. Visit the donate page

System displays donation information and preset options

2. Select a donation option

System gives amount and payment options

3. Pay with a bank account or card

System prompts the user for relevant information

4. See that payment has gone through

System provides feedback

RSVP for events

Essential Use Cases:

1. Visit the events page

System displays scrollable page with event previews

2. Visit chosen event page

System displays details and RSVP option

3. RSVP

System provides a relevant RSVP form or take to external registration

4. See confirmation

System provides feedback

Volunteer log

Essential Use Cases:

1. Visit volunteer hour page

System shows page with log

2. Clock in after arriving

System records start time, start timer

3. Clock out after finishing

System ends timer, records end time

4. View log and summary

System displays log and summary

Design Decisions

After performing the task analysis and defining use cases, we laid out our major design decisions:

1. Direct users to relevant app features

Volunteers have to login to enable the volunteer log feature; other user groups can choose to skip the step.

2. Generate a user-friendly volunteer time management feature

Provide an intuitive process to record and view volunteer hours
Integrate clocking volunteer hours into existing account system

3. Integrate event announcement and registration pages into one feature

Display important event info on the front page
Allow users to register for the event and send a calendar invitation to their mobile phone

4. Include the existing donation plug-in

Utilize (or mimic for design purposes) existing donation plugin (GiveLively used on the DFJ website)

5. Make sure all design elements follow DFJ's branding guidelines

Stay consistent with existing DFJ style with particular focus on DFJ logo colors

System Architecture

We next laid out a visual illustration of the system architecture:

Prototype

Having a good understanding of the system and features, we created a high-fidelity interactive prototype using Adobe XD. The following are 4 of the 31 screens in our prototype which showcase the splash screen, the volunteer hours work log, the donation page, and the events page as a preview. I have also included the link to the full prototype below:

Click here for the full interactive prototype

*This was a collaborative effort as part of a group project. I do not take sole credit for this work. Sections of this page are sourced from our group report and presentation.