Contract Work · 2017

Pickr Uppr

The ultimate sporting app — a matchmaking app for finding local sporting vendors and teammates, and the brand identity and mobile UX I designed for it.

Role
Brand & product designer
Scope
Identity, wireframes, screens, motion
Platform
iOS / Android
Tools
Illustrator, Photoshop, Sketch
01

Overview

Pickr Uppr is a matchmaking app for users to find local sporting vendors and teammates. The client conceived of the idea when he couldn't solve the problem of not being able to find enough people to play a soccer game.

The core features include booking a date and time for sporting vendors, matchmaking players based on skill level, a variety of sports to choose from, geo-location, and performance analytics.

Three Pickr Uppr screens — a scrollable list of nearby soccer vendors, a circular swipeable card showing a field, date, and host, and an Interested/Upcoming list of booked games
02

Branding

The logo was designed to look similar to a GPS locator and the letter "P" — it's simple, clean, and relevant. The color palette was chosen to be bright, modern, and reminiscent of an outdoor environment.

A clean, sans-serif font is used to top off the branding guidelines, in addition to some custom font.

Pickr Uppr custom wordmark specimen — the lowercase 'pickr uppr' and 'meet, greet, play' lockups shown with construction grid lines above their finished gray rendering
Pickr Uppr color swatch card outlined in the brand's bright green
Pickr Uppr color swatch card outlined in the brand's bright cyan-teal
Pickr Uppr typography specimen — SF UI Text Light, showing Aa and Zz Pickr Uppr typography specimen — SF UI Text Medium, showing Aa and Zz

The pin-shaped mark does double duty as both logo and UI element — the same locator silhouette reappears as the geo-location icon inside the app, so the brand shows up at the exact moment a user is finding a field near them, not just on the splash screen.

Design rationale

03

Designs

The overall structure of the app includes a stacked-card interaction, calendar functionality, and organized lists of locations. Color and images were used strategically to contrast the white background and draw users' attention to important features.

One of the challenges we faced was designing within a circular card, which limited some horizontal real estate available. Limiting the amount of meta-data and managing font size helped greatly.

Wireframe flow showing a phone home screen tapping the Pickr Uppr icon, into the splash screen, into the sign-up screen with Facebook and email options Three states of the Pickr Uppr pill-shaped navigation bar, each showing a different tab — Players, Location, and Trophies — highlighted with a color gradient
04

Microinteractions

I had the opportunity to focus in on the more minute details, namely, with animations and transitions throughout the app. The key was to use meaningful animations that communicated to the user the result of their actions or guide their attention appropriately.

We had to be careful to not add too much animation as that would make the design overbearing and sloppy.

Pickr Uppr sign-in screen with the pin logo, 'meet, greet, play' tagline, Facebook and email sign-up buttons, and a green Sign In button Circular matchmaking card mid-swipe, showing a green 'Interested' pill animating over a soccer field photo to confirm the user's response Scrollable list of nearby soccer vendors with distance labels, transitioning into the sport-picker row at the bottom of the screen Interested and Upcoming tab view showing two booked game cards with host avatars, field photos, dates, and times

Every transition here was scoped to a single job: confirm a swipe, reveal a booking, flip a card. Restraint was the design decision — motion that explains an action reads as polish, motion that's just there for show reads as noise.

Design rationale

Next Project

Gem

View project