Empty Spaces: A Low-Cost UX Upgrade
One of our goals for Eli Review over this past summer was to find low cost but high impact ways to improve the onboarding experience for new instructors — how to get them oriented to the new space and get them working comfortably and productively as quickly as possible.
I did some research just before starting the project ( here are my notes ) and one approach I found particularly compelling was to focus on “empty states” — that is, areas in the app that have no content because the user hasn’t yet taken action.
I turned my attention to one of Eli’s most important empty states, the Instructor Dashboard, which a new instructor sees immediately after signing up.
Before: “What do I do next?”
This is how the dashboard appeared to a new instructor. It was the first UI they saw after they created an account:
The Eli Review Instructor Dashboard as it appeared through July 2015.
The dashboard UI is meant to serve three primary purposes, two of which are related to onboarding:
- Guide first-time instructors to create a new course
- Provide new instructors with resources for learning more about the app
- Enable instructors with courses to select the one they want to work in
Years of observing new instructors had shown us that, despite their eventual success, this iteration of the dashboard UI didn’t live up to our onboarding goals. Specifically:
Users weren’t always aware that creating courses should be their next action:
- The “you don’t have any courses” text wasn’t noticed right away
- The “Create a Course” button was not a compelling call-to-action
The bulleted list of links were almost never used (since they disappeared after the first course was created)
With these issues with the existing UI in mind, I revisited this Rareview article on empty states from my research and found one approach that really stood out:
An example from the Rareview article of how Rackspace (Eli’s former host) encourages action in an empty state.
Two things drew me to this example from Rackspace:
- The UI clearly alerts you to the undesirable state (“you should have queues”)
- The UI directs you to where to go to fix the undesirable state (the “Create Queue” button)
Having been inspired by a smart example, I did what great designers do : I stole emulated their idea.
After: Better Calls to Action
After preparing mockups for a new dashboard and getting feedback from users, we released a new Instructor Dashboard UI in late July 2015:
The revised empty spaces of the Instructor Dashboard
Beyond generally having a more interesting visual look and addressing some long-standing alignment issues, this new UI addresses a number of our previous onboarding challenges:
- The undesirable state is clear (“you don’t have any courses”), as is the fix (the button)
- The microcopy is much more supportive and links to a new onboarding tutorial
- The user assistance assets (the three circles) now:
- Persist between empty and active states — they’re always there
- Link to UA materials users have told us they want (based on support website traffic data)
- Maintain style and copy with our support website (like the Instructor Resource Hub )
Additionally, this new UI supports alternate microcopy for returning users who have created courses in the past but don’t currently have active courses:
Subtly different microcopy for returning users.
While user feedback during the design of this new UI was positive, we won’t really know until we’ve had time to gather data. Specifically:
- What percentage of instructors created courses after they signed up?
- How much traffic is driven to our UA materials from the new links?
While we wait for feedback on these design decisions, I’m confident it will show that this low-cost improvement to this high-stakes UI has substantially improved Eli Review’s onboarding experience for new users.
Originally published at mcleodm3.com on September 23, 2015.