Dashboard Redesign

Making a product case for a neglected feature

My team and I wanted to support Study.com’s evolution by reimagining the user’s dashboard as a launch pad that had their best interests in mind. The redesigned dashboard was A/B tested in and increased trial to active conversion rates by 20% and member retention by 10% in the first month.

Problem

After registration, Study.com members landed on a dashboard that didn’t orient them to the site, clearly explain their main features, or offer guidance for getting started.

Gaining approval

Stakeholders weren’t initially excited about our gusto for reimagining the dashboard. To them it appeared to be functioning well enough and it seemed safer to leave it alone. Nonetheless we made a case with our hypothesis that an improvement in our dashboard would lead to an improvement in user conversion and retention. I worked with my product owner to review current usage patterns of our dashboard and within a week I presented some early concepts and wireframes to illustrate our ideas. They gave us a few constraints, but we were ultimately given a good runway to execute our plan.

Constraints

We were constrained to keep all feature functionality as is. I think for this redesign it made sense to scope the project tightly in order to have a cleaner spread of data to analyze. We’d be comparing the old dashboard to the new soley on reorganization, navigation, and visual redesign. We didn’t change any features, but we did spend time reimagining a few.

Requirements and early visions

Project kickoff

I began my research by exploring dashboard patterns and working with my product owner to analyze current usage patterns. We used the data to establish a priority order of features and understand some of the opportunities available to us. Our business goals were to gather data on users and increase the perceived value of the site. For our users we needed to offer clear navigation between features and a clear way to get started with the site after registration. We established that the dashboard would continue to be primarily for students and that a teacher dashboard would come later.

Forward thinking

Currently, the dashboard offers a user lists of their recent activity and basic progress stats for courses they are taking. What our dashboard doesn’t offer yet is quantifications of their activity, content recommendations, or clear next steps. Pushing into the future, we want the dashboard to become a place where users access more personal data and more direction. To this aim I brainstormed an onboarding process that would gather user interests, next step functionality, and quantifications of user activity that would give a more complete picture of their usage.

Prioritizing a user’s first visit

Design goals

My main design goals were improving dashboard feature hierarchy, designing scalable navigation, and designing an equally accessible mobile and desktop experience. While researching dashboard patterns, I began with desktop sketches and explored different modules and layouts, navigation patterns, and ways to encourage new users on their first visit. We wanted to increase our trial conversion rates, so improving a user’s first visit was crucial.

Modules that encourage activity

As my wireframes evolved, we decided to present snapshot modules of the most used features with a next steps module at the top right. We’d need new functionality to make the next steps module truly useful so it was a bit of a stretch goal. In the end we had to dial it back and design it as a static ‘getting started’ entry point into content for new users. The idea is that ‘getting started’ would evolve into ‘what’s next’ that tracked user activity and offered smart next actions. We also wanted to offer new users welcoming and encouraging empty states when they hadn’t yet used a feature and friendly upgrades if they didn’t have access.
 

Mobile approach

I didn’t take a mobile first approach but I did explore mobile layouts and interactions as I was working on desktop. I facilitated a design review with my team to specifically help me explore design solutions for mobile. I ended up giving an abbreviated snapshot on mobile and offering all dashboard features in the user’s drop down navigation. This gave users the ability to quickly see their most recent activity and easily access all modules from the main navigation.
 

Bringing the wireframes to life

Working with a visual designer

I spent the first half of the project sketching concepts and creating wireframes, and the second half overseeing the visual design and building responsive templates. When I handed the wireframes off to Evan, our visual designer, we were in fairly close communication. He would send me comps and we’d review them together with our product owner. Evan created new iconography for each feature for use in our empty states and sidebar navigation.

Development & Usability testing

I worked with another designer/developer on my team to build the responsive templates. I focused on building the desktop and mobile navigation as well as reviewing the final templates and making changes as needed. I also ran a remote usability study on the new dashboard. From the study, we discovered some key issues regarding the prominence of certain features and several issues with our ‘My Courses’ feature. I wrote and analyzed the test and provided my product owner with a summary and suggestions for improvements in our next iteration.

Team synchronicity and personal evolution

There was a lot of excitement on our team around this feature. My product owner and I established a cohesive design process that hadn’t been practiced at our company before. We reviewed data together, held early brainstorms and design reviews, and synced up with the devs early and often. All team members had input, the design team contributed to reviews that I hosted, and we did design exploration in low fidelity to intentionally get visuals out of the early discussion. This project remains one of the best I’ve worked on at Study in terms of the positive team dynamics and resulting learnings that were achieved.

Evolving my communication skills

This was the first time I had handed wireframes off to a visual designer. We were in close communication but things fell apart a bit when I took a few days off. When I returned from my time off the visual designs had taken one of the main features in a direction that I didn’t foresee, including renaming. I adjusted a few of the decisions with solid reasoning backed by my Product Owner and let a few things go. I learned to keep in closer contact with my teammates especially if considerable changes could be coming down the pipes and I’m going to be absent for any amount of time.

My role:

interaction design, wireframing, responsive development