Case Study: Designing a UI Library for a Dog Adoption App

This is a design exercise I completed at RED Academy.

PawSeekR app logo created for this project

Task

Create an engaging UI Library for PawSeekR (a dog adoption app).

Objective

The goal of this project was to showcase 2 potential art directions for this app through a rigorous design process including a mood board, a style tile, a style guide and final screens. This project was conducted with another designer to be able to create 2 separate art directions within the same parameters in mind.

Tools

Pen Sketching, Adobe PhotoShop CC, Sketch

Target Audience

25–35 y/o M/F
Creative or community industry related professionals

Process

With the target audience in mind, I immediately questioned myself as to “why would these people want to adopt a dog” and “why would they want to use an app for such a purchase(as opposed to buying one from a pet shop)”? I also questioned some of my own friends who had recently adopted a dog and had opted for an online process.
The answer that came out from the first question was that they wanted a companion who pushes them to get outdoors more and share moments with.
As for the second question, the answer that came out was that it was time efficient and felt like they would be giving back to the community.

With these answers in mind, I started searching Pinterest for images of dogs as companions, in an outdoor environment. This then led me to my initial mood board that I have entitled “Adventure Companion”.

Mood Board

PawSeekR — “Adventure Companion” Mood Board

The initial mood board was composed of the following:
Colour: Forest greens & Yellow representing the outdoors and warmth(coziness), mixed with greys

Shape: Squares and hexagons creating a path, showcasing the enclosed shapes leading to finding something

Movement: Roaming, searching for something through the path created by the shapes

Space: Abundant. Dogs need lots of free space to roam.

Style Tile

With all these elements in mind, I know had to see how they could be incorporated into a user interface format, an app. I therefore gathered my colours and imagery and added typography and initial mock ups of buttons to see if my mood was still be transpired from my initial mood board.

PawSeekR — “Adventure Companion” Style Tile

Through this format, I could see some colours already not working well for a user interface purpose and had to modify these. I had to pick a lighter colour that would contrast well with a darker font. 
For the font, I opted for Montserrat as it was rounded, which gave a sense of comfort to the user but was also very legible. This typeface family also comes in various weights and styles which did not need to be paired with a second typeface.

At this point in the project, my brand identity was becoming clearer so I was able to create a simple logo that would match the mood I was creating.

Style Guide

Style Guides and Style Tiles are hard to differentiate and really depend on the project scope at hand. Once I was satisfied with the style, I started applying these colours, fonts, UI elements and such to my actual wireframes. This is when a lot of changes happened. Things didn’t look as great when actually being applied to the final wireframes.

PawSeekR — “Adventure Companion” UI Style Guide

The final style guide included a few more colours to enhance the user experience and custom iconography that was not too overwhelming.
The logo was also modified to feel more welcoming.
The buttons were rounded as well to give it a friendly user experience.

Final Screens

Once the Style Guide was applied to the wireframes at hand, the final screens with the “Adventure Companion” art direction finally came to life!

PawSeekR — Sign Up screen
PawSeekR — Find My Match screen
PawSeekR — Results screen

As you can see, elements from the mood board were translated all the way to the final screens as the “Adventure Companion” art direction was at the basis of all choices for these screens.

Outcome

This project was interesting as it was done in pairs and we both had to have completely different art directions for the same end user in mind. It differently helped me to see how other designers can have completely different perspectives on the project at hand.

Overall, the objectives were fulfilled and it has given me new perspectives on visual identities and visual story-telling.