Physico Mobile App
WHAT IT IS

A website redesign for a local nonprofit

MAIN GOAL

Create an experience where people could sign up to volunteer online instead of having to make a phone call

AUDIENCE

People interested in volunteering, or businesses who want to donate books

WHY I MADE IT

When I volunteered with them, I saw the opportunity to improve their sign up the experience. Through design, they could diminish the amount of calls they receive.

MY ROLE

UX and Visual Designer

STEPS I TOOK

Personas, Empathy Map, Journey Mapping, Site Map & Wireframes

HOW I DID IT

Getting to know the users and their needs

To better understand the challenges of their users, I created personas. This helped me gain more insights about the different types of users that would visit the website.

BFA Persona
BFA Persona
DISCOVERY FROM PERSONAS

From personas, I established the order in which the content is laid out.

See it

Putting myself in their shoes

This step helped me figure out the possible frustration points the user could have while on the BFA website.

BFA Empathy Map
BFA Empathy Map
STEP I TOOK

I added a "Donate" sticky button that would give the user easy access to the donation information.

Figuring out Maria’s journey

Creating a journey map helped me understand which pages needed to connect with others.

Customer Journey Map
Customer Journey Map

Establishing a simple navigation

I did several rounds of card sorting with some classmates to figure out the best way to group their existing content. The result was a simple navigation that won't have confusing subheadings.

SITE MAP
Site Map

Making several prototypes

By creating and testing different protoytpes, I could quickly tell what areas needed to be more refined.

Other apps that helped
Other apps that helped
DISCOVERY FROM PROTOTYPING

By testing it, I realized I need to include more options on the sign-up form. I added the option for big groups to be able to sign up too.

A new look to represent their values

I designed two contrasting style tiles and tested them with some colleagues. With their feedback, I chose the one that best represented their altruistic values.

Style Tile
Style Tile

Putting a story to the prototype to make sure it works

I created a prototype that followed Maria's story to verify the design worked correctly.

*Red Dot represents Maria's touchpoints.
THINGS I LEARNED
  • Both the empathy map and customer journey map made realize the importance of focusing on humans when designing interfaces.
  • Moving quickly and fixing problems along the way was critical for me. I learned this while creating quick prototypes and user testing them.
  • I played a lot of color, scale, and typography. This helped me determine a better visual hierarchy for content heavy pages.