Product Improvements

In order to improve a SaaS product, innovation and creativity must always be pushed forward. My role in innovating the TrueChoice Solutions platform included designing, prototyping and testing interactive widgets and engaging layouts.

Product Improvement 1: Interactive Widget Concepts

Designing new widgets was an initiative targeted to add a variety of interaction for the TrueChoice platform, a technology that specializes in gathering user preferences. Designs chosen for further development had to be intuitive, meet data collection requirements, and be usable for a diverse range of clients.

Our current challenge

The TrueChoice platform uses sliders as the main source of data collection. This widget is intuitive for users and beneficial to our data collection because of the many data points it can collect. However, using the same widget in an application runs the risk of survey fatigue and creates a monotonous user experience.

The objective of this initiative is to add more interaction variance within our application. Finding a harmony between constant engagement and collecting meaningful data will keep our users and our clients happy.

Research and Development Outline

  • Map out requirements - The interactive widget needs to…
    • collect 101 data points
    • work across all device resolutions
    • be instantly intuitive for the user
    • be redesigned for a variety of different client brand guidelines
  • Research what other widgets were ‘in the wild’ and what sort of purpose they served for the kinds of applications they were included in
  • Conceptualize, sketch and create wireframes in multiple resolutions
  • Create colorful mockup examples using real branding guidelines
  • Design animations conveying how the widget would function and which interactions were expected
  • Research implications: SVGs vs sprite sheet
  • Program playable proof of concepts to get a feel for the widget
  • Integrate the widget into the platform

Final Concepts

Widget 1: Circle Slider

The circle slider widget keeps the familiarity of a linear slider while adding a more interesting user interaction. The number value displayed at the top is always available to the user. The value was chosen to be placed here so a finger wouldn’t obstruct the user’s scaling choice.



Widget 2: Knob

The knob widget is a familiar interaction for a user because it bears resemblance to a real-life interaction. Here it could be used to determine one selection or compare a range of items.



Widget 3: Dial

The dial widget substitutes a thumb (or handle) for a needle the user can use to point to their desired preference. This widget took inspiration from a car’s dashboard.



Product Improvement 2: Output Page Redesign

The output page is the most impactful page users see in the TrueChoice platform, a technology that specializes in gathering user preferences. We wanted to enhance this page by adding imagery, layering graphic elements, and providing more context to what the user said was important to them.

Design Requirements

  • Information should be digestible and understood
  • Design should be exciting and engaging
  • Needs to show Marketing Messages and Preference Profile at the forefront
  • Needs to support imagery
  • Needs to support low to high amounts of copy
  • Consider call to action button placement
  • Needs to be responsive between different devices

Wireframing

Desktop resolution

Tablet resolution


Mobile resolution

Improvements Over Current Layout

  • Supports multiple images
  • Clearly states importance rating
  • Marketing Messages distinguished from each other
  • Visually engaging without compromising Marketing Messages
  • Adds depth by layering icons over images
  • Flexibility for CTA placement
  • Mobile design is clean and engaging
  • Empowers designer creativity
  • Reduces white space

Rejected Concepts




Final Designs