MY ROLE: UX DESIGNER TOOL: ADOBE XD
PROJECT DURATION: 1 MONTH
THE PRODUCT
We are developing a web page for an animal shelter that is accessible and easy to navigate.
THE PROBEM
Actual shelter webs are confusing with a lot of text and information that is not relevant.
THE GOAL
Develop a simple web that allows the use to make online appointments to visit the shelter.
USER PAIN POINTS
TOO MUCH TEXT
Many users complained the actual shelter webs are full of text and they are not able to find what they are looking for.
MAKING APPOINTMENTS
Many users mentioned that it was important for them to be able to set an appointment before going to visit the shelter.
PET INFORMATION
Our users want to have more information about pet background on the pet profile.
USER RESEARCH
For my user research I conducted Surveys on a representative sample.
I conducted Surveys as I thought this way I would understand better what the user thinks and needs. For that I elaborated a Screener survey to determine if the participants I evaluated met the requirements of the research study.
Some assumptions I made going into the research changed after conducting it. For example the main pain point for many users.
PROBLEM STATEMENT
Flora is an Illustrator who needs to be able to make appointments before visiting the shelter because she does not have much time and need to go with her daughter.
PAPER WIREFRAMES
SCREEN VARIATION
Taking time to draw the fist mock ups of the app made me thought of how would be better to show the user an easy flow and also understandable.
As our users access the site from multiple devices I started to design for additional screen sizes to make sure the web would be fully responsive.
DIGITAL WIREFRAMES
BEFORE AND AFTER USABILITY STUDY
Based on the insights of the usability study I made changes from the wireframes to the prototype to improve appointments screen.
Users find it very difficult to understand on the wireframes so I added a calendar for better usability.