To hone my skills in UI design, I visited a site called Sharpen.design and accepted one of its challenges. The task was to create an artist profile for an Italian composer. I initially thought this would be easy since I had done this type of project frequently for mobile in the past.
What ended up being a challenge was competitor analysis and determining what counts as conventional design, versus uninspired replicating of what works in other apps. That’s when I remembered a few points in Steve Krug’s “Don’t Make Me Think,” which suggested there’s nothing wrong with conventional design because what is familiar is typically easy to use.
The results of my work through four experimental mockups can be found below along with my initial wireframe.
Project
Personal project
What We Did
UI Design
Version A
This mockup is straight from the wireframe. It’s modular and keeps the buttons simple. A developer could build this page under a tight deadline as part of a Phase 1 product.
Version B
An attempt to balance the experience for the user. There’s more visible information, yet still easy for users to scan and quickly find what they’re looking for.
Version C
Here’s where I returned to experimenting with tabbed navigation and avatars. Research made clear which CTAs are conventional in music apps and I included them here.
Version D
It made sense to have tabbed navigation closer to the page’s content in the body. I established a better sense of hierarchy based on time-sensitive and relevant items by using scale and contrast.
Wireframe
Wireframe
In my experience, designing user profiles has consisted of the usuals: avatar, cover/background image, username, short bio, followers, following, personal link, and content.
I represent all these things in the typical geometric shapes found in wireframes, circles, squares, and rectangles. From there, I’d ask for feedback from my seniors and peers, and their questions would often reveal things I hadn’t thought of yet (i.e. what happens when the user taps this ellipsis/more button).
Back to the drawing board.
Oftentimes, briefs can be quite vague, but research almost always brings clarity. Even though this was only an exercise, I can imagine some questions I’d immediately ask:
- Is there a major difference between the format of an artist’s profile page and the average user?
- What features in phase 1 of this design are most producible by our developer(s)? What should I look out for?
- Can you take a look at this and tell me what you think?
Most times, I make more than one wireframe, but given the nature of this challenge, I made this one and iteratively designed more from there.