Each dog has a personality and heart of its own. The current options for finding and adopting a dog are often tedious, limited and impersonal. PawSeekr enables users to locate their ideal dog, educate themselves on ownerships must-knows, pet personalities, and all of the steps a user needs to take to own a dog that perfectly matches them.
Designing an app is a whole new territory for me. I‘m more of a webpage kind of girl. I guess there’s a first time for everything.
I was given a mid-fi prototype to skin. Easy, right? Nope. Not when the mid-fi looks like it came right out of 2009.
Time to make some notes! I began with the why. What is the purpose of this app? What is Paw Seekr for?
The PawSeekr app must be clean yet welcoming. Adopting a dog is exciting and nerve wracking, so the user should feel safe within the app and encouraged to take their time searching through dogs. The user should never feel overwhelmed or stressed out while using the app. Less is definitely more in this case.
I had my style guide ready to go (you can see that case study here).
I don’t know who the UX designer was, and I don’t want to attack them personally, but this design was just not going to happen. The design would be a complete contrast to the clean UI design I had planned.
I am going to repeat this again from my last case study:
Keep in mind this is my second project at RED Academy and not an actual client or app.
The stakes aren’t high and I was given a lot of creative freedom and wiggle room. This mid-fi was just a guideline or example to how the app should look. I was allowed to change whatever I though needed fixing so long as I could justify it.
Now, I’m not saying I’m an amazing UX designer. In fact, I really have no footing in that field at the moment. This is a UI class, after all. But as someone with a smart phone who uses apps daily, I knew this interface was not up to the standards that have been set for 2019 iOS apps. In fact, it reminded me a lot of Instagram back in 2010.
All my assets are ready to go and all the colour and font specifications are set. I was given a mid-fi prototype to skin. Easy, right? Nope. Not when the mid-fi looks like it came right out of 2009.
The first thing I wanted to tackle was the UI for the Match Preferences. The amount of information given to the user at one time was too much. The drop downs were weird because irrelevant information was still on the screen.
My initial idea was to have bubbles with icons inside of them. For example, size icon would have a measuring tape. Upon clicking this icon, the screen would fade a bit so that all focus can be on that selection. Several other bubbles would appear and the user can scroll through them and select their preference.
I felt like this might be too complicated and unnecessary. I moved on to having separate pages with one option each. This would also hurt the usability of the app because having so many pages can be tedious when trying to find what you are looking for.
I ran through a few more ideas until I found one that might just work. This app would need a lot of white space to maintain its clean display. I would list all of the match preferences vertically, except include a plus button on the side for users to add a preference. If they do not care what the sex of the dog is, they wouldn’t be forced to make a selection.
The output of selecting a specific preference would be small tags tiled under the preference heading. Tags are readable and easy to understand. They keep information short and simple while still informing the user what is being used to determine their dog match.
The more filters the user selects, the longer the screen becomes until they are scrolling. There wouldn’t be multiple pages or confusing drop down menus.
The hierarchy of information is simple: big words=category, little words=filter tags.
As for the header and footer, I made sure there was only one option available as to not overwhelm the user.
Done with customizing your preferences? Then select the back arrow and move along. Less options make sure that the user keeps flowing from one screen to another and not get stuck with deciding what to do.
Next I wanted to see what I could do about changing up the Matched Dogs screen. I liked the fact that you could swipe through dogs easily. The original design made users swipe through dogs, click on a dog they like and have a new screen show up with all the dog’s information.
I felt like there was an extra step in here that wasn’t completely necessary. Why not skip clicking to see more information? I designed the new app interface to be all about the current dog you are looking at. Swiping horizontally on the picture will reveal more photos of that dog without having to go to another page altogether. Swiping horizontally anywhere else would let you view a different dog.
The like/save icon is easily accessible on the right side (most people are right handed and use their thumbs to navigate). If they are quickly browsing matches and don’t feel like reading, they can just save that dog for later based only on the appearance of the dog.
The bottom of the screen has arrows to indicate that there are indeed more pages and dogs to look at. Those will be clickable too for anyone not used to or unable to swipe.
The share button on the photo is very useful. If you are looking to adopt a dog with someone, you can easily share the profile with them. It also gets more traffic on the app.
Scrolling vertically on the text will reveal more information about the dog on that particular screen. The fading gradient indicates to users that there is more to look at below the fold (below what is visible on your current screen).
After scrolling down, the bottom navigation arrows will still be there so that the user can change swipe through screens and compare dogs. There is also a contact button at the bottom of all the given information. Assuming the user likes all that they read, they have a way to contact the dog’s current handler without having to scroll around looking for the contact button.
Sign Up Screen:
The initial signing up interface is extremely important. It can either turn someone away or draw them in. I didn’t think there was too much wrong with the initial design, however I did want to simplify it a bit for the user.
When signing up, it can be overwhelming to have a bunch of questions thrown at you right away. What is your gender? What city are you from? Country? Phone number? Email? Confirm that email, please. PHEW!
I decided to give the user 2 options at first. Very simply: Email and Password. Upon entering their password, a new input area will appear asking for them to confirm their password. It doesn’t seem like much, but slowly walking the user through the sign up process is a lot smoother than asking for all these inputs at once.
After confirming their password, a new option appears: are you a shelter or an adopter? Two friendly, rounded buttons on either side of the screen. Not a difficult question at all. After selection an option, they will be sent to the main screen of the app where they can begin going through settings and browsing dogs.
The Finished Product:
See for yourself!
Signing in as an adopter
Note the sliding transitions between screens. I made sure to be consistent so that the user doesn’t feel lost. If the screen slid in the from the left, it will slide to the left upon exiting that screen. This helps the user remember where they are subconsciously.
If you imagine the main screen as the centre, the ui would be organized like this: matched dogs to the right, options to the left, browse down below, sign in up top.
Signing in as a dog handler
I’m pretty happy with how everything turned out. There is a lot I want to fix and expand on, for sure. Poor use of t ext spacing is something I am noticing now. I learned how to use Sketch (I have only ever had PCs, so Sketch was unavailable to me). I also learned how to use Adobe XD which I never had a use for until now.
I would love to revisit this project later on and see how I can build on it without a deadline to keep in mind.