Goobr
Led design for a new consumer-social app, designing every pixel of the MVP
Role
Design Lead
Timeline
2020
Led design for a new consumer-social app, designing every pixel of the MVP
Design Lead
2020
Ever since Snapkit was released, I had been wanting to dip my toes in consumer-social mobile and take a crack at some AR-inspired creator tools. Well, in early 2020 I finally got my opportunity with Goobr. The concept is simple... "no humans allowed" which made this project a blast to think through so get ready for a bunch of pet photos 😅
My goal for the project was to take the brand and mobile app from 0 to 1, while helping the product owner boil features down to something attainable for an MVP. Sure, Tik Tok and Triller have super robust creator features, but they've also spent years getting to that point. Our challenge was to create an experience that felt familiar while simplifying things in a way that a) felt more intuitive and b) was cost effective to engineer.
For this product, I took the product owner through my standard process for startups:
The first step is to create flow charts of all desired user flows, states, and features. For this, we spent many hours in Miro until we had a set of user flows that we 100% agreed to use as our roadmap for the remainder of the project. Things inevitably evolve as higher states of fidelity are reached, but it's important to nail down the expectations up front.
Once the roadmap is ready to roll, the next step was to take time fleshing out all of the core layouts and pages. For this part, it's important not to get bogged down in the details of an individual page and to keep the focus on the general app architecture. I've often found that trying to wireframe and entire app in one go is simply impossible, especially when you are starting from the genesis of an idea. That level of detail needs to be taken care of one vertical slice at a time. Instead, our goal was to gain alignment for a) which core pages we need to create and b) what functionality is housed on each page. At the end of the process, we had a handful of rough wireframes for each page and, more importantly, an understanding of where each piece of functionality was going to live.
Now that we have a more refined blueprint, for startups, it's especially important to gain alignment on the "look and feel" of the product. Coming into the project, Goobr had 0 branding, so part of this involved a color exploration. The important precursor to my work in this step of the process was assigning a bit of homework for the product owner. He spent a while putting together a Dribbble mood board and we spent about an hour on a call going through each image saved, what he liked, what he wanted to emulate, how he described the way he wanted the Goobr brand to feel, etc. So by the time I started to actually use colors and draw some rectangles in Figma, I had a lot of valuable insight to build on.
One thing I've learned going through this process many times is that it's important to pick one of the core screens for this exploration (I used the community page in my process). Typically I go through at least three rounds of concepts for that screen. After each one, we talk it through and then I use feedback to inform which knobs to tweak and what ideas to try for the next iteration. In the end, you end up with something in the ballpark of this 👇
Ultimately, we decided to run with the more vibrant, purple-driven color palette and also fleshed out a ton of implementation ideas that we used as the foundation for the following steps. Once you align on the look and feel, it's not too challenging to extrapolate that to the rest of the pages when attacking each vertical slice.
Given the groundwork above, the next step in the process is to attack one vertical slice at a time. I laid out a week-by-week plan and we divided the app unto its fundamental areas and got to work. By focusing on a single vertical slice at a time, that allowed time for focused wire-framing, prototyping, user-testing, etc. Overall I've found this approach to be a more effective way to work (vs. wire-framing everything at once), especially for startups who often times have a less defined vision of the desired end result.
Below I'll showcase some of the highlights from that work 👇
Part of the Goobr vision is to connect pet-owners in a forum-esque experience. As a great dane owner, I should be able to connect with other great danes, partake in interest groups, and even source local recommendations. On top of that, we wanted to design some basic messaging functionality to make it easy for pets to make new friends and interact.
Part of this process was doing some interaction design exploration as well. For more complex interactions I find that Figma can lag a bit, but for the most part, I never really find myself having to use Principle anymore which is truly incredible. Even if the end result is slower than I intended, being able to see how different screen states are reached and the intended interaction time helps a ton. That being said, you can't prototype everything. In this example below I wanted to scale the square group cards so that they reached max size at 24px in order to create a "growing" effect. Obviously that's not possible at the moment in Figma. Anyway...here's an example of an interaction for how a user would access a group page 👇
The goal with messages was simply not to overcomplicate things. One of the benefits of consumer social is that there are a ton of existing UI patterns that users are already quite familiar with so, as you can see, we didn't try to reinvent the wheel.
Our north star for the profile pages was to design them in a way that allowed pets to express their personality to the fullest extent. On top of that, we wanted these pages to be highly visual with an emphasis on highlighting vertical video.
Additionally, we designed a simple way for users to customize the background gradient associated with their profile.
Aside from core search functionality, one of the main goals of this page was to create a way to highlight featured user accounts. In the early days, Goobr won't have millions of users or robust interest-graph algorithms, but it's still got to feel like pets are there and that they are worth following.
One of the ways we brought this experience to life was by leveraging the personalized gradients from the profile page. Now we can use that to highlight a pet's personality when they are featured on the Discover page as well!
The goal with the home screens was to emphasize vertical video and capitalize on the familiarity of Tik Tok while making the UI more simple and intuitive. One of the main opportunities that I saw was to make it more obvious what was a button and what was not. So a UI pattern we used a lot throughout this project was adding black transparent containers to icons so that things are more visible, more obviously clickable, and utilize larger tappable areas. We also opted to use a layout that more closely resembled a traditional social media post vs. the vertically-stacked actions seen in Tik Tok.
All in all you get something like this 👇
One of the goals for onboarding was to create an experience that didn't require users to create an account immediately as a way to minimize time to value. That also required us to create compelling empty state screens for a) Community and b) Profile pages to incentivize people to sign up.
As a result, we ended up rendering the signup/login experience within a modal and opted for SMS-based login as the default method. Upon successful account creation, we then take them to a full-page onboarding experience.
And then finally, for onboarding we use a vertical column typeform-esque approach (redacted iOS native selectors in the .gif below for simplification). Also, we wanted to create a compelling "connect contacts" screen as the last step so this gif also shows what it looks like if you have contacts on Goobr as well as if you don't 👇
This set of pages was by far the most robust part of the project, and also the most challenging. There are so many tools available to creators today, and some of them are highly complex. So the question we asked ourselves was: "how might we boil down existing creator functionality to its most vital components and how might we make those more intuitive?"
"I'm not even sure what's possible with Tik Tok"
We saved this vertical slice for last so that we could maximize the amount of time we had available to collect user feedback and better understand how people are enjoying existing creator features. In short, there's definitely a lot of opportunity to simplify and more clearly explain what is even possible. "I am not exactly sure what's possible with Tik Tok" was something we heard on multiple occasions.
One answer to that question was to draw a clear line between a) creation features b) editing features. And then create a standardized UI to educate the user on exactly what they can/should do at both steps. With Tik Tok or IG it's possible to do everything at all parts of the creative process and frankly, it feels overwhelming to a non-seasoned-veteran.
With Goobr, all of the creator tools available to you are displayed in the exact same way at the bottom of the screen, with very clear states for 1) inactive 2) selected 3) active. We also added label text so that it's 100% clear what is possible and which features are applied. On the left, you have the tools available for creation, and in the right screenshots, you have the tools available to you for editing. Simple as that.
So when you first open the camera, you see one set of tools, and then after you are done capturing a photo or video, you see another (shown in this .gif below)
Also, notice how each tool has utilizes our black transparent circle UI pattern to reinforce the fact that this is a button that you can press.
Whereas apps like Tik Tok or Triller have access to major music libraries, Goobr is licensing sound effects libraries which presents some unique design differences (namely, we can't rely on album artwork for the bulk of the UI).
Additionally, whereas all songs are longer than the max video length of 60 seconds, Goobr has an interesting challenge in that some sounds are longer than 60 seconds and some sounds are shorter. So it's not as simple as merely selecting a start time. You also have to include cropping functionality that is dependent on the sound effect length. So what we ended up doing was breaking the flow into the following steps:
Overall we were really pleased with how well this flow prototyped. Users consistently said that the way it was broken up was intuitive and easy to use.
In order to standardize the way that effects are applied and edited, we created an effects drawer that is opened in the "Selected" state. This gives the user a single place to see all of the effects that have been applied using that tool and make any edits, deletions or additions.
In order to make things as intuitive as possible, we use this same drawer across all of the creator tools. So for example, if I want to add an additional sound bite I do this 👇
In the same way, if you are applying stickers you have a dedicated drawer where you can remove, add or even replace stickers. Everything behaves exactly the same way so once a user learns it for the first time, they area able to apply the exact same logic throughout the entire creation experience. Additionally, it's also really easy to see which effects are applied at a glance because of the standardized white "active" state.
Here's an example for stickers 👇
And here's one more example of how it would work when a user adds text overlays to their video 👇
Once the user is done creating their content, they are ready to move on to the caption page where they are able to finally submit their post. This is definitely an example of a page where we didn't want to overthink things, but we also did add some neat features surrounding hashtag discovery. As soon as the user types '#' it opens a fuzzy search for hashtags that can be applied. In the beginning, this will stay pretty plain. But the vision here is to show sponsored hashtags, show how many tagged posts each hashtag has, location-based hashtags, etc. We also created a clear "hashtag" button to promote this functionality and drive hashtag use in the app.
I'm quite proud of the scale of this project and the speed with which it was accomplished. In my opinion, we did a great job of finding the balance between process and research vs. startup-esque speed and I'm happy with where the plane landed.
Before looking at the final image, know that I would most likely lose my mind if I worked in a single artboard like this. However, I did want to get the whole app into a single prototype so I actually did create a new file with everything on a single page. I'll share it below so you can get an understanding for just how big this project really was 😅The screenshots and gifs above were merely a small taste to be sure!
Questions, thoughts, ideas... I love connecting with new people so don’t hesitate to reach out.
Let's do the social things.
.svg){kind=icon}
