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 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.
Application map I made for all screens and connections inside of The Grade.
Wireframing & Planning
Various wireframes showing possible layouts and interaction notes as part of my new feature planning process. Since I am often the one continuing with the visual deisgn I mainly stick to sketches or quick high-fidelity mocks to express design options.
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.