ROLE: LEAD UX&UI DESIGNER (RESEARCH, INTERACTION DESIGN, VISUAL DESIGN)
CLIENT: CHANCE
TIMELINE: 80 HOURS OVER 4 WEEKS
PROJECT DETAILS
CLIENT | CHANCE
ROLE | LEAD UX & UI DESIGNER (RESEARCH, INTERACTION & VISUAL DESIGNER)
TOOLS USED:
Research: Secondary Research, Industry Research, Competitive Analysis, Provisional Persona, Interviews, Observation.
Synthesis: Empathy Map, User Persona, Pencil & Paper.
Product Strategy & Ideation: POV Statements & HMW Questions, Brainstorming, User & Business Goals, Product Roadmap, Site Map.
Interaction Design & Testing: Low, Mid and High Fidelity Wireframes, Pencil & Paper, User Flow, Task Flow, Prototype, User Testing, UI Kit, Branding, Sketch App and Marvel.
THE CHALLENGE
Design a brand and responsive website that covers core functionality: search for pets, information about specific pets, and information about Chance/shelters.
THE OUTCOME
An all-new branded responsive website design that makes it easier for users to search for adoptable pets, find information about shelters and learn about opportunities to help with Chance's mission.
BACKGROUND
Chance is an association of animal shelters. They partner with shelters all over the country to raise awareness and foster the discoverability of pets waiting for a home. By partnering with shelters all over the country—and eventually worldwide—they want to create a platform that allows people to see all the available animals in any shelter close (or not) to them. Awareness and discoverability are the primary things Chance wants to address. Besides investing in a responsive website to help people discover animals and learn more about shelters, Chance has plans to create a website for shelters to upload animal information easily.
RESEARCH & DISCOVERY
MARKET & INDUSTRY RESEARCH
I began this project with secondary industry research of market trends and a competitive analysis. This helped me contextualize Chance's situation. What I learned is that animal associations have been working with shelters to raise pet adoptoin awareness since before 2014. Because of animal welfare advocacy groups and other organizations, nonprofit shelters are able to secure funding for pet care and additional services, including microchip implantation and sterilization services. With additional services that shelters are providing, the goal is to continue raising pet adoption awareness and to continue educating people about pet sterilization and how it can help with pet overpopulation.
Threats and Challenges
Animal Breeders
Pet Stores
Puppy Mills
Lack of visibility
State budgetary issues that results in municipalities cutting down on aimal shelter funding
Obtaining more funding
Opportunities
Ability to secure funding from animal welfare advocacy groups and other organizations
Raising awareness and discoverablity for pet adoption
The growth of shelters and organizations in the digital space
The increasing percentage of households that have rescued thier pet/s from a shelter
You can find the summary of my secondary research including the competitive analysis here.
PROVISIONAL PERSONAS
Guided by my secondary research, I based each persona around behavioral patterns. I created provisional personas to begin thinking about who might make up Chance's user base. These provisional personas helped bring focus to my contextual inquiry questions and allowed me to have a good starting point for testing my assumptions.
CONTEXTUAL INQUIRY
Informed by my secondary research, I developed a list of questions and an interview guide to structure my contextual inquiry. My interview guide went through basic questions asking people about their experience when looking for a pet and if they consider adopting a pet.
You can find my interview guide here.
ASSUMPTION I HOPED TO TO VALIDATE OR DISPROVE:
People have little to no awareness of animal shelters.
There is a stigma when it comes to animal shelters.
People choose to not be educated regarding pet care and awareness.
People have a more positve view on pet stores and breeders.
People don’t feel animal shelter pets are healthy or shiny and new. They want the shiny puppy experience
SYNTHESIS & DEFINING
UNCOVERING INSIGHTS & IDENTIFYING NEEDS
After completing the interviews, I created an empathy map to synthesize the information gathered during my contextual inquiry. I looked for patterns, similarities, and contrasts in order to uncover insights from my observations and move towards identifying user needs.
KEY INSIGHTS
Users seem excited for the experience of looking for their potential pet.
Users seem uncomfortable with seeing unhappy animals in shelters on media they experience.
Users seem uncomfortable with the sterile stigma of shelters.
PRIMARY USER PERSONA
The needs of the primary user persona that came from my research proved some of my assumptions. Elaine has little to no awareness of animal shelters and she wants a positive experience when looking for a pet.
POV & HMW
After establishing my primary user persona, I took Elaine's insights and needs and translated them into Point of View Statements, then from those, crafted How Might We questions for each one.
BRAINSTORMING & IDEATION
I conducted a digital brainstorming session for each How Might We question. I gave myself two 3 minute rounds for each question and typed out as many ideas as I could think of. This was a great way to generate ideas quickly, giving me lots of options to review.
PROJECT STRATEGY
COMPARING Business & USER GOALS
For the next step of the defining process, I used a venn diagram to map out the overlaps of the business and user goals, and technical considerations.
PRODUCT ROADMAP
Keeping the project goals in focus, I created a product roadmap that featured three of the mutual goals from the venn diagram and placed them in order of priority in terms of development, and importance to business and user goals. The roadmap also includes proposed metrics for measurement so the effectiveness of the features can be tracked and analyzed.
Sitemap
I created a site map to show the pages that need to be designed for Chance's website.
INTERACTION DESIGN
User Process
With my sitemap in place, I moved towards the prototyping process. First I created a user flow, showing an example of how a user would come across Chance's website and how they might navigate through it. Then I created a task flow, showing how a basic task would be completed on the website. By mapping out both flows, it helped me to think through each step and make sure the pages flowed in a smooth manner.
USER FLOW:
TASK FLOW:
UI REQUIREMENTS
Referencing my site map and flows, I created a detailed list of interface elements for each of the pages. This UI requirements document served as a checklist for me as I began wireframing. You can view the UI requirements document here.
WIREFRAMING
I created low and mid fidelity wireframe sketches of key pages for the website. I referenced the UI requirements document and sitemap to make sure I included priority elements for each page. It was at this point that I researched design patterns that I could reference during the designing process.
LOW FIDELITY WIREFRAMES:
MID FIDELITY WIREFRAMES:
HIGH FIDELITY WIREFRAMES:
By using my style tile as a guide, I was able to keep the visual design consistent across all pages.
Responsive examples (Desktop, Tablet, Mobile).
These wireframes show how the desktop version would translate to tablet and mobile.
Desktop Pages
Here are all the desktop pages for Chance's website.
USABILITY TESTING
USABILITY TESTING PLAN
I developed a user testing plan to outline the task objectives, goals and procedures.
You can see the full testing plan here.
I had 5 participants that tested the prototype. Separately, I gave them an introduction, and provided them two scenarios and two tasks, one task per scenario. Task one was to find the adoptable pets. Task two was to find information about Chance. The testing yielded successful results and contributed to the design.
AFFINITY MAP
This affinity map was used to compile all the data from the user tests. I placed the data into three columns: success, patterns and comments. Then I compiled them altogether and listed the insights and recommendations based on the insights.
UI DESIGN & ITERATION
LOGO
After sketching out different ideas, I chose to use a word mark using Chance's name in all caps in one color, and the letter "A" in a different color to highlight it. This leads the user to read, "A CHANCE" which falls inline with the association's mission.
MOOD BOARD
To gather inspiration, I created a mood board based on attributes I gathered from Chance's mission. This helped to narrow the direction of the design.
STYLE TILE
After using the mood board to narrow down the direction of the design, I created a style tile to keep the look and branding consistent across all pages
High Fidelity Prototype
Using Marvel, I uploaded all the desktop wireframes and created a prototype showing a limited preview of the website's functionality and flow.
You can view and interact with the prototype here.
UI KIT
After the wireframes were completed I collected all the UI elements and placed them into a document to serve as a reference guide for anyone who works on the website.
PROJECT TAKEAWAYS
I was given a brief to create a responsive website and branding with a tablet and mobile example for an animal shelter organization.
After completing my secondary research and conducting contextual inquiries I found that users had little to no awareness of animal shelter organizations, and the little they did know, left them with negative impressions. But I did uncover that users wanted a positive experience when looking for a new pet, no matter where they looked. So I set out to define the information further and through the next steps I came to a solution that would address the user's need for a positive experience.
A responsive animal shelter organization website that users will want to visit. The Chance website offers a happy and energetic user experience from the imagery of happy animals to the information provided to help build trust between the user and the organization. With a user friendly navigation and process, users are able to navigate the website efficiently, view adoptable pets, make donations, view opportunities to get involved, learn more about the organization and more! This will give users the positive experience they are wanting when looking for a new pet.
NEXT STEPS
In the next steps I would want to continue the process of proving or disproving my assumptions. Through this process so far, I was able to prove that there is a stigma when it comes to animal shelters and that people have a more positve view on pet stores and breeders. It would be my goal to continue refining the user experience through this process.