Personas - who are my users?
Today’s main focus is to get familiar with the problem and understand the context and research about the problem we are solving. The challenge provided basic information about users, and here is the persona for a typical user who is going to be using this website:
Behavior:
Ellie is a 27-year-old who lives alone in a studio apartment in NYC. Now that she does not have roommates, she finally feels "ready" for the responsibility, and companionship of a dog.
She follows some adoption agencies on Instagram, and even "saves" some dogs she wants to adopt. Ellie has spoken to adoption agency representatives to ask questions. This has been helpful but is very time-consuming to find the right contact or make an appointment. She asks friends, and people in her building who have dogs for advice, so she can get some info from people that are closer to her situation.
Pain points:
Goals:
Ellie’s goal is to find a dog to adopt. She wants to feel confident that they will be a great fit for each other- both in emotional connection and practical factors related to her lifestyle.
Based on these information, I created a draft user map to envision potential steps that Ellie would take to adopt a puppy.
What should my website include and how should I display them?
Today’s activities are about getting inspired and start to transition into creative mode. First I looked up some existing websites for inspiration on the website’s general layout and how to prioritize essential functions. First I looked at Petfinder and got a general idea about the basic elements I need for my website.
I didn’t limit myself to just looking at another adopting website, but also hotel/flight booking websites to study how they designed their filter system. E-commerce websites are also good at displaying multiple images and information, so I studied Zara and Urban Outfitters’ websites for their image displaying system.
Next, within 30 mins, I had to sketch out the most critical screens. This is a quick way that helps me to think through the steps users will take with a rough visual reference.
I also used the “crazy 8” method, which is a fast sketching exercise that challenges people to sketch eight ideas in eight minutes for some screens. I tested out different layouts for the detail page, each of them has certain benefits, but I tried to highlight the picture/video part in all the designs since this is found most useful among users.
Draw them out!
Today's focus is to flesh out the storyboard, pick the best solution for next step.. First step is to create a 5 to 15-panel storyboard that includes the solution sketch. This helps finalize the design for the next step-prototyping.
I kept using the wireframe style and tried to focus on prioritizing the most important information on each page end-to-end.
Bring the design to life!
Today is the day to realize my sketches into a more realistic prototype for tomorrow’s user test. I decided to bring the website to life using Figma. This is my first time designing for a larger screen and the scale is so different from designing for a mobile device. I used some help with the website template to speed up the process. I also referenced back to the websites I did my research on Day 2.
To grab potential users’ attention, I designed a landing page with a full-screen heart-melting picture of an owner hugging a happy puppy in an urban environment. I picked this picture because it sends the perfect message about the topic of this website- helping city people to find a perfect dog to adopt. On top of the image is a simple message to the users and a CTA button to encourage people to continue exploring this website.
When creating search filters, I also looked at flight and hotel booking websites to study their strategy. In the end, I decided to keep my design with a fixed top bar on top of the screen so that users can easily access and change the filter criteria at any time.
Does it work and does it work well?
I recruited 5 people to help me test out over the past 4 days, so I did not spend extra time to recruit users today. For each test, I asked them to think out loud while using the prototype. They were given the context of what kind of environment they are living in and what kind of dog they are looking for based on the persona information.
All 5 participants successfully completed the task without any problem. They also provided valuable feedback. For instance, one comment was I should include a map to show where the dogs and their shelters are so that users can have a clearer idea about how long and how far they might need to spend on transportation when adopting the dog. Another thing is to include information at the end explaining how much time on average it takes the shelter to respond so that the users will not have to wait to worry whether their application went through.
This fast-paced design sprint was very fun and short to try out ideas. And if the idea turned out not worth further investigation, it is easy to not feel attached to the idea when giving up.
It was definitely hard for me to not get distracted by every detail of design and really strictly follow the time limit when completing each day’s tasks. However, this is good training for me to be more adaptable and be more prepared for future projects.
You can try out the prototype with this link
If you like what you see and want to work together, get in touch!
