Context

This case study consists on the website redesign of União Zoófila, a non-profit portuguese association that rescues pets from difficult situations. The project was developed by a team of 4 and I was responsible for designing the subscription process to the pet's sponsorship program, from ux research to final user interface. For the purpose of this case study I will only detailed explain the subscription process (for which I'm the sole responsible).

SCOPE

UX & UI design

TIMELINE

3 weeks

The challenge

DELIVERABLES

User interviews

Affinity mapping

Competitive analysis

Paper wireframes

User flows

Mid-fidelity wireframes

Usability testing

Design style guide

Prototyping

Analyse União Zoófila website and services and redesign their user onboarding flow, sponsorship subscription and sponsorship cancellation process.

• The main goal for the sponsorship subscription process was to identify pain points and redesign it in a way that improves the overall user experience.

Note: since this was developed for a small portuguese association, all screens (paper/mid fidelity wireframes and final prototype) are in portuguese.

TOOLS

Figma

Design approach

Discovery

Usability testing

It was conducted usability tests on 5 users. They were asked to perform a specific task: go to União zoófila's website and sponsor an pet (cat or dog). I recorded their interaction with the website and asked them to voice their steps and thoughts while going through the process.

Analising the sponsorship subscription process

Sponsorship subscription process scheme analysis (based on user tests findings)

User interviews

After the usability testing it was conducted in-person interviews to the 5 users.

• Why the user decides to sponsor animals.

• What are the user likes and dislikes about the current process of sponsoring animals of União Zoófila

• What are the user's expectations when sponsoring an animal.

Interview goals

Affinity mapping

I mapped out user responses with an affinity diagram and grouped them based on wants, needs and frustrations. My goal was to see what were the common pain points between users when subscribing to the sponsor program.

Competitive Analysis

Before I continued to the next stage I did a complete competitive analysis of both direct and indirect competitors. I analyzed similar associations that have sponsorship programs to see the strengths/weaknesses of how they communicate with their users. I also analyzed non related businesses that have onboarding/subscriptions processes, this way I could have a better understanding of what works best. Below is a summary of positive insights I took from this analysis.

Define

Persona

Having gathered all information from the user research and analysed all the commonalities between users (needs and frustrations of the sponsorship subscription) I created a persona representing the larger group.

User flow

To start mapping the path our user would have to take to complete the sponsorship subscription I developed a user flow.

Ideation & Design

Paper wireframes: usability testing

Having defined a possible path to complete te subscription (with the previous user flow) I designed paper wireframes in more detail. I did a prototype in figma and did usability tests with potential users. The aim of this prototypes was to verify how users would interact with the interface. I also intended to start testing the writing, so I wrote the first drafts of real texts to start having feedback from users.

Usability tests key findings:

Note: Having followed the mobile first approach, all wireframes and final prototype were designed for mobile.

Mid-fidelity wireframes

Having in account the previous usability tests fidings I developed the mid-fidelity wireframes and did a prototype in figma to test again with potential users. The usability tests didn't reveal any difficulties in interacting with the interface.

User Interface

Design style guide

To design the visual interface I started defining the style guide. The brand color of União Zoófila's association is orange so I opted to use a complementary color scheme: blue and orange. In this style guide are represented the te color scheme, typography and the components used on the subscription process.

Visual design & final prototype

I designed the final visual design of the website and did a prototype in Figma:

Sponsorship page

• Sponsorship page has a detailed but concise explanation of what it means to be a sponsor (use of iconography) .

• Each subscription parameter: contributions extra contributions, visits and payment appear one screen at a time. Making the process seem smaller and less overwhelming to the user

Subscription process

• Fixed buttons on scroll, so the user can at any time move on to the pet selection.

Pet selection page

• Filters with important prioritizing factors according to the user's research: no sponsor, senior, health.

Final interactive prototype

Note: at the end of this chapter is the figma prototype that can be tested.