▌ Enterprise Users

Keystone ∕ Table Editor

Objective Keystone is an online authoring tool for governments and financial services.

Given the migration to a new platform, the goal is to implement new design paradigms as part of an overall experience uplift.

░  Opportunity

To improve the table editing experience, based on continuous feedback on both our customers and their users as part of the new platform.

This study is one of many features as part of the overall re-platforming effort.

░  People

As the principal designer, I was embedded in a delivery team of front/back end devs and a senior product owner, working in UK/NZ/AUS timezones.

Supporting the team were our SMEs and enterprise customers.

░  Activities

  • Journey mapping
  • Workshops
  • User/SME interviews
  • Prototyping
  • Testing
  • UI Design
  • Design system

▌  Research

Given the different timezones and availability of the team, I've opted to document research and outputs in confluence as the source of truth. The rationale is so everyone can access and provide feedback on artefacts outside working hours should they need to.

Methods:

  • Workshop kick-offs with SMEs, consultants and customers
  • Field study and interviews
  • Auditing existing experience

░  Review the current table experience

Observations:

  • Table cells cannot be easily manipulated
  • Table controls are confusing, there is no dynamic menu switching between cell/table/content
  • Non-existent keyboard navigation
  • Missing functionality to split/merge cells

░  Review similar experiences

Observations:

  • Our existing customer base are familiar with MS Word for table design and editing
  • Table controls were clearer in context dependent on the level of edit

░  Customer interviews and field observation

Observations:

  • Frustration regarding selection, and the lack of controls that come with it
  • Not enough space for tables to work with given the existing viewport
  • Prefer to use keyboard when working

▌  Insights

These are partial insights only.

░  Users need more space to work and manipulate tables

How might we:

  • Enable a way to manipulate tables in a full screen mode without exiting the experience?

░  Users find it hard to navigate on a page full of tables

How might we:

  • Introduce visual indicators to show where the user is within the document?
  • Be able scroll within a table and not the entire document due to clipping?

░  Users find the controls lacking and out of context

How might we:

  • Change the existing table controls that makes more contextual sense?
  • Visually display what is selected via keyboard navigation?

░  Relationship map

From my research activities, I created a relationship map to outline the ontology of a table after a card-sorting activity.

This is to provide a high-level view that stakeholders align on before solutioning.

▌  Prototype ∕ Testing

We tested the following solution and prototypes during our monthly customer forum for validation and feedback. Our constant cadence throughout our stakeholders helped shape the solution and most ideas were validated for build.

These are partial solutions only.

░  Redesigning table controls

  • I changed the labelling to be more obvious to what the user is selecting (Table or cell).
  • Table controls are more minimal, while removing cell controls and separating them.
  • Some controls were surfaced as toggles rather than dropdowns due to users using it often; this is to remove extra clicks and save time.
  • In tandem, less-used controls were consolidated (such as cell borders) as priority.

░  Full screen

  • Given the limited viewport, we've explored the option toggle between showing left/right controls
  • I've also introduced select all - as it's a commonly used control for formatting

░  Scrolling

  • The toggle for showing the table header and its controls is so users aren't lost when navigating long form tables
  • Scrolling is then focused on the table, rather than the document to avoid double scrolling issues

░  Text Controls

  • On drag, users will be shown basic font and alignment controls
  • On click (within the cell), users will instead see cell manipulation controls (add/remove).

After validating the solution, I've mocked up a high-fidelity version along with annotations.

▌  Aligning to the GEL

In tandem, all Objective products were undertaking a rebrand, and thus the styling and paradigm for Keystone were updated to align with the refreshed look and feel.

▌  Wrapping up

░  Learnings

We were a project team split between 3 continents.

Using Confluence as the source of truth helped our project cadences, whereas before we had may different types of artefacts and got quite lost in the email trails and chats.

2023