2018, Product Design, UI Design

Enso is a web app commissioned by the University of Virginia Medical Center in order to mitigate burnout by helping employees check their personal and professional wellbeing.

Designing a Survey Creation Tool for data obsessed scientists.

Is it difficult?

As a designer, you are not exactly happy when a client approaches you with these words “We need a survey creation and reporting tool“. Immediately you start thinking to yourself, do we need another one?

The team of scientists from the University of Virginia Medical Center was kind enough to sit down and explain why they care. It was all to mitigate burnout by helping employees check their personal and professional wellbeing. 

Workplace stress is a critically widespread problem. 80% of American workers reported feeling stressed on the job every day. This overwhelming prevalence means that stress as a phenomenon greatly affects employees and employers alike.

The Challenge

Design an easy to use admin dashboard for surveys and also have a user-facing web application. Analytics for Admins and Reports for users were also important.

It sounds simple, right? It’s not.

We kept exploring how deep the rabbit hole is and after several meetings, the project got split in three phases. The first phase being the Admin Dashboard, the second and third phase dealing with users and reports.

Employees who have a stressful workday don't like doing surveys. There was no clear path to a solution right now.

How to build successful surveys?

It was a difficult question without a clear answer so inspiration was necessary. After another meeting with the client a lightning bolt struck. The scientists offered our small team of engineers and myself to complete an MBI. This is where the hook was and it was glorious. 

The Maslach Burnout Inventory (MBI) is an introspective psychological inventory consisting of items pertaining to occupational burnout.

Once I completed the MBI, the results were surprising. I was getting close to a burnout. Finally, I was able to understand the importance of surveys.

People need to complete these and become aware of their Emotional Exhaustion, Depersonalization and Personal Accomplishment scores. This was educational, emotional and eye opening.

Time to do the work!

The user needs a robust admin tool for Survey creation.

Turning Concepts into User Flows.

Break down the Survey Administrator goals and app’s dashboard functionality into user workflows. These visual diagrams help us to identify navigation, interaction, categories, patterns, and discrepancies in how the app will work versus how it should work.

1 The user has a simple navigation. He can go between surveys, reports or profile.

2 The user can view all his surveys as a list view or card view. Each survey has a title, status of activity and date.

3 The user can create a new survey. Needs to be focused. Maybe modal? Maybe a new page?

4 The user needs to define the title, exp. window, set a group and category.

5 The user now can add questions to the survey. He can also save a draft and live edit.

6 The user can define two types of survey questions. Multiple choice and a slider.

The goal was to simplify the number of actions taken during the survey creation process. We also included ideas like Card Views, Archives, Templates and Drafts.

The scientists already had a general idea of what was important. After couple meetings we created the UserFlow Diagram above.

As a designer you always want to enhance the experience but it was important to follow the MVP outline. Reports and Templates ended up in Phase Three and Survey Archive got in the Backlog with intentions of adding it back on the roadmap.

Quick Logo

Simple, clean and something fitting the Enso name.

In Zen, ensō (円相 , “circle”) is a circle that is hand-drawn in one or two uninhibited brushstrokes to express a moment when the mind is free to let the body create.

The logo was born out of Montserrat font family. 

Wireframing, content hierarchy, colors and visual aesthetics.

Because the navigation contained only two options: Surveys and Reports, a vertical option was out of question. Keep it simple. The other important thing was not to spend a lot of time sketching and developing detailed high fidelity wireframes.

The focus was on the content hierarchy, how the Surveys look, and feel and how the admin interacts with them.

Considering the client’s requests, it was only logical for the UI to take the front seat. Visual consistency was important because it would guide the user during the survey creation flow.

The client did not want to look like other flat designed dashboards nor use material design. , I was able to create something in the middle that looks modern but at the same time respects the old gods of design. Minimal information, clean presentation, shadows, and colors would help the admin figure out how to use the application.

Survey Creation Flow

Building out a survey is done through two steps. First step would be a New Survey window where the user defines the title, expiration windows, user groups and the survey category.

Once the user creates a survey he can add question types and answers to these question types. The user can edit questions, define the rules and data points, activate different scoring methods and color gradients. This allows them to build a highly-detailed survey which would prove useful inside reports. Scientists love their data.

The user is also able to save the survey as a draft. This way administrators won’t feel a high pressure in completing every survey.

With the admin dashboard I wanted to see if it was possible to create a clean overview of all surveys and allow the users to quickly access all important call to actions.

Card view, List view or both?

It needed to be simple. I started experimenting with the card layout and list layout. Which one was better?

I found out that some love information presented in a clean way while others loved an old school way of viewing data as lists. Because of that, we included both views.

The idea was to have a survey overview, their status, and date of creation or last update. Each card is clickable and leads to its details page where the user can continue building out or edit the survey.

Final Thoughts

After a couple weeks of work, meetings, design iterations, more meetings, presentations and with the help of the amazing coshx developers the enso admin dashboard was released internally for usage and testing.

Phase One: Completed