Subscription process redesign
UX & UI design
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.