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
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.
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
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
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
USERFLOWS
LOW-FIDELITY
WIREFRAMES
HIGH-FIDELITY
WIREFRAMES
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
Following the Test
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.
MOCKUPS
FINAL UI
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.