Overview

What I’ll cover Today

In this case study, I review my redesign of the Other User Profile Screen which is the screen a user sees when viewing someone else’s profile.

This screen became a barometer and template for other similar screens throughout the app. Namely the My Profile screen (a user’s own profile view) as well as Group and Hashtag screens (private friend groups and publicly shared spaces, respectively). It also offered unique challenges to the project given the number of elements displayed on the screen.

What is Yodelay?

Yodelay is a mobile social app that was created by Vyasa Analytics as a secure and private space for friends to stay connected and communicate. No ads, no algorithms, no clutter.

Yodelay was in its infancy in the marketplace when I started my work at Vyasa. It was functional but clunky, missing features, and overly complex in certain areas.

My team was tasked with streamlining Yodelay’s core functionality, simplifying its design, and introducing new features to help our users feel more connected to their friends.

Yodelay’s user base shares moments of their lives and makes plans with friend groups. As we refined the app, we kept circling back to its essence of letting people interact privately, unencumbered by algorithmic feeds or fear of data breaches. That’s where Yodelay’s tagline was found: Be Together.

The Problem

Redesign the user’s profile screen to include an abnormally high number of elements.

My Approach

Here are the nuts and bolts of my ideal design process that was (heavily, deeply) adjusted along the way to handle new findings and changing requirements.

Other User Profile

Update the old. . .Into the new

The request for so many items to be featured on the profile page meant for a relatively cluttered view despite Yodelay’s overall quest for simplicity. This was a challenge I happily accepted.

However, I did not readily accept the idea of giving users the ability to navigate away from our app. Did we really want to enable our users to access a competing app from their Yodelay profile page?

Discovery

Competitive Analysis

I began my discovery phase by analyzing the public user profile pages of five social apps (Facebook, Instagram, Twitter, Pinterest, and Reddit), as well as LinkedIn, and Slack, and a couple Voice over IP apps (WhatsApp and Viber) to get a sense of their layouts. I included LinkedIn, Slack, and the VoIP apps because, while they’re not necessarily social apps, there are behavioral similarities that provide the ability to connect with others. Including them also helped me consider use cases beyond the strict limitation of a friend group. Another part of my research was scouring Dribble to get a sense of what other visual designers there were coming up with in this space.

One thing was understandably certain during my research: None of the companies I researched dedicated real estate on the user profile screen to their other social accounts. Again, I was feeling very uneasy that the CEO wanted to give our users such a prominent path to navigate away from Yodelay.

User Interviews

During interviews with eight Yodelay users, and much to my surprise, I learned that connecting other social accounts to Yodelay would actually be an effective feature.

I was careful not to bring up the feature idea myself, but instead encouraged conversation about why they maintained multiple social accounts, why they shared the content they did on each platform, and how they behaved while they were using Yodelay.

It seemed that the CEO was on to something: providing our users with a feature to quickly see their other social accounts may very well keep them interested in our app. Yodelay is a safe, private space to share themselves, so connecting to their socials—namely Facebook, Instagram, Twitter, and LinkedIn—would be an enhancement to their experience in the app.

Mock-Ups

PAper and Pencil time

I love that my paper and pencil offer me the flexibility to make mistakes without feeling like I’m expending too much effort in the process. My sketches create a clear starting point to drive the conversation with my visual designer and engineers, and is understated so we don’t get bogged down in the finer design details like colors, typefaces, and pixel-perfect placement.

I didn’t worry about incorporating every single element of the intended design for my initial sketches of the Other User Profile. I used three time-boxing exercises to explore a visual flow for general placement of elements with the intent of adding more elements with each pass.

The result of my first session was a fairly standard profile page based on the other app’s profile pages that I had researched earlier. It clearly lacked the space to incorporate the connected social accounts.

In my third time-boxing session, I broke from the left-justification idea and centered everything again, but it was still very cluttered.

Despite that, I felt like I was making progress with visual flow and I was hopeful that I was on the verge of intuitive element placement.

I was also confident that my visual designer, Betsy, would be able to help me out of this derivative hole. Her pixel-perfect visual design skills and my drive for organization and intuitive design were always a force to be reckoned with.

Hi-Fi Mock-Ups

Armed with a handful of paper sketches that were only “meh,” I hopped on a Slack video call with Betsy that proved to be all we needed to get us over this hump.

We began by drafting hi-fi mock-ups of my sketches in Adobe Xd to get the elements on the page. The results were more of the same: still cluttered, still generic, still unimpressive.

At this point in the conversation, I abandoned all my previous intentions and I said to Betsy, “You know what? Let’s do something wild.”

I proceeded to spit out a bunch of stream-of-consciousness ideas, knowing that we could always fall back on the items above.

Here are a few of the ideas that fell from my brain and helped to tidy up our cluttered profile:

1. Make the profile pic bigger!
   Our users want to see who a person is. Let’s not make them work for that visual feedback.

2. Keep it centered.
   Left justification just doesn’t make sense with the multitude of elements required.

3. Incorporate buttons.
   The main call-to-action is the follow button but promoting the message interaction feature to a button gives the users a direct way to truly connect.

4. Display the social icons clearly.
   Flanking the larger profile pic with the social icons gave them their own little corner of the screen in a balanced visual layout. Using full color icons for connected accounts and grey icons for unconnected accounts gently reminds the user those connections are customizable.

Betsy and I were pretty stoked with the “Let’s Do Something Wild” mock-up. It effectively brought together all the required elements without feeling overly cluttered. We just weren’t sure what the rest of our team would think, or more importantly, how our users would respond to this design.

Final Adjustments

Getting Closer

Spoiler alert: Our CEO and the rest of our team were totally on board with the “Let’s Do Something Wild” profile header. But a couple of things needed to be changed before heading to usability testing:

• Invite Button

  We removed the Invite Button from the Other User Profile because none of our research indicated a user would invite an off-app contact into Yodelay from that screen.

• Optional Display Counts

  I felt that displaying the counts for Hashtags, Following, and Followers didn’t jibe with Yodelay’s core mission of bringing people together. “Counting followers” can encourage upward social comparison that can have a negative effect on users’ emotional health. But I knew that my CEO wanted them. My solution was to add the option for our users to hide or show their counts to offer a less competitive and more enjoyable experience.

Redesign Interrupted

COVID-19’s Long Arm

Unfortunately, the economic toll of COVID-19 impacted Vyasa in late-June, and I was furloughed before I was able to conduct any usability testing on my designs.

I would have created a usability test that included tasks for the entire app, but here are a few of the tasks I would have related to the Other User Profile:

1. Follow John Smith

   John is your sister’s good friend. Find John and follow him on Yodelay.

2. Send John a Message

   You’re new to Yodelay. Send John a note letting him know that you’ve got an account.

3. Navigate to John’s LinkedIn

   You’re interested in learning more about John’s work as a Creative Director. What company does he currently work for?

4. Common Hashtags

   You and John are both avid stargazers. John follows a few astronomy related Hashtags. Find and follow the one called Starscapes.