WHITE-gradient.jpg

A UX/UI CASE STUDY

I hypothesize that T-chart users, making an important and collaborative decision, need increased efficiency of weighing out the pros and cons.

T-Charts

banner-iphone.png
WHITE-gradient.jpg

COMPETITOR OVERVIEW

I have identified strengths, weaknesses, opportunities, and threats to four popular competitors.

SWOT ANALYSIS

T-Charts App

The app gives the user the ability to perform standard t-charts on your device. The main advantage of doing this on the app, opposed to on paper, is the ability to type, share, and save lists digitally.

Simple: Pros & Cons! App

The app gives the user the ability to star ratings for each pro and con to gauge importance. But there isn’t a way for the user to view statistics based on ratings.

Make a Decision: Yes No Oracle App

The app gives the user the ability to assign a “Priority” rating per pro or con to gauge importance. Has a “Make a decision” page with test results.

Good Decision App

The app has innovative ways of making big decisions, but the interface is not intuitive, and its lack of instructions makes the user have to figure out how to use the app through experimentation. However, once you figure out the interface, this app is more efficient than its competitors.

Transparent Texture

DEFINING THE

PROBLEMS

Problem #1

Each pro and con carries a different level of importance. Counting the quantity of each is not sufficient enough for making decisions.

Weighing Pros & Cons

Problem #2

When making big decisions, especially when others are involved, visual documentation is captured and shared. The current solutions do not streamline this process.

Visual Documentation

Problem #3

Current apps can share lists, but a collaborative platform would increase efficiency.

Collaboration

group-on-phone.png

Problem #4

The competitors require the user to type out every single pro and con.

Typing

Problem #5

Competitors cannot easily compare the results of separate T-charts.

Comparing T-charts

WHITE-gradient.jpg

ONE

EASIER DOCUMENTATION

Create an effortless way to document the pros and cons while capturing visual documentation.

TWO

GAUGING IMPORTANCE

Create a system for the user to document the importance of each pro and con. Make this tedious task seem effortless.

THREE

VIEWING & EDITING CAPABILITIES 

Users should be able to view everything documented and have the ability to edit content. 

FOUR

SYNTHESIZING AND COMPARING DATA

Create a way for the user to quickly synthesize and compare the results of the pros and cons with varying levels of importance.

FIVE

COLLABORATION

Users should have the ability to share projects and edit them together.

CHALLENGES 

TO SUCCESS

Transparent Texture

USERFLOWS

001.jpg
002.jpg
001.jpg
002 – 2.jpg
WHITE-gradient.jpg

LOW-FIDELITY

WIREFRAMES

LOWFI-0_0013_Layer 1.jpg
LOWFI-0_0012_01.1 - not copied.jpg
LOWFI-0_0011_01.2 - copied.jpg
LOWFI-0_0009_02-name.jpg
LOWFI-0_0010_01.3 Compare.jpg
LOWFI-0_0007_04-begin session.jpg
LOWFI-0_0008_03-Instructions.jpg
LOWFI-0_0006_05-started.jpg
LOWFI-0_0005_06-star.jpg
LOWFI-0_0004_07-t chart.jpg
LOWFI-0_0002_09-Edit-Pro.jpg
LOWFI-0_0003_08-new pro.jpg
LOWFI-0_0001_10-View Results.jpg
LOWFI-0_0000_11- Share.jpg

HIGH-FIDELITY

WIREFRAMES

04-Import-error.jpg
03-Import.jpg
01-imported.jpg
05-First selected.jpg
05-Compare.jpg
02-Project-Name.jpg
06-camera-begin.jpg
06-camera-main.jpg
06-camera-main – 1.jpg
06-camera-pro.jpg
06-rate.jpg
07-tchart-loaded_edited.jpg
11-Share-Project_edited.jpg
10-New-pro.jpg
09-Edit-pro-con.jpg
08-test-results.jpg
Transparent Texture

USER TESTING

XD PROTOTYPE

USER FEEDBACK

High-fidelity wireframes have been used for an XD prototype made for user feedback. This test was meant to spot out any pain points.

Following the test, I observed that the user was confused about the rating system for the pros and cons. To fix this problem, I have chosen to change the star symbol to thumbs up for pros and thumbs down for cons. The change in symbols makes it more apparent to the user they are rating how “good” a pro is and how “bad” the con is.

Tested Wireframes

07-tchart-loaded_edited.jpg
08-test-results.jpg

Following the Test

07-tchart-loaded_edited.jpg
08-test-results.png
WHITE-gradient.jpg

EXECUTION:

ANIMATED PROTOTYPES

Challenge

Create an effortless way to document the pros and cons while capturing visual documentation.

Solution

The user can capture visual documentation and add annotations using their voice. This is done by pressing and holding the pro or con button.

Challenge

Users should be able to view everything documented and have the ability to edit content. 

Solution

After selecting to end the recording session, all information is formatted into a T-chart. The user can edit individual entries and even add new pros or cons to the list.

Challenge

Create a system for the user to document the importance of each pro and con. Make this tedious task seem effortless.

Solution

Immediately after letting go of the pro or con button, the user is prompted to a like/dislike rating. They also can discard the recording instead of assigning a rating.

Challenge

Create a way for the user to quickly synthesize and compare the results of the pros and cons with varying levels of importance.

Solution

  • While viewing a T-chart, the user can view test results. To find the weight of the pros and cons, a "Rating Total" is calculated by adding up all the like ratings to compare it to the sum of dislike ratings.

    To make a better-informed decision, I've included how the "Rating Total" was calculated below. 

  • In the case where users want to compare T-charts,  The user is able to select two projects from the "Project List" and view both test results side by side.

Challenge

Users should have the ability to share projects and edit them together.

Solution

  • The user can copy the project code to their clipboard and share it with anyone they wish to collaborate with.

  • Users can import existing projects by copying a project code to their clipboard and clicking "Import" on the "Project List" page.

Transparent Texture

MOCKUPS

in-use-kitchen-02.jpg
in-use-tchart-01.jpg
WHITE-gradient.jpg

FINAL UI

0.1-Onboarding – 21.png
0.2-Onboarding – 4.png
0.3-Onboarding – 1.png
0.4-Onboarding – 1.png
0.5-Onboarding – 2.png
04-Import-error.png
03-Import.png
01-imported.png
05-First selected.png
05-Compare.png
02-Project-Name.png
06-camera-begin.png
06-camera-main.png
06-camera-main – 1.png
06-camera-pro.png
06-rate.png
06-camera-con.png
06-rate-con.png
07-tchart-loaded_edited.jpg
08-test-results.png
11-Share-Project_edited.jpg
09-Edit-pro-con.png
10-New-con.png
10-New-pro.png
Transparent Texture

RETROSPECTIVE

  • In the future I will create a way for the user to combine multiple  t-charts into one. This will help collaboration in a case where multiple users are examining the same thing on different devices.

  • When collaborating on a project, each user should have the ability to assign their own ratings. This rating would be averaged with other ratings to calculate a more holistic test result.

WHAT COULD BE IMPROVED

  • Creating a more intuitive way to gauge the importance of pros and cons over popular competitors.

  • Effortless documentation with the ability to edit any errors after.

WHAT WENT WELL

I ran into a problem when I initially implemented a rating system for pros and cons. The same star symbol was used to rate the importance of the pros and cons, which confused users. After synthesizing the user test findings, I’ve made it more intuitive by changing from stars to a thumbs up and thumbs down symbols.

WHAT DIDN'T GO WELL