KENJPENA

Spottr

PRODUCT DESIGN, ART DIRECTION, MOTION

A mobile app created to be a crowd-sourced solution to bringing lost pets home. 

Created to solve a local issue, the project stood as my first baby steps into UX and Product Design.

Spottr Pets was a joint partner capstone project for university that acted as a benchmark for the skills learned through the 4 years. I was in charge of the UX prototype. 

As for the collaboration, I was to conceptualize and designing the entirety of the product. From research and crafting user experiences and visual design, the capstone project revealed itself to be the first steps I would take into the world of Product Design. 

Revisiting the project, I found two different goals in Two different time periods: With an existing idea and concept in mind, my primary goal was to apply some knowledge from Motion Design to Product Design.

Goals in 2019

To create/rapidly prototype an application for the feral cat population.

Goals in 2021

To redesign this prototype with the skills I have acquired through my two years of research.

Before
After

Out with the old and in with the new

Having two whole years since I revised this project, I found different opportunities to use the skills I learned to fill in some of the gaps with the UI Some notable additions from my previous version include:

  • Type Styling – For increased legibility and aesthetic consistency
  • Design System – Applying a cohesive style throughout the application
  • Motion Design – Used motion to enhance specific user experiences

Thus begins the start of the newest edition of Spottr, a community oriented app dedicated for pet-lovers by pet-lovers.

Capturing the Solution

As a brief overview, Spottr’s functionality was based to solve a problem about the missing animal population — by crowd-sourcing data via our smartphones.

Documented search methods for missing pets

This was based Research from a study done about successful search methods used to locate missing animals. Overseeing various methods of tracking and other various methods for searching missing pets, there became one obvious issue.

0 %

Conversed with neighbors

Local conversations reigned the most successful search methods as communities are often formed through neighborhoods

0 %

Advertised on Social Media

Facebook groups like Straydar and apps like Next Door focused on reporting stray and possibly missing animals with various amounts of success.

0 %

Called animal/rescue groups

With the remainder relying on traditional methods of recovery as modern micro-chipping has increased return-to-owner rates. (RTO)

Huang, L., M. Coradini, J. Rand, J. Morton, K. Albrecht, B. Wasson, and D. Robertson.  2018.  Search methods used to locate missing cats and locations where missing cats are found.  Animals 8(1): 5.  https://doi.org/10.3390/ani8010005

The Issue: Limited Range

These methods, albeit effective in their own respect, were limited in their reach. Local social groups / neighborhoods weren’t communicating with each other. which meant limited range and data.

Thus Spottr was born as a location based app where neighbors can:

  • Put up missing animal reports
  • Communicate and interact with one another
  • Locate and recommend relevant pet services

Art Direction / Visual Design

The benefits of reworking a solo project were that I could create my own patterns
and creations for establishing consistency throughout the prototype. This made
it easier to establish patterns to streamline my workflow into full prototypes.

Playful, Energetic and Safe

The choice to use rounded corner elements was intentional to the UI’s playful design. By sprinkling this in with traditional elements with sharp edges you get a professional looking application that does not sacrifice the welcoming nature of the platform.

Colors used were more saturated in comparison to the previous version. I also paid closer attention towards smaller micro-interactions the user would be using on the daily as well as using color to emphasize certain elements.

Using motion to enhance user experience

My own experience with using motion to help communicate complex ideas to an audience helped me experiment with how motion can be used to enhance user experience. With the ideas I learned through my work with large tech titans, I figured how subtle motion can not just convey interaction but enhance them.

Supportive and Helpful from the start

Revisiting the use cases of the application, I found it important that the main feature was accessible without the barrier of sign in.

This meant potential users could still contribute to the data-base providing value even during emergency situations. Also allowing the visibility of current spots within the respective neighborhoods.

The redesign also enhanced how intuitive certain options were taking into consideration the different suggested options that were offered by default.

Capturing effortlessly and efficiently

These screens give a glimpse to how the visual design is applied to the rest of the application. Using motion and color to again enhance micro interactions to make to emphasize the experience encouraging users to come back and continuously use it.

Copy was also equally important because I wanted the lighthearted tone to reflect the type of community i want to create within the app.

Navigating a familiar experience

Another important design consideration was to take inspiration from existing, widely-adopted products to provide a familiar experience to convey a sense of trust and stability. 

Other applications of this vicinity are apps like Google Maps, Grubhub and Uber that gave me insights to how they navigated screen real estate. 

Discovered Insights

Overall, I found a lot of interesting insights not only about my own design capabilities but also my personal tastes and preferences. The most interesting insights were from revisiting an old project with new eyes and skills.


At the end of the project i learned a bunch of interesting things about both my skill as a designer and as well as insights about my design process as a whole.

Opportunities for growth

One of which was when revisiting a project with fresh eyes, I found compassion for the designer I used to be. The same roadblocks that use to stump me have now become opportunities for growth.

Generalization leads to perspective

Having taken the time to dabble in seemingly unrelated skillsets gave me an edge when tackling certain problems and allowed for a much more streamlined experience.

Using motion enhance experience

Working and experimenting with motion for larger corporations allowed me to tackle simple problems with a different mindset. Using motion to convey complex ideas in a more elegant and streamlined way is a win-win for both the designer and user.

Understanding scale is key

Most of my previous experience was in web based applications which meant this project in general was outside my comfort zone in terms of resolution. It was not until I utilized tools like Figma mirror to get a better grasp of scale on a mobile device.

Overall the redesign helped me understand the mountains of progress I have made as a designer; while also still highlighting some opportunities to grow and evolve as I make my way deeper into becoming a fully fledged Product Designer.