Interaction Design Specialization: Capstone Project

Project Name: SCM Report-to-Task

Conceptualized UI prototype by Tham Chin Soon (1 March 2021)

Purpose — Turning raw report data into actionable insights, with task management feature.

Interactive Prototype URL on InVision https://thamsoon896231.invisionapp.com/console/share/GP28PF112W

Step 1: Finding Inspiration in Problems

Have you worked with Excel files that contained too many tabs? With columns from A to AZ & beyond? I have, I still do on daily basis.

The pain point — After patiently waiting for the file to finish loading, then I am dumbfounded because I do not know which tabs/column/rows to start!

Even after a few tries, I would have learnt where to navigate… But I will still need wrangle the data with filter, lookup functions & pivot table in order to shortlist the spreadsheet into more manageable list.

Storyboard: Illustrating user’s frustration and solution

It’s too tedious! By the time I am done shortlisting, I would have lost most of my mental energy to do the higher value-added tasks.

Step 2: Mission Statement

To develop an app that can (1) shortlist data, (2) generate actionable insights, (3) manage tasks altogether.

Here is my favorite quote from a behavioral economist — Richard Thaler:

‘If you want people to do something, make it easy’

Step 3: Drafting Prototype

Once I conceptualized the app structures, I sketched them out on pieces of papers.

In early stage of ideation, a low fidelity prototype like this allowed me to generate ideas and improvise freely.

If I don’t like what I drew, I can just throw them away and sketch out a better interface within 2 minutes.

Step 4: Heuristic Evaluation

Hearing out other point of views can help us refresh our design thinking. From there, we may assess users’ feedback to incorporate or omit certain features in the initial prototype.

The top 3 most useful evaluations that helped me improve the prototype.

At this step, I constructed the wireframe. I took inspiration from the SAP Interactive Planning Book.
  1. Flexibility — The navigation flow should be uninterrupted, users are free to explore new page and revert to previous page
  2. User control — Users should be able to freely adjust their selections with minimal steps required
  3. Recognition over recall — The new interface and navigation flow should somewhat resemble the legacy interface that the users have been accustomed to.

Step 5: Original vs Alternate Design

Design A vs Design B

A progress bar is added to the alternate design as treatment factor.

I was hoping that this feature can help users manage their work time expectations and have an overview on their current progress.

In A/B Testing later, I would hypothesize that the alternate design will have higher overall user satisfaction and efficient task management ratings.

Step 6: A/B Testing

Dummy independent variable: Presence of progress bar

Dependent variables: User satisfaction rating & task management efficiency rating

Hypothesis: Progress bar feature contributes to higher user satisfaction rating and task management efficiency.

Result:

The result does not align with the hypothesis.

Based on feedbacks from 4 participants from usertesting.com (not a statistical result)

The progress bar added aesthetic value to the interface, which contributed to higher user satisfaction rating.

However, participants reported that the progress bar did not help in better task management efficiency. Because the overall steps are simplified enough, progress bar is redundant in tracking progress. Moreover, it occupies some interface real estate and does not conform to the minimalist UI principle.

Decision — Since the progress bar does not have practical value other than aesthetics, I will omit this feature in the final prototype.

Step 7: Building Prototype

For non-graphic designer like myself, I made use of PowerPoint to construct all the prototype screens. Later on, I uploaded the screens in jpg format to InVision and hyperlink all the clickable hotspots.

Final Interactive Prototype URL on InVision https://thamsoon896231.invisionapp.com/console/share/GP28PF112W

Explaining the User Navigation Flow on Youtube

Step 8: Certificate earned on 15 March 2021

After cramming 10 months worth of workloads within 5 months since November 2020 (to save Coursera monthly subscription fees)

I am proud to share this accomplishment of mine in 2021.

I look forward to creating humane workflows and interfaces at work!

Verify here:

https://www.coursera.org/account/accomplishments/specialization/certificate/J5RRPXJN4K93

-END-

--

--

--

Richard Thaler: ‘If you want people to do something, make it easy’

Recommended from Medium

What is UX (User Experience)?

IMEG — Engineering with Conscience

UX Design Fails

Gary Hustwit’s 《Rams》不負責筆記

Lockheed Lounge, 1986, Marc Newson

Aaron Fernandez Helps Us #FreeThePink

Selling a better Carousell

How I Generate Product Description In 1 Minute.

How I Generate Product Description In 1 Minute.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
tcs's Medium

tcs's Medium

Behance→ https://www.behance.net/thamchinsoon

More from Medium

Power through Ambiguity

Research Repositories: A Critical Tool for UX Research

Video data in qualitative UXR

Survey Design 101