Popbookings can be described as the uber of event staffing. It helps users easily find jobs local to their area and seamlessly communicate with agencies and event directors. It manages both the talent side (users) and the agencies, but for our sake, we were only concerned with the talent and their experiences.
Role: UI Designer - Wireframes, high-fidelity designs, prototyping
Details: Team of 3 Designers
Time: July 2023 - August 2023
Tools: Figma
Problems:
• The profile is pretty buried within the product right now. After sign up, the app directs the user to the job board but is unaware of how their profile looks after they submitted it. This has led to a lot of “bare minimum” profiles with out of date information.
• Requested actions and alerts on the app are not visible.
• The Registration flow is lacking in terms of usability
Outcomes:
• Hi-fidelity new designs for the Sign up, Profile page, and Inbox page with added features
• Clickable prototypes of these designs
Erika Klotz, the CEO, came to us with a simple problem: the current Popbookings' app needed an entire overhaul.
How might we improve Popbookings' current app for our users?
We did not engage in much brainstorming as Erika had a solution in her mind already. To make the Profile easier to access, it would be moved to the bottom navigation bar, with additional information to be added by users. Creating a new Inbox tab would tackle the missed notifications and messages. Adding the necessary elements, and redesigning the UI handled the Registration Flow. We were told to create wireframes, hi-fidelity designs, and prototypes of these.
Our goals included to make sure that users had an easy and straightforward way to access and edit their profile, even encouraging them to edit it. Additionally, with the Inbox, all important and actionable information would be in one place. With the Registration flow, it will feel a lot smoother, with options to go back and other important UI elements in proper spacing.
Solution
I worked on all the wireframes, the hi-fidelity designs of the Profile, and its prototype
My Role
Profile User Flows
Inbox User Flows
Before diving into wireframing, I recognized the need to map out the user journey. I decided to create user flows for each essential section, a step not explicitly requested but one that would prove invaluable. These flows gave us a clear view and understanding of the user.
The profile page needed an entire overhaul as it was clearly lacking details. It needed to showcase a lot of personal information about users. It was challenging to come up with a way to display and edit a lot of information on a user’s profile. Almost all of this information is brand new. Users were never asked about it before.
The Inbox proved to be tricky as it would include a variety of different features: alerts, reminders, and direct messages. Currently, it only contains messages.
Visualizing Ahead: User Flows
“I knew that I needed to create user flows to make sure that the user’s journey was clear.”
Putting the "Pop" in Popbookings
I dived into sketching, taking inspiration from dating apps like tinder and Hinge, as their profiles have lots of information listed on them.
Inbox Issues
Originally, I envisioned the inbox as a space divided into three separate tabs - messages, notifications, and reminders. But Erika had a different vision: she wanted all three elements to coexist seamlessly, side by side, when users viewed their inbox. In other words, all three elements are visible at once.
How could I distinguish messages, notifications, and reminders, each with their own unique contexts and purposes?
To achieve this, I introduced a visual distinction. Drawing inspiration from Facebook, I decided to use sub-icons within a larger, contextual icon. For example, a bell icon, nestled within a bigger icon, denoted notifications. An exclamation mark icon served the same purpose for reminders, while a chat bubble represented messages. These sub-icons offered users clear and concise information about the nature of each element.
For instance, a bank-related reminder would feature a bank icon, accompanied by an exclamation mark to emphasize its importance and the fact that it is a notification like it’s shown in screen 2 in the sketch below. This design approach not only enhanced usability but also added depth and clarity to the inbox, ensuring that users could easily identify and respond to different types of content.
Inbox Sketches
While tackling the wireframes for these flows, I expected the Inbox page to be the most challenging due to its initial complexity. However, the profile page soon emerged as the real puzzle to solve.
The profile page was actually the hard part. There was an abundance of information to convey and countless ways to do it. Should we employ toggles, use pill selectors, or opt for a dropdown menu? Our goal was to encourage users to complete their profiles, as it's a crucial step after onboarding. But we also recognized the risk of overwhelming users with a lengthy list of inputs, which could be discouraging.
To strike a balance, we decided to offer users the choice of immediate or deferred input. Some information could be filled in on the same screen, while others would open on separate screens for ease of completion. This approach ensured flexibility and prevented users from feeling overwhelmed.
Immediate or deferred input: users can choose to fill it out now or later
Profile Problems
Viewing your profile
Feedback from Erika inspired a "preview" page for user profiles, accessible by clicking the Profile tab in the bottom navigation bar. This preview offered quick stats like user ratings, check-in percentages, and response rates. More importantly, it provided a dedicated space for Profile Boosts, a unique marketing feature that allows users to enhance their profile's visibility. This change not only improved the user experience but also allowed us to promote Profile Boosts more effectively, rather than burying them at the bottom of the Edit Profile page.
What the user first sees after sign up
Profile Wireframes
Profile view from user's perspective
A profile that pops
You can test the prototype here
Final thoughts
I worked on the hi-fidelity designs of the Profile page, as it was the one that needed the most reiterating and edits, and I still was updating its wireframes.
To create a dynamic and realistic prototype that updated the screens as information was inputted, I had to design additional screens. However, a hiccup emerged: I realized I had forgotten to include a seamless transition from viewing to editing the user's profile.
It was far from a minor oversight, and I wished I had spotted it earlier, affording more time for deliberation.
Instead, I had to swiftly adapt. The solution came in the form of two buttons within the prototype – a quick change that allowed users to toggle between viewing and editing modes.
It was at this point that I realized I messed up and forgot one important detail.
First iteration of Hi-Fidelity Profile designs
How could I have overlooked such an important feature???
User's view of how their profile looks to others
One lesson I've learned is the importance of thoroughness.
I realized that I forgot another detail: Instagram follower count on the Profile.
This oversight, despite my best intentions, serves as a reminder that nobody is infallible. It's a humbling experience that reinforces the need for meticulous attention to detail in the design process.
Another poignant realization is the significance of user testing. Regrettably, our project schedule did not allow for usability tests. I wish we could have gathered direct feedback from users to validate our designs and make iterative improvements. User testing is the ultimate litmus test for user-centric design, and I've come to appreciate its role in shaping successful products. I am curious to see how our changes would’ve played out in testing.
Furthermore, this experience highlighted the importance of the ability to adapt when unforeseen challenges arise in the design journey. Adding in the “edit/view” button at the very last minute in the top corner was the best I could do.
Had I more time to tackle the "edit/view" detail, I would've placed it in a different position and rearranged some elements. There's a pencil icon on the user's picture in their profile, so there are two ways to edit. Maybe only a View button would be necessary then. But maybe users would associate that pencil icon with only editing their profile picture and not their whole profile. This again highlights the importance of user testing.
In spite of these challenges, I am optimistic about the impact of our redesigns. Users now have an easier time accessing and editing their profiles. They no longer miss important notices, like booking confirmations or alerts. The introduction of personality, vibrant color, and streamlined usability into the designs is bound to make Popbookings more engaging and user-friendly. It's a significant improvement over the previous experience, and I believe it has the potential to resonate with users based on my own somewhat frustrating experiences with the existing Popbookings app.
As I conclude this project, I am reminded that every endeavor, no matter the outcome, offers valuable lessons for growth. This journey has deepened my appreciation for the intricacies of UX design, emphasized the need for user feedback, and reinforced the importance of thoroughness. It's a reminder that in the world of design, there is always room for improvement and refinement.