Improving Dribbble app navigation step by step
Recently, I’ve been pretty active on Dribbble sharing my current work in progress. When I say active it means a brand-new post almost every day. This routine increased my interaction with the platform. Without giving any thought, Dribbble iOS app got on top of my list of the most frequent apps on my phone. This is new for me because till recently I haven’t been interested in this app at all mainly because of its design that did feel immature. However, as it happens in life, a need prevails esthetics and here I’m using it on a daily basis despite my emotions. So what does it mean?
Frequent usage leads to noticing all the flaws because they cause lots of pain. Sometimes I call them mental wounds since this is exactly what happens when you hurt one spot over and over again.
Mental wound #1. Checking out the number of followers
It’s not a secret that one of the reasons we, designers, use Dribbble is to gain an audience to promote ourselves and our services. Despite any ethical issues that may come with this topic, followers matter, especially in the modern crazy social world.
Here’s how it’s done in the app right now:
- Journey starts at the home screen (popular shots feed)
- Then tap on the profile pick in the top left corner
- Tiny dropdown appears
- Tap on your profile name
- Profile screen opens up
- Scroll down to see the data we’re looking for
To get to those numbers you go through this all over again multiple times a day. Especially in first hours after a shot has been uploaded.
Problem
The first obstacle on our way to the goal is that tiny dropdown. It’s the one I’m going to focus on in this post in more detail. First of all, let’s look what doesn’t fit right with this bunch of pixels in the top left corner.
Inconsistency
It’s not aligned with other action icons in the top bar like activity and search. Both of them lead to the separate screens. When two of three elements behaves the same, expectations are already set for the third one. However, it’s not a case for profile pic and it triggers dropdown without any clue for the user.
Ambiguity
It forces think and ask questions instead of helping to reach the goals in the stealth mode. For example, activity icon is in this dropdown and in the top bar at the same time. There is a question about such locations. Are those activities different so we have the same icons placed in two spots? Apparently, they both lead to one destination when we tap them so why don’t we leave only one activity icon?
Genericness
It’s too plain without clear focus on important elements. No prioritization has been spotted here so upload option is overlooked. I even haven’t been noticing it for some time when it could benefit me greatly. It’s an amazing possibility to upload your work right from your phone and it needs to stand out more. It’s a call-to-action button from users perspective and no need to have it lost in the crowd of other actions.
These arguments made me open Sketch and try my best to propose an alternative version of the navigation. Below you’ll find step by step process accompanied by motivation and reasoning regarding how this part of the app works as well as how it looks.
Solution
I need to admit that this design was highly inspired by Twitter app. Not just because I love Twitter’s approach to design but because Dribbble always has been my “Twitter for designers” with its content limits 400x300px per shot ~ 140 characters per tweet and low barriers to post anything ☺️ In this case, the approach that works for one could benefit another one too.
1.0. Start
A choice has been made in favor of left side drawer with a more real estate in comparison to drop down. More valuable information could be populated here. Surely, profile pic could lead to the separate screen as search and activity but along the way, I decided not to stick to those two. Right now, the right left corner is cluttered enough and it’d be great to revise that section and the way how it behaves. Looks like a good topic for another article 😉
1.1. Setting up hierarchy
As with any other project, I start defining content first. The best description of this approach is Paul Rand’s words:
Content is the raw material of design.
— Paul Rand
Just adding the text layers helps to see the overall scope of work and analyze the information and visual hierarchy beforehand. This is the step where I made a decision about what elements are of the most value for me on Dribbble. So seeing followers right there was pretty natural. Placing it right under the name is also a fitting spot. Usually, we see location label as a true companion of the name. It works as convention defines for someone’s else account but when we are talking about ours —the utility of the changing number of followers beat utility of own location.
Next in the line is upload option which is going to be a button as we used to — with backgrounds and maybe an icon. At this stage, I wasn’t sure about the last one. Keeping this thought in mind I surrounded “Upload” with bigger spacing on top and bottom to separate it from other content elements. Talking of which, there are four links that make much sense in terms of frequent Dribbble usage :
- Profile — to check out own content
- Messages — to talk to potential clients
- Stats — to analyze how profile is doing
- Buckets — to get inspired with saved shots
The last two are disappointedly overlooked in the current app version as well as an option to switch to the team account. Since the launch of teams on Dribbble there has been a huge focus on them. Eventually, teams are overtaking the Dribbble game. This is a big surprise not having them in the app similarly as it’s done in the desktop’s sidebar and main nav dropdown. So it seemed obvious for me to add “Switch to…” element to the drawer’s navigation.
Similar to team’s toggle, there are two new items on the list — settings and sign out. They are of the global origin which means these options can be needed at any point of user’s journey. I personally, hate digital products hiding them somewhere in the dungeons of information architecture forcing me to sneak around and waste my time leading to the negative emotional state. Moreover, if user needs them something is already not alright and the line between positive and negative emotions is very thin.
The last new element I’d like to cover is a pro badge. The intention was to have it change to “Team” once the user activates the team’s account below in the drawer. Firstly, it’s gonna be one of the indicators that the account has been changed. Secondly, it’s good to revise what pro offers are and moreover when an expiry date is. Earlier in the web version, I had a problem with finding this information fast when I needed it quickly. So having it affordable in the app was one of my priorities.
1.2. Working on container
When the content skeleton is set up it’s time to work on visuals. Here’s a rule of thumb about aesthetics I’ve worked out through the years of experience:
Start with bigger chunks and gradually move to polishing tiny pieces.
That’s why the first thing to tackle is a container for the drawer. There are two things to talk about here — width and color. With a mindset that is keen on simplicity, I wanted to avoid any visual clutter and lessen perception overload. This resulted in no dedicated element to close the drawer rather than cut off background to have a free space out of the container. Tapping out of the drawer will close it and return to the screen that was initially opened.
Well, since the size is defined let’s move on to the next issue — the color. There can be huge debates which theme is better — light or dark — but what if users could choose a theme themselves. Just imagine Dribbble dark mode 😎 I bet lots of folks will choose it as default 🖤 (and here’s one more topic for the next step by step case study 😉)
But for now, I decided to choose light one as refreshing color scheme that relates to the website’s profile card in the sidebar. Of course baring in mind to propose the dark alternative in the end when all details are finished. One more thing in terms of color appliance, instead of neutral fading overlay, a bit of color, I mean brand color, can reinforce the perception of the brand and can nicely resonate with the next Dribbble-pink element 👇
1.3 Focusing on call-to-action
As mentioned above, a goal was to establish a clear connection between the drawer and the website’s profile card in the sidebar— the same background, similar typography, positioning etc. This is when subdued typography elements popped out and the spacing began to come closer to the final design. Despite these random tackles, the next primary focus was on the second large element — the button, which gained a new title “Upload shot”. Longer label has been derived naturally from the belief that being explicit is underestimated in so many digital products and Dribbble could be better than that just speaking to its users more clear and comprehensible. Mentioning “shot” reminds one more time about Dribbble’s glossary which is good because it adds a few points to the strength of the brand.
1.4 Grouping elements
At this point, important things have already been handled. It’s time to revise the structure one more time whether recent changes had an impact or not. I often revise this aspect of design along the way because the visual order can be deteriorated significantly even by a tiny detail. For me it’s like checking safety belts — good to know they are working and can save you when things go wrong. The check means nudging some elements a few pixels up or down, closer to each other or vice versa. This kind of work leads to cleaning the mess in the layers panel inside the Sketch file. At early stages I prefer to stick to the mess inside because it ensures creative freedom and wider thinking. But when design strategy is settled it’s good to clean it up and keep it tidy because focus on detail is exactly what coming next.
1.5 Creating icons
Previous step helped to rethink overall design and it was clear that something is missing. Yeah icons were the one that could add much more value next to each link. Since Dribbble website uses icon+link combination frequently this is the way to follow for the app as well. At first, I was planning to use existing icons, just to grab them from website within Chrome developer’s tool. This attempt revealed that some icons are image files when others are embbeded as svg code right into html. This fact push me to recreate old icons and create from scratch a few new ones. In fact this part I enjoyed a lot because icons are so challenging to work on with their tiny dimenssions. Once the list of icons were finalized revision was on its way. The verdict was that the core list — profile, messages, stats, and buckets— is missing somethings.
1.6 Adding Activity item
As a regular Dribbble user, I knew what it was. Activity is the one that stands along with the platform’s pillars — profile (the array of shots), messages, stats, and buckets. Acknowledging that faced me with a problem I was describing at the beginning — two places to open activity — in the top bar and the dropdown. However, it was already decided that working on the drawer menu it’s better to be a forward thinker and omit restrictions caused by the flaws of the current version. Another argument to have activity in the drawer was the global nature of this functionality — a need to reach it out at any point of the user journey. Decided! Activity is going to join the navigation list in the drawer when the top bar is a great candidate for the next revamp case study 🙌
1.7 Polishing details
When a new item had been squeezed into the list the spacing needed another thought to ensure enough real estate to tap conveniently. So here’s me again nudging elements up and down 🙃 to prepare not just nice-looking and visually balanced design but also affordable one. Once it’s done the mock is almost ready to present but it’d be good to add a tiny indicator to the activity and messages since it is an inevitable part of the Dribbble brand. This tiny dots is one of the things that Dribbblers encounter regularly and it’s a bunch of pixels that triggers our emotions whether it’s a new like, follower or even better new job opportunity is coming. Certainly, I couldn’t miss it 💕
1.8 Switching color mode
As was promissed, here’s a dark version of the drawer. It was almost effortlessly to convert light into dar thanks to the smart official color palette Dribbble has. The only thing that was changed — the color of the text for the links and the opacity of the dividers.
Now, question to you, my dear Dribbblers 😀
Which one do you prefer — dark or light?
Would you like to switch between dark and light mode on Dribbble as it’s possible on Twitter?
Looking forward to hearing from you. Before you go thinking about alternatives for the current Dribbble app here’s a complete progression from the first to the last screen 👇
Let me know if this post was informative and helpful for you. Ask anything that caught your eye along the way reading this piece. Of course, stay tuned for the part 2 😉
