Dashboard Design

Help users navigate the Jenni writing service ecosystem.

A grid showing multiple articles as interactive boxes.

Overview

Client: Altum, Inc. (Startup)

Summary

Users of Altum’s AI-assisted writing service, Jenni, needed an easier way to access information on Jenni’s dashboard.

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:

Define. Defining our users and the MVP design.
Ideate. Ideating on design possibilities.
Test. Testing pre-release ideations.
Observe. Observing post-release outcomes.

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.

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:

Validating the filtering system during user interviews with clients.
Discussing with Development if a more refined chart could be built using existing API’s.