Getting Rid of Cards and Getting Down to Business
The previous homepage, with its laundry list of similar looking cards, failed to communicate anything of value to the user. Even worse, it acted as an obstruction in essential task flows. By enlarging and clarifying key elements (active job details, arrival time, time clock), adding buttons for quick access to information most important to users, and encapsulating everything in a calendar-oriented scheduler, the homepage becomes a ready-to-hand tool for task completion.
Creating Clarity, Feedback, and Fun
I was constrained by Wonolo's "badge" system which confusingly encompasses a number of concepts (more on that below). By creating a simpler interface to reduce cognitive load and introducing some game mechanics like animated progress bars, I was able to bring achievement badges closer to their intended purpose of communicating incentives and generating positive feedback.
I Can't Believe This Wasn't a Thing
Like I said, badges are confusing. Shouldn't you be able to tap a badge for more info before reaching out to support for an explanation? I thought so too, so I added a simple interaction that will reduce an unsustainable burden on support staff. I also added a "next steps" button so the user can jump right into acquiring the badge instead of getting frustrated and churning out.
Wonolo is an on-demand staffing platform that connects job seekers (Wonoloers) with companies (Requesters) looking to fill temporary positions in warehousing/fulfillment, delivery, administration, and other categories of general labor.
Competition in the gig economy is tough. Wonolo is up against similar companies like Shiftgig and BlueCrew, with indirect competition from the industry’s heavy hitters like Uber, Lyft, and TaskRabbit. I was hired as a consultant during Wonolo’s “Year of the Wonoloer” in which an emphasis on customer experience and retention were the goals in building a competitive advantage.
The initial brief I got was less of a design challenge and more of a list of features and approaches that needed to be visually realized (shocking, right?). So I leaned in and encouraged the client to fully unpack their strategic goals. Here’s where we landed.
By zooming out from where we started and getting all of this up on the whiteboard, I was able to understand the objective more holistically. From there we reframed the conversation away from the granularity of features and their appearances, and focused instead on the main problems: a high churn rate and a high support ticket to completed job ratio.
Unpacking the Problems
The client already had a significant amount of qualitative and quantitative data to effectively make assumptions about the underlying causes of the problems, so I wrote them down and stuck them up on the board. Time and resources being limited, we drew our attention to causes that we felt tied into the objectives/key results while being actionable in the near-term. Lean methodology, as it were.
By grouping similar causes, we were able to draw out specific areas of concern: the homepage, the rewards system, and a lack of interactive elements. A focus on these areas would hopefully generate the most impact within a reasonable scope.
If that looks unapproachable, it’s because it is. Wonolo’s badge system is so abstruse in fact, that it took three official meetings, two interviews with platform engineers, and a whole bunch of “hey, do you have a sec?” kitchen conversations to generate the above graphic (which has been simplified further for the sake of your brain). Everyone seemed to have competing mental models of the system, and a major culprit of confusion was calling everything a badge in spite of categorical differences. Yikes.
With some initial research and heuristic markups down, I felt like I had established some fair assumptions. Luckily for me, Wonolo hosted an ice cream social for its Wonoloers just down the street (what a company!). Never one to squander an opportunity to speak directly to users, I prepared some questions and took to the party with a notepad. With just a bit of ad-hoc user feedback I was able to crystalize my assumptions into a three-part hypothesis.
If we consolidate and centralize the existing features most relevant to user goals and implement new features that provide feedback on user performance, then we create a locus of control that is efficient and inspires self-efficacy.
By replacing the current badge system with something less inherently complex, then we can hope to see the system generate motivation as intended instead of zapping motivation with an unnecessary learning curve.
By simply adding “tap for more info” interactions to elements like job requirements, then this in-context information will help explain away confusion and assist users by generating flows.
Understanding The Brand
I explored the corners of the product, dug into social media accounts, and looked over marketing materials, all to get a better sense of the Wonolo ecosystem.
Adherence to the current visual look was a stipulation from the outset, so through this process of researching the brand I pulled together a modest design system where previously there had been none.
Understanding The User
One of the benefits of designing for a staffing platform was immediate access to the users. We would just post user feedback sessions to the platform and meet with Wonoloers on a regular basis.
Key User Insights
I tested with Wonoloers throughout all phases of the design process, creating a feedback loop that was inspiring and fun.
Thinking Of Concepts
Empowered with some user insights, I sat down with pen and paper and started generating ideas for approaches.
Rapidly Sketching Homepage Ideas
I knew the current homepage wasn't anything special, but in talking to users I realized how little it assisted them in accomplishing their tasks and ultimately achieving their goals. The focus of these sketches was to imagine what the homepage would look like if important tools and metrics were brought to the forefront.
There's not enough room for everything - on the screen as well as in user's heads! It was tempting to just surface all of the features and functions of the app on one screen, but I quickly realized I had broken the cognitive load bank and introduced a bunch of annoying redundancies.
Identifying Relevant Game Mechanics
Oh man, was that badge system broken. Bottom line, if you can't clearly communicate what badges are or what they are for internally then there's little hope your users will understand either. For over 75% of users interviewed, the concept of badges just didn't land.
Using Yu-Kai Chou's framework for gamification as a guide, I sketched out a variety of game mechanics that could be used to replace the old system.
The mantra I kept repeating in my head was "Work more, earn more," and I tried to focus on keeping the system as simple as this in order to reduce the learning curve. By making the badge system resemble something already familiar to most people (i.e. airline miles, frequent shopper programs, or even the punch card at your local sandwich place), I assumed users would take to it quicker.
All this was hopeful, but simple game mechanics and mimicry could not solve the other broken half of the badge system which was all about requirements and approvals. More on this trouble shortly...
Using Dialogs to Repair A Broken Flow
When testing with users, I asked them to complete a (seemingly) basic task: find a job and accept it. However, I stacked the deck and only included jobs in the prototype that required specific badges to be accepted. When users inevitably came across the Required Badge, confusion came in three distinct flavors - "What's this?", "Do I have this already?", and "How do I get this?"
To address all three of these pain points we just needed to give users the ability to tap on the damn badge! A informational dialog would pop-up to display details on the requirement, the user's status, and a CTA at the bottom that could send the user directly into the flow for acquiring the badge.
After settling on some concepts I looked at competitors in this space. It helped me recognize the industry standards for interaction models, content and design. It was also important that we differentiate the product from our competitors.
Talking To Stakeholders
It's hugely important to involve key stakeholders early in the design process... even if it hurts!
Management and Engineering was into my initial work on the homepage and the modals, but faces drained of color when I pitched my idea of overhauling the entire badge system. "It's a disaster, but I can fix it," I said. "Not today, friend" they replied.
We agreed the system was in need of a redesign, but my direction moving forward was focus instead on a "badge tracker" that helps users understand the current system better.
In observing Wonloers use the app, I was able to identify two recurring behaviors outside of the core interactions of looking for jobs and accepting jobs. One, users would return to the app to look for details of an active job like start time or location. Two, users would often check the app to see their earnings or if payments had posted.
Through this iteration I experimented with floating earnings to the top and cleaning up the Active Job card. News, Recent Jobs, and other cards sit below as a scrollable list.
This approach was initially well-received in user testing. Wonoloers I spoke to were emphatic, but I had to read between the lines. Was this approach truly helping them to complete jobs, or do people just like to see a couple thousand bucks?
Earnings are important, there was no doubt about that, but helping users get to the point where they are collecting earnings was really my focus. Besides, earnings or information on payments that have posted could be displayed as notifications and then easily brushed aside when no longer salient.
The badge tracker went through dramatic changes. It started off as more of a proof of concept, aimed at testing whether users were even interested in keeping track of their badges. That version relied heavily on text and couldn't have been less fun.
The second version was a whimsical lark, and also a complete failure in testing. We all really liked this idea, but we made the mistake of assuming these icons, colors and concepts mean anything to first-time users.
The third version got us closer to a more sustainable approach with simplicity in mind.
This badge tracker idea was not going to work unless it was as fun as it was self-evident. Through these iterations we were also able to discover that tracking or suggesting Requirement and Speciality badges was impossible with the logic currently available on the backend. Those features had to be abandoned.
Helpful features like checklists had to be abandoned early on for similar reasons as the above-mentioned badges.
In the end, the final homepage design embodied a blend between organizer and launchpad, with a splash of news.
The main elements like the Active Job section and the calendar help Wonolors create a schedule and a queue of jobs they feel invested in. By highlighting the start time and the clock start-stop button, I hoped to curb errors commonly made by users.
The finished Badge Tracker design focuses on tracking Achievement Badges with a clean look but animation keeps it from feeling lifeless.