Ideation & Planning
The Grade was built with a small team led by the CEO with two developers and myself, and so I was involved from the early inception, brainstorming ideas and possible directions, as well as leading user research that informed product decisions. The original vision of the CEO was to build a Tinder competitor focused more heavily on shared interests and connections. After checking in with our target audience we found that this was not a big enough differentiator, so the original product Mutually evolved into The Grade, which has scoring based more on behaviors within the app vs. imported data from Facebook. Here are various wireframes showing possible layouts and interaction notes as part of my product planning process. Since I was the one continuing with the visual deisgn I mainly stuck to sketches or quick high-fidelity mocks to express design options.
As a brand new app, I defined the core structure of the application. Starting with a foundation based on competitive analysis in the dating space, we iterated from there to meet our specific user needs. This application map I made for all screens and connections inside of The Grade.
Before developing a working product, I designed some interactive prototypes to test internally as well as with our target audience of Millennial daters. Getting a feel for the product and watching others play with it help drove early choices before too much had been invested in engineering. We did the same with later features, such as the nearby location-based feature.
Browse & New Match
The browse screen is the main interaction on the site, allowing for a user to swipe right or left to like or skip the currently viewed person. I decided to go with the full screen photo based on a re-read of the iOS GUI Guidelines which encourages minimizing chrome. I also choose to add the unique interactions of swiping up/down for more photos, and swipe up from the bottom to view their profile, all to keep the browsing process as streamlined as possible and avoid lots of back and forth tapping. The Match screen is after you've liked someone and they've liked you back, you can now contact them.
Photo Scrolling & Profile
I designed the vertical photo scrolling to be a novel interaction to avoid the standard tap to view profile and then horizontal scroll to go through photos, including small thumbnails on the right edge to let people know at a glance how many photos exist and the general orientation of them in the stack. You can also see the back button in the top left that shows both the last person's face and a clear label for the action. The Profile screen shows from dragging up from the bottom of the browse screen, or a tap on the grade/name bottom section, showing that person's grade breakdown along with interests and friends in common.
Matches & Messaging
The matches overlay menu is a list view for your matches and recent messages, highlighting new matches or messages including that member's grade. I troubleshot with the iOS developer to come up with an easy way to blur any screen for the overlay menu to keep context (take a screenshot and blur it as an image). The messaging screen with standard chat bubbles, but I added in the blurred photo for extra context and visual appeal.
Landing & Failed Off
The landing screen shows the logo that I designed for The Grade, riffing off of the concept of grades and schooling, but keeping it upscale and exclusive, like an elite private school. The Failed Off screen is when a member has been failed based on their profile and interaction behavior, which a patent application has been filed listing me as one of the inventors.
Close By & Places
This feature was an idea I came up with in a brainstorm for how to get some extra value out of our location matching system, centered around reducing friction for getting people together in real life. The first Chat screen starts as an animation zoom in on the map and the circles bubble in then the map slides up to reveal the standard chat screen. The second Places screen lets you tap on any of the Yelp API locations bringing up an action sheet to view location details or insert a message to meet at that location. This feature was recently removed from The Grade as iOS changed how they ask out-of-app location permissions where if declined, it made the app unusable.
The Grade started as Mutually, where the logo design was originally outsourced to 99designs and only later when we pivoted to making the app more exclusive did I get the chance to design the more sophisticated Mutually logo, then later, the logo for our new name, The Grade. The final logo for The Grade is riffing off of the concept of grades and schooling, but keeping it upscale and exclusive, like an elite private school.
As the product evolved based on user feedback, testing and analytics, I worked on making the product's core differentiator, the score, clearer and easier to comprehend. The initial number score we found was not as clear to users as we had hoped, so we simplified from numbers to a letter grade and rebranded the product from Mutually to The Grade, again reinforcing the core value proposition.
I worked closely with our PR team and a data engineer to come up with compelling stories that could be told with our data, then it was up to me to turn that raw data into an interesting data visualization that could help us generate press.