Skip to content

Dashboard Design

Posted on:November 14, 2023

A grid showing multiple articles as interactive boxes.

Table of contents

Open Table of contents

Overview

Summary

Roles

UX Designer, UI Designer, User Researcher

Background

Multiple users reported difficulty with accessing articles on Jenni. Altum wanted to launch features that mitigate pain points and make searching for information easy.

Goals

We hypothesized that improving the user experience of the dashboard would see a decrease in complaints and/or an increase in compliments from users.

Process

The steps of Altum’s design process are:

A graphic showing a loop around Define and Ideate. Test and Observe aren't looped.

The Altum design process.

Define

In the Jenni ecosystem, our various users included content writers, customers, editors, and admins.

Notes detailing a user interview.

A user interview with one of our editors.

After collecting the relevant user insights I experimented with making quick design specs that succinctly captured the design’s goals and intentions.

Spreadsheet with details for the design spec.

The design spec I made for the article rejection feature. Here I listed requirements in relation to their contexts and what UI components were necessary to incorporate.

Ideate

There were multiple features involved with the Dashboard design.

A filter system for sorting articles by category (in-progress, finished, etc).

List of articles with filter options.

The first iteration of the article filtering system.

A graph visualizing a client’s articles in their various stages (in-progress, finished, etc).

A vertical bar graph showing the various stages of article completion.

A page navigation system for more easily going through lists of article information.

UI navigation components according to usage-scenarios.

The components and scenarios of the new navigation system.

A table of statistics about individual articles.

An example of the original dashboard navigation.

Dashboard navigation with the new UI components.

The new navigation system applied to the dashboard.

A custom interface for Editors to accept/reject articles.

Dashboard for editors with full tables detailing articles.

Full Editor dashboard layout with drop down options. Note: This iteration was before the new navigation system.

Dialog box with options to edit, reject, or approve an article.

Dialog box with Editor-only functions for accepting and rejecting articles.

A payment processing page redesign.

Three screens showing a step in subscribing to Jenni AI.

The original 3 step process (fig. 1-3) spread throughout 3 screens. The flow ends with the user seeing their chosen plan (fig. 4).

New payment process redesign with all steps on one screen.

The redesigned payment page for a streamlined experience.

A page with a form made of text fields for ordering articles and SurferSEO integration (a competitor service our users were also using).

Order form with various fields for article meta-details.

The article order form with auto-keyword variations from competitor link scraping.

Order form with drag and drop area for SurferSEO export files.

The article order form with SurferSEO integration. Pictured: A user has just uploaded a .txt file from SurferSEO and the dashboard has populated the order form with keyword variations from the file.

A tile-based layout redesign where articles are individually clickable objects as part of the SaaS transition.

Grid of documents with titles and dates created

Test

User testing was done with less resources due to competing interest in the AI-assisted word processor.

Screenshot of a video call for a user test.

Screenshot of user testing with one of our editors. “Guest” is the editor’s phone and not a 3rd party.

Observe

With success metrics of a decrease in complaints and/or an increase in compliments from users we saw a mixed bag of success and failures.

Reflection

The Dashboard was an interesting lesson in the importance of small details combining into a major influence on a user’s experience.

Next steps

My next steps would have included: