#FeatureCrushFriday: Account, Profile, and Settings

What do you think of when you hear the word Account, Profile, or “Me” in an app? What about Settings? Are they the same, or different? For the first edition of #FeatureCrushFriday I’m diving deep into my new obsession, a largely overlooked but integral part of every app- Account screens. Seeing as I’m an iPhone user, I’ll be focussing on iOS apps.

When it comes to Account and Profile screens I often hear, “It should be pretty straightforward.” In this case, the word “straightforward” means undeviating. Ignoring the fact that deviation breeds innovation, this begged the question: is there a set standard for Account designs?

Before jumping into my analysis, my idea of a “standard” Account screen looked a lot like this:

That is, a lot of table cells. But this wasn’t what I found.

Account designs don’t seem to have a standard. Some apps’ Account tabs do focus on profile and settings, as you can see above. They display personal and sometimes sensitive user information in a clear, organized way. But how often do you go into an app and change things like your name, email, address, password, payment information, or notification preferences? How often do you view help or legal information? How often do you log out of an app? When a navigation tab is devoted to infrequently used actions and information like this, it gets low user traffic.

Many Account tabs are moving towards surfacing more frequently used, dynamic information associated to the user (such as Friends, Favorites, Activity, and special actions). Devoting Account to more functional, usable actions and information leverages its prominent position in the bottom navigation and undoubtedly leads to higher user traffic.

Another growing trend is putting Account in the top navigation, moving it from its standard location in the bottom navigation. This trend can be seen on apps like Snapchat, Nike, Asana, Flipboard, Quip, and Spotify.

Dynamic Account Screens

Instagram is the OG of dynamic Account screens, rocking theirs since launch in 2010. Account has been part of their bottom tab since 2011 when they redesigned their navigation. The screen has since expanded to include Feed, Profile, Tags, Friend Requests, Archived Posts, and Bookmarks.

Spring has taken advantage of the dynamic Account screen since their 2014 launch, using it to surface information like Favorites, Orders, Brands, Credits, Cart, and Settings. Holding so much information in Account gives a lot of flexibility to the other tabs, which are focussed on a tailored shopping experience. Spring even adds a fifth tab during the holiday season for specialized content like holiday gift guides, which wouldn’t be an option if Favorites or Brands was its own tab.

Since introducing a tab navigation during their relaunch in late 2016, Classpass has worked to add a lot of functionality to their Account tab. This tab now includes Past classes, Favorites, and Friends, as well as links to Settings, Profile, and Buying more classes. Like Instagram and Twitter, Classpass’s Account shows you what your friends will see when they view your profile (plus, they will be able to see your upcoming classes). Classpass is the only app I could find that truly redesigned their Account and navigation in general since their initial launch. In the old designs, Classpass used a navigation drawer with Account, Favorites, and Friends being their own navigation items. Combining these navigation items together was a risky move, but I think it paid off. Their navigation has now evolved to include a personalized Home screen and Videos for at-home workouts.

Where do these fall short?

Using my Kickstarter account as an example, when there’s no content to populate in a dynamic Account screen, it looks pretty bare. A lot of apps don’t handle this use case with anything else but empty state copy. While this might be a red flag for some people, having an Account screen appear empty for some users isn’t a bad thing. A user who sees an empty state on a dynamic Account screen is either a new user (who most likely has no need to access profile information or Settings) or an existing user who isn’t very active on the app.

In apps that deal with secure information, such as Mint and Zocdoc, I can see there being a sense of safety for the user in surfacing Profile and Settings information at a higher level.

Top Navigation Placement

Asana actually implemented a top navigation Account all the way back in 2014 with their initial iOS launch, and maintained it after their 2015 redesign. The Account button is persistent in the top navigation until the user drills into a specific item, such as specific messages or tasks. While the placement works well, the lack of information and action held in Account leaves something to be desired and makes me question the need for its persistence in the top navigation. The Account only lists the user’s organizations and spaces and the gear icon brings up an action sheet with very limited Settings options.

Spotify implemented this change during their adoption of the bottom tab navigation in 2016 — a great solution for an app that previously had a hamburger nav that held more navigation elements. The Account icon is accessible in the top left of the “Your Library” tab, and links to the user’s public profile. Interestingly, this is kept separate from user settings, the Settings gear icon seen in the top left corner of the “Your Library” screen. This is a great distinction. Is a user who wants to view their public playlists and followers the same user who wants to go in and inspect their playback, device, and notification preferences? Most likely not.

In the Nike app launched in late 2016, both Account and Cart are persistent in the top navigation, while only using four tabs in the bottom navigation. Their Account modal holds a variety of information like Profile, Shopping Preferences, Friends, Orders, Events, Activity, Posts, Likes, and Settings. Also, since the app devotes two of the bottom navigation tabs to tabs with minimal content (Services and Inbox), I’m curious why Account didn’t make the cut.

Where do these fall short?

Placing account in the top navigation requires designers to ask themselves more questions. Which screens is it accessible on? It is persistent? If it’s persistent, why isn’t it in the bottom navigation? Does it make sense to have a dynamic Account screen if it’s in the top navigation, out of reach of an easy tap for the user? Do we package it with Settings, like in the Nike app, or do we separate it the way Spotify does?

Flipboard is a great example of a top navigation Account that poses some usability issues. Flipboard introduced a top navigation during their redesign earlier this year. Their Account has two different access points depending on which part of the app the user is viewing: a vector in some, and a profile photo others. This inconsistency is confusing and I’m not quite sure why this decision was made.

#FeatureCrushFriday Standout

At the launch of their redesign in June, Twitter introduced a top navigation Account icon that was persistent across the app. After a lot of confusion while taking screenshots for this post, I’m lead to believe that Twitter is A/B testing 2–3 different Account designs! (Alternatively there could be a bug making my app change the design every time I delete and re-download the app, but I’d like to believe Twitter is feeling my account feature crush as much as I am).

In Design A Twitter places a persistent Account icon in the top navigation. When a user taps on the icon, it opens their Account screen, with links to Settings and Profile. The Account icon is so persistent that I can see it even when I’m typing into the search bar. This made me wonder why Twitter didn’t just move it to the bottom navigation, especially since they’re only taking advantage of four out of the five possible tabs. The Account screen here holds a lot of information. However, besides the buttons to the right of the user’s avatar, it’s reflective of what other users will see when they view their profile.

In Design B Twitter places Account back into the bottom navigation. This placement takes advantage of the five possible bottom navigation slots, and declutters the top navigation of the rest of the tabs. Beyond that, the design remains unchanged.

In Design C Twitter once again places a persistent Account icon in the top navigation. However, instead of linking straight to your Account screen, it opens up a drawer. This drawer provides a few options and separates your Account screen (profile) from Settings (Settings and privacy). When a user taps “Profile”, it brings them to the Account screen. Now the only button next to their avatar is “Edit profile”. Since Twitter’s Settings section has minimal content, this could be a great solution to clean up the Account screen, which is already flooded with information. I’ve also noticed that Twitter removed the Account icon when the user is typing into Search.

Preserving the bottom navigation once a user has tapped into an item in the drawer is an interesting decision, and I’d love to know why they made it (if a user taps into their Account from Home and then goes to Messages before tapping back into Home, they might be confused to see their Account- only to remember that they had been viewing it previously).

#FeatureCrushFriday will be a recurring blog series highlighting my thoughts, obsessions, and crushes on mobile app features. How did you like the first post? Do you have a favorite Account screen? What’s your #FeatureCrushFriday? I’d love to hear from you!

Edit 8/24/17: I’ve just noticed that Nike’s newest update shows Cart and Account into the bottom navigation!

Versett is a product design and engineering studio in New York and Calgary, Canada. If you like this post, you’d love working with us. Say hi at http://versett.com/