NimbleStory Improvements

Senior UX Strategist at Throughline

January 2022–August 2022

UI/UX Design

UX Strategy

Context

I was brought into this project as a UX strategist to help sustain and improve an internal tool called NimbleStory. This tool is used for presenting, housing, and creating content for a set of clients. As it grew in use, clients and users left feedback on areas that were confusing or could use some refining. I also developed new areas and fit requested features into the existing scope of the tool, designing screens and flows for a development team to deploy.

SSO Flow

Nimblestory Single Sign on Flow

My first area of improvement was to create a Single Sign On flow to make login smoother and enhance security. I developed a conditional flow based on the the lead's feedback and features he wanted from a backend requirement.

Content Explorer Navigation and Framing

Nimblestory minimap improvements

The next area was a larger task based on a client requirement, but also trying to fulfill internal to the company needs. Within NimbleStory, there was a specific flow called Content Explorer where users could be guided through visuals or have a free roaming, areas of interest approach. I redesigned a control area to account for both purposes, as well as other controls for switching perspectives, zooming in and out, resetting view, and viewing a minimap.

This was tricky to balance, there needed to be enough interface for the user to have at hand but not get in the way of the purpose of Content Explorer. We drew from some collaboration tools for solutions, as well as consolidating some complexity that already existed.

Screenshot of panel designs
Screenshot of expanding panel designs

Related to reframing the controls, I was tasked with redesigning panels of information that pop out once hot spots are triggered. For this there were a lot of redundant panels that weren't laid out well, so I built up some guidance based on which should be used for which purposes. A few specific elements needed to be completed like a start session button, and a confirmation that the session was completed. In addition, I had to solve how the minimap and player respond to expanding the panel from the left side.

Progress and Milestone Tracker

Nimblestory Progress tracker and timeline

This feature was highly requested by employees in the company to keep track of what stage a project is on, as well as showing a timeline of events linked to milestones. Originally I had the steps broken out into the 3 phases of the company's process—Explore, Envision, and Execute—but in other use cases there would be more steps with long titles or many steps. This was solved with hover states on steps that weren't currently the focus to keep things neat and tidy.

In addition, I designed a full timeline to keep the full breadth of work accessible and keep a record of what happened in the project.

Nimblestory Progress tracker and timeline

To go along with the basic progress tracker, a detailed version was developed to access project timeline details, editing capabilities, and templates. This contained more details of individual steps, deliverables and files attached to steps, and a bit more granular view of what happened during the duration of a project.

Project View and Controls

Nimblestory Progress tracker and timeline

In this area we were surfacing more controls of the back end system to the user on the front end. This set of controls gave them access to different viewing options (card and list, split views), as well as being able to enable and disable different views in the editing area.

Project Plan Editor

Image of user flow diagram, stickies with screens and actions written on them
Image of Project Plan wireframe flow diagram

After we implemented some basic Project Plan functionality in the back-end and UI, the user needed an area to create and edit project plans within a project. This involved some more in depth planning and design. I lead two other teammates on user flows, wireframe diagrams, and then prototypes that were tested with three people within the company. (wireframe and flow here

Gif recording of Project Plan prototype

I performed testing, developing a guided action list and basic framework to capture notes. We did two prototype sessions over video chat and one that was self guided with a list of instructions. Out of this, we got valuable feedback on assumptions and problem areas from a user perspective. After the sessions, we finalized the flow and passed it off to development.