Case Study Banner
Problem Overview

The current layout of the eSOP or the read-only view is not optimized for printing or sharing and difficult to understand.

Tallyfy is a SAAS workflow management platform.

Workflow management
Jobs to be done
Enterprise SaaS

Project details

Organization : Tallyfy

Role: I was the sole product designer working cross functionally with the product owner and engineers.

Timeline: 3 Weeks

Tools: Figma, Figjam, Whiteboard and pen & paper.

Technology now has the single largest impact on an organization’s ability to react, innovate and succeed. Today’s industry leaders have embraced this and literally changed. Of course, everyone uses technology to change in different ways, but we believe customers can take.

Rapid growth in digital and mobile technology is changing the advertising industry, and the UK is leading the charge, with digital set to claim more than half of all advertising spend in 2016, according to a recent report from marketing.

Users goals

Business goals

Concept trade-off discussion with product and engineering folks

Step 1: We realized that the scope of this issue was large and had to be simplified.
  • Calculator-based limits: Which involved informing the user about transfer limit based on the payment and delivery method.
  • Country-based limits: Analyze different types of limits based on the country and individual tier-based limit.
Step 2: Analyze constraints and time-lines:
  • Calculator-based limits: Easy and faster to implement with maximum impact. Had existing information on the various limits and could use existing backend infrastructure to implement this.
  • Country-based limits: Gathering compliance information for all countries poses a significant time and effort challenge, alongside the need for substantial investment in technical infrastructure.
Final decision:
To start with calculator-based limits as it was quicker to execute with limited engineering bandwidth and had maximum impact.

Roadmap to the design process

Research Image
Step 1: Problem definition
Go to section
Research Image
Step 2: Analyzing usability issues in the existing product.
Go to section
Research Image
Step 3: Ideation- Key jobs to be done  
Go to section
Research Image
Step 4: Iterations and final design
Go to section
📖 What is an eSOP

Electronic Standard Operating Procedures(eSOP) is a reusable templatized process or document in the read view, where users can only read, share or print it.

Project Goal

Users goals

  • Easy navigation, especially since some processes have 20+ steps.
  • Users understand task priorities.
  • Users understand task dependencies.
  • Make the content easy to understand.

Business goals

  • The eSOP view should be printable and sharable.
  • Improve visual design.
  • Make the whole template shorter, some documents are too long.
  • Increase usage and engagement.

Desired outcomes

Users goals

Business goals

Solution

Revamping the eSOP view

🧭 Driving question

How might we make the information easy to understand so that the user knows how the process works?

Improving the overall layout aiming for the following design outcomes

Page layout
User Research

🎯 User understands task priorities.

📨 Quick access to important information.

🕹️ Easy navigation between tasks.

🖨️ Easy to find print option on the page.

Omniversity platform
Revamped layout for eSOP (Read view)
Automations

Reimagining the automation section so that users understand task dependencies to make actionable decisions

Omniversity platform
Revamped layout for Automations in eSOP view
Useflow Map Image
Observing the user behaviour
  • Users encountered a vague error message stating “something went wrong”.
  • Many users attempted to transfer money in the same manner multiple times after their initial failed attempt, ultimately closing the app.
  • Some tried changing parameters of transfer to made the transaction again.

Tool used: LogRocket

Insights

Since the users had no verification issue and the issue was with limits on transfer amount. I came up with three concrete use cases that we could explore:

  • Payment or delivery method limits
  • Country based limits
  • Tier based limits on individual.
Problem definition : User Research

Unearthing user pain points of customers

Analyzed the customer support channel for issues related to the eSOP view and conducted two user interviews with active clients to understand how they used this view and what issues they faced.
Used insights from Helpscout integrated within the company's slack channel.
Use flow Image

Key insights

The current layout of the read-view is difficult to understand and lengthy.

The current layout is not optimized for print or read view, to make it more understandable and actionable.

Customers have difficulty locating the print option within the page.

Highlighting this was clearly a usability and layout issue making the user frustrated and resulting poor engagement with this page.
Story Image
Story Image

🔎 Uncovering usability issues

The old design had various usability issues like improper navigation, information layout, hard to find print option and failed on various heuristics like visibility of system status, mismatch between the system and real world, and efficiency of use.

Useflow Map Image

The automations section in the view helps users understand task dependencies and priorities. The current layout of automations had various issues making it unfit for printing and sharing in a document format.

Useflow Map Image

Concept trade-off discussion with product and engineering folks

Step 1: We realized that the scope of this issue was large and had to be simplified.
  • Calculator-based limits: Which involved informing the user about transfer limit based on the payment and delivery method.
  • Country-based limits: Analyze different types of limits based on the country and individual tier-based limit.
Step 2: Analyze constraints and time-lines:
  • Calculator-based limits: Easy and faster to implement with maximum impact. Had existing information on the various limits and could use existing backend infrastructure to implement this.
  • Country-based limits: Gathering compliance information for all countries poses a significant time and effort challenge, alongside the need for substantial investment in technical infrastructure.
Final decision:
To start with calculator-based limits as it was quicker to execute with limited engineering bandwidth and had maximum impact.
Defining design outcomes

Incorporated Jobs to be done framework to focus on customer’s functional and emotional motivations.

Omniversity platform

1. Understand Task Dependencies Easily:
Enable users to quickly comprehend which tasks are dependent on the current step.

2. Print and Share eSOP Documents : Users needed to be able to print and share the eSOP documents easily.

3. Prioritize Important Tasks: Users needed to understand which tasks are more important and what their priorities are.

4. Navigate Long Processes Efficiently: With some processes having 20+ steps, users needed an easy way to navigate through the entire process.

5. Comprehend Task Details and Responsibilities: Users needed to clearly understand what each task entails and who is responsible for it.

6. Access Information in a Compact, Digestible Format: The business needed the eSOP view to be shorter and more concise, avoiding long, cluttered documents.

Fidelity Image
Iteration and design

Based on insights from research and competitor analysis the design process was divided into two initiatives

Optimize layout to ensure users understand task priorities and important information.
Reimagining the automation section so that users understand task dependencies.

First design iteration reimagining automations

Create a horizontal layout and incorporated identifiers in automations  for the user to understand task dependencies
Omniversity platform
Revamped layout for eSOP (Read view)
Conducted a low budget usability test:
We asked an veteran process management expert and an active user if they could understand this logic to share their thoughts behind it.
Result
They found the identifiers confusing and the stated most of the people using this platform don't understand symbols, also feels bloated.

What now? Scratch that and start afresh!

Final design iteration; Focusing on only what is important.

Came across a diverse set of approaches; Flowcharts, and if then statements, and what else do people easily understand? Tables!!!

Updated identifiers

Designed components to represent identifiers that are easy to understand ensuring match between the system and the real world.

Story Image

Final design of automations

Reversed the if-then statement and only show the if conditions since that is what highlights task dependencies to make it actionable.

Story Image
UI Revamp - Optimizing the overall layout of the read-only view

Enhancing Navigation, readability, and shareability for concise process documentation.

Jump to hi-fidelity designs

Final design

Resolving payment method error

  • Clear error messages show maximum transfer limit for chosen payment method.
  • Resolve issues easily with buttons to adjust amount or change payment method.
  • Opting to change method reveals a list of available payment methods based on transaction amount, while selecting amount redirects to the calculator.

Resolving delivery method error

  • Simple error messages displaying the maximum transfer limit for the chosen delivery method.
  • Easy error resolution by adjusting the transaction amount or changing the delivery method.
  • Opting to change method reveals a list of available delivery methods based on transaction amount, while selecting amount redirects to the calculator.
Title Icon

Reflection

Service Type Icon
Impact: We reduced visual clutter and improved readability by reimagining the task dependencies layout from a if-then format to a concise, table-based design.

This change made it easier for users to understand task dependencies, especially in processes with multiple automations, without compromising print-friendliness.

Reflection

This experience taught me the importance of questioning existing design patterns. Just because some UX patterns are common in web interfaces doesn't mean they're suitable for all contexts, especially when considering cross-media compatibility like printing.

Service Type Icon
Impact: Incorporating user feedback and conducting low-budget usability tests early in the design process helped us avoid implementing a confusing symbol-based interface.

This saved development time and resources while ensuring our final design was intuitive for our target users.

Reflection

Even simple, low-cost user testing can provide invaluable insights. It's a reminder that as designers, we should always validate our assumptions with real users, no matter how clever or innovative our ideas seem.

Service Type Icon
Impact: The new, compact layout addresses the business goal of shorter, more digestible documents.

By removing clutter and focusing on essential information, we've made the eSOP view more efficient for users, especially those dealing with processes that have 20+ steps.

Reflection

Sometimes, the best design solution is not adding more, but taking away. Simplifying the layout not only improved usability but also helped us stay aligned with tech constraints.

Checkout my other projects

Data informed design to reduce customer drop off for Ria

Mobile UX

Data analytics

Data driven process leveraging analytics to improve the error resolution within the payments flow in the money transfer app.

Read Case Study