Apex Solutions

Research

  • UX expert review
  • Stakeholder interviews
  • User Interviews
  • User feedback
  • Persona, User story
  • Competitive analysis
  • Domain research

Design

  • Brainstorm/Sketch
  • Onsite workshop
  • IA diagrams
  • Wireframes
  • Visual mockups
  • Lo-fi prototype

Deliverables

  • UX review report
  • Interview findings
  • Visual mockups
  • Prototype
  • Styleguide
  • CSS

Project Summary

Apex Solutions is a global market research company. Apex developers designed a Query Builder tool to allow users to create SQL-like queries without knowing code. Data analysts found the tool both powerful and very confusing. Apex Solutions wanted my help improving the usability of the tool and the rest of their platform.

An onsite workshop with developers and users from Apex greatly informed my designs. Prototypes of ideas from the brainstorming session the day before elicited amazing feedback. By collaborating with users, we redesigned the Query Builder to accommodate their needs.

Users vs. Developers

Approximately 90% of the platform's users are data analysts. While analysts vary widely in technical ability, we trust they are comfortable working in Microsoft Excel and with running predefined scripts.

The remaining 10% of users are software developers who help analysts with more complicated data extraction. Developers write new scripts and develop additional functionality as needed.

Developers naturally designed the platform to suit their needs. However, they neglected the needs of their primary users, data analysts. To achieve our project goals, I used a persona to remind the developers of the needs of our primary users.

Data Analyst Persona

By circulating a persona of a data analyst, I reminded the development team of who are primary users were and their particular needs.

Data Analyst Persona

By circulating this persona, I reminded the development team who are primary users were and their particular needs.

Query Builder Redesign

Visual thinking

During my research, I would diagram queries to better understand them. I realized that just as expressing things visually helped me, the same thing may help our users.

I created designs that allow users to visually compose queries on a canvas.

Query Builder Canvas

Visual expression of the queries helps users understand what they're building.

Query Builder Canvas

Visual expression of the queries helps users understand what they're building.

Maintaining Context

Users define conditions in the side menu which then populate the main canvas.

Some on Team Apex wanted the "Condition Builder" side menu to expand full screen. This would offer more room for input fields and less visual distraction to help users focus.

After some debate, I opted to put the Condition Builder in a resizable side panel. I wanted users to have the ability to see the main canvas as they worked to add conditions. I also wanted to minimize context switching for users during these long, complicated wizard flows.

Query Builder: Condition Builder

The Condition Builder lives in a side panel to help users maintain context of the greater flow.

Query Builder: Condition Builder

The Condition Builder lives in a side panel to help users maintain context of the greater flow.

Text Translation

As I learned to build queries, I would describe my intention in text and ask the team to check my work. This exercise inspired the "Written Expression" window. The window translates what's on the canvas into text, helping users see their mistakes. The previous design communicated mistakes only after the query had run.

This component was a huge hit when I shared it with users at the onsite workshop.

Written Expression Window

Users can check their work with the "Written Expression" window. The window translates what's on the canvas into text.

Written Expression Window

Users can check their work with the "Written Expression" window. The window translates what's on the canvas into text.

Designing exceptions

We wanted to empower users to use the tool in whatever way makes sense to them. However, more freedom for users meant more possibilities to account for. The developers and I worked hard to define the tool's behavior for all scenarios.

A simple example of this can be seen when a user reorganizes an "OR" grouping. If a user abandons a lone condition within an "OR" grouping, the operator defaults to "AND".

Conditions can be drag and dropped on the canvas

Users can drag and drop conditions to reorder them. (slide 1 of 2)

Query Builder: Lone OR condition defaults to AND after its partner is moved to another group

(slide 2 of 2) We defined rules for how the tool behaves. In this case, a lone "OR" condition defaults to "AND" when its partner is moved to a new group.

Conditions can be drag and dropped on the canvas

Users can drag and drop conditions to reorder them. (slide 1 of 2)

Query Builder: Lone OR condition defaults to AND after its partner is moved to another group

(slide 2 of 2) We defined rules for how the tool behaves. In this case, a lone "OR" condition defaults to "AND" when its partner is moved to a new group.

Simple Query Example

Home Page Redesign

Prioritizing user needs

The developers who created the platform naturally designed it to fit their needs. I wanted to also address the needs of the primary users, data analysts.

1. The long list of 20 recent jobs on the home page suits developers who troubleshoot the latest errors. Analysts, who only need to refer to their most recent 2- 3 jobs, found the long list overwhelming.

2. The "Apps" button triggers a modal which displays all available apps in a long list (not shown). Developers launch many apps in the course of their work, but analysts only use the same couple repeatedly. Analysts grew frustrated poring over the exhaustive list to find the few they wanted.

Old Home page design

The old home page design served the needs of developers, but neglected the needs of our main users.

Old Home page design

The old home page served the needs of developers, but neglected the needs of our main users.

  1. Analysts only need to reference their latest 2 or 3 jobs; the long list of 20 is a lot to sort through.
  2. An elusive "Apps" button triggers the apps modal. The modal lists all available apps, requiring analysts to hunt to find the few they use.

Simplifying the UI

The new home page has a much cleaner user interface.

1. Users can now pin favorite apps and jobs to the top of the view for one-click access

2. I simplified the long "Recent Jobs" list.

  • removed non crucial columns from the table
  • reduced number of jobs shown to a scannable 6
Home page redesign

Favorited jobs are labeled with a different color and icon than apps, for quick identification.

Home page redesign

The home page has been updated with a cleaner UI.

  1. Users can now pin favorite apps and jobs to the top of the view for one-click access
  2. I simplified the long list of Recent Jobs
    • removed non crucial columns from the table
    • reduced number of jobs shown to a scannable 6

Accounting for all users

Users who want to search and sort a complete list of past jobs can still do so from the new "Jobs Board" view.

Jobs Board

The new “Jobs Board” allows users to search through all past jobs.

Jobs Board

The new “Jobs Board” allows users to search through all past jobs.

A complete, searchable list of all apps is now available on an apps landing page.

Team Apex was very enthusiastic about these design updates. I'm happy to report that while we made changes with analysts in mind, developers were also excited to pin favorites and appreciated the simpler, cleaner interface.

Apps Landing page

Detailed tiles for all apps can be sorted, labeled, and grouped on the new "Apps" landing page.

Apps Landing page

Detailed tiles for all apps can be sorted, labeled, and grouped on the new "Apps" landing page.

Script Editor Redesign

Finding the right pattern

Data analysts run scripts (or lists of commands) in the course of their work. The Script Editor tool allows developers to edit scripts within the platform.

Like most flows in the original design, the Script Editor was implemented as a wizard. Users complained of not being able to skip steps that were unnecessary to their work. Also, I witnessed users having to navigate back to reference data shown in earlier steps. It became clear that a wizard was the wrong design pattern for this tool.

I redesigned the Script Editor as a dashboard.

1. Data tables display in floating, collapsable, resizable windows (like tools in Adobe Photoshop).

2. Developers can now refer to the code they're editing on the main canvas as they fill in related data tables.

3. Users can easily ignore tables when they're not needed (unlike the previous wizard design). In the wireframe, the "Dictionary" window has been left closed since its not currently needed.

Script Editor redesign

A wizard design pattern seemed a poor choice for the Script Editor tool, so I redesigned it as a dashboard.

 
Script Editor redesign

A wizard design pattern seemed a poor choice for the Script Editor tool, so I redesigned it as a dashboard.

  1. Data tables now display in collapsable, resizable windows
  2. Developers can refer to the code they're editing as they fill in the tables
  3. Tables unnecessary to the current script are easily ignored
Script Editor: Save As modal

We also added robust save options at the request of the Dev team.

Conclusion

The developers at Apex were a dream to work with. They patiently spent hours walking me through the Query Builder tool, to teach me how it should (and how it did) work. I really enjoyed learning so much about a new domain, albeit in a very short timeframe.

The whiteboarding sessions during the onsite were the highlight for me. Having users so involved in the process was exciting and helpful. My quick and dirty prototype managed to convey our ideas enough to solicit valuable feedback. While my time with Apex has ended, they continue to be invested in our new design and will improve it over time.

"Ben did an excellent job of working with the users and iterating through various designs quickly to arrive at a solution that was intuitive and simple." - Project Lead, Apex Solutions

Elephant Hippo Tutorial