IULIANA STRAMBEANU

SaaS platform for creating
and managing customer intelligence data

Introduction

Vision Critical provides a platform that helps companies build secure communities of customers they can use continuously, across the enterprise, for ongoing, real-time feedback and insight.

My role

I was a UX/UI designer in charge of certain sections of the application. Here, I showcase some of the projects I worked on.

My responsibilities included UX research and testing, UX design (wireframes), interaction and UI design (prototypes, polished mock-ups).

I worked in a scrum team with developers, project owner, and QA. I also received feedback form the UX team and the UX manager.

User scenario

As an administrator, I create a story and want to make it available to stakeholders. I click Share and choose either Share with all or Share with specific users. I enter a name in an input text box or pick a name from a drop-down menu. When I'm done I click Share. I can Edit who I'm sharing the story with, or Unshare. The stakeholders are notified through an email that a story has been shared with them.

Brainstorm and sketches

The result

Usability testing

I conducted remote moderated usability tests using screen sharing. I created three tasks for the users, wrote a script, run the testing and compiled the results.

The tasks:

(Please show us how you would...)

  1. Create a story.
  2. Add a new stakeholder to the portal.
  3. Share a story with them.

Research findings:

100% (5 out of 5) users completed the task without issues.
The feature is straightforward and easy to use.

Problems:

One task we thought was straightforward, actually confused users.

It wasn't clear what the stakeholder role was, what they had access too, what they could and couldn't do on the website. As a result we changed the messaging to be more clear.

Iterating

Changes made based on test results:

Before

After

Project 2: Commenting widget

Who are the users?

Community administrators and their stakeholders who share projects and need to provide feedback and collaborate.

Value proposition

Users can offer feedback in the context of the insight, not through email or Slack. The feedback will be centered around the insight. It eliminates the need to jump from one application to another (Spark to email, Skype or Slack.. It streamlines feedback and allows for greater and more focused collaboration.

Design solution

Add an action icon in the toolbar that slides open a sidebar. The sidebar is anchored to the right side of the screen. The charts remain visible on the screen while the user writes comments using the sidebar. This solution allows for viewing and interaction with both the charts and comments.

UI Design - comments sidebar

Comments sidebar - empty state

Supports tablets and phones

On phones, the sidebar covers the entire screen when open.

Project 3: Colour palette generator for charts

Problem statement

One pain point for our users was the impossibility of customizing charts in the colours of their choice. The colour palette we use for charts does not always align with our clients' branding. The result of this is our clients are discontinuing the use of our product.

Business goal

Increase subscription rate. Engage users and encourage them to use our platform to share and consume insights.

Design goal

Release 1 - MVP - build a colour palette generator that creates palettes for users based on a single colour of their choice.

Future release - For the second iteration introduce the option of theming. The user creates a theme and applies it to their reports.

Sketches

How it works

Generate a custom palette starting with one hue selected by the user. The palette will contain ten colours, distinct enough to accomodate all types of charts. For a future implementation we will generate palettes based on different types of charts. As an example, sequential charts are best suited to order data that progress from low to high. Therefore, colours can go from light to dark. Qualitative schemes can be used for data that can be split into categories. For this use case, the colours can be divergent.

With the help of online tool and working closely with on of our engineers I experimented with different algorithms, and with hue, saturation and lightness to achieve a scheme with distinct colours.

To cover most types of charts for the MVP I chose a divergent scheme algorithm - three hues equidistant on the colour wheel. The palette is achieved by generating two gradients, one going from the hue selected to a lighter or darker version of it, the second going from the second equidistant hue to a third equidistant hue.

Consideration was given to accessibility. We tested a large number of palettes to ensure the cover most types of colour blindness.

Experimentation

I experimented with different colour combinations and different types of charts to find out what works best for our user needs.

A/B Testing

I did research and testing to establish the root of the problem and the user needs.

Do our users need a monochrome colour palette - better suited to their branding but not very differentiated? Or can they introduce more colours in their branding and have more differentiated charts?

Users were positive about both options, but noticed a monochrome palette might be an issue, especially for line charts.

80%
of users prefer distinct colours
100%
of users believe it is not necessary for all ten colours to reflect their brand

Task flow and interface solution

User selects a hue form the colour picker or by entering a hex code, and a palette of ten colours will be generated automatically. We found this is a better solution and more effective than letting the user select all ten colours, as it elliminates cognitive load and helps with decision making.

To offer user control over the process, I introduced the option of returning to the original palette at any time.

The Flow

The design result in context