Redesigning a Data Automation Tool for a User-Centric Experience
Stract, a Brazilian startup, is a Google Sheets add-on designed as a concurrent to solutions like Supermetrics and Adveronix. It automates data collection and reporting from multiple sources, generating scheduled analytics reports. My role as a UX designer consultant involved leading efforts to enhance the usability and interface design, making the tool more intuitive and user-friendly.
My Role: UX Designer Consultant
Team Composition: Worked independently, reporting to the startup's stakeholders.
Duration: 3 months
Tools used: Figma, Zoom, Maze, Docs, Forms, Notion
Work Context
01
Challenges & Objectives
Problem Statement: The evolution of the product primarily relied on sporadic customer demands and competitor updates, lacking substantial user research or design guidelines. Consequently, the interface became cluttered with numerous features, lacking clarity and appearing visually outdated. This complexity made it especially difficult for new users, leading to poor retention. Furthermore, the company had limited understanding of user needs due to the absence of data or metrics on user engagement or usage patterns.
Goals and Objectives: Enhance usability and interface design to improve user retention, while gathering comprehensive user insights to inform product evolution.
Pre-Consultancy UI Interface
02
Discovery Journey
Stakeholder alignment
I started the discovery process by engaging with Stract’s owners to align on business challenges and discuss product metrics. I interviewed them separately to understand their perspective on the business's strengths and weaknesses, as well as their presumed picture of the typical user. This alignment set the stage for the upcoming research efforts.
Desk Research
In addition to competitor analysis, I reviewed content created by professionals about their daily tasks involving traffic and metrics analysis. This included tutorials on various tools to understand use cases and workflows from the user’s perspective. This comprehensive approach provided deeper insights into their professional landscape.
User flows
I mapped the existing user flows, delving deeply into both our system and competitors' interfaces, and conducting usability analyses to identify potential improvements and pinpoint issues, such as bottlenecks and redundancies.
User Surveys
I elaborated surveys to be sent to the client base to gather quantitative data on user profiles, usage patterns, satisfaction levels, and support experiences, including an open field for clients to write freely about their experiences with the platform.
User Interviews
I conducted in-depth video call interviews with active clients to gather qualitative insights into their experiences and needs. Many of the issues they mentioned reflected those from the surveys, along with suggestions for improvements.
Project Organization
I used Notion to organize and plan the steps of the project, including scripting interviews, organizing content, and storing external links. It also helped me keep track of the workflow with to-do lists, ensuring all tasks were managed efficiently and deadlines were met.
03
User Research Debrief
Research Synthesis
After conducting user research, I synthesized and categorized the data to create user profiles and identify key pain points. User statements were separated by themes, and their frequency was noted. This information was compiled into a presentation for stakeholders, providing a clear overview of user challenges and behaviors. Additionally, I made the interview recordings and transcripts available for stakeholder analysis.
Prioritization
Based on the frequency and impact of the identified issues, stakeholder expectations, and technical constraints, a prioritization strategy was defined along with the scope of the design work and the next steps. This approach ensured that the most critical pain points were addressed first while allowing the development team to work within their existing technology, maintaining a sustainable product evolution process.
Communication Insights
Additionally, I provided a compilation of the most frequently used words and expressions by clients when referring to the product and their daily work, to be used by the marketing team in their communication strategies. This also guided UX writing for usability tests and informed the naming of features and sections to better align with users' mental models.
Stract's user base mainly consists of small startups or independent professionals serving small businesses, highlighting their preference for close support from the Stract team when needed.
Analysis revealed that long-term users typically have significantly more automations set up compared to newer users. This suggests a positive relationship between platform usage and user retention.
While overall satisfaction with the platform is high, recurring issues were identified, signaling areas for improvement.
Quick Insights
04
Ideation Process
User Flows and Wireframes
Using insights from user research, I built the envisioned 'to-be' journey, focusing on simplicity and ease of use while I sketched initial design ideas on paper. I then translate them into medium to high-fidelity screens using Figma.
Information Architecture
The tool's pages previously displayed information in a truncated and disorganized manner, with too many features causing cognitive overload and dispersing focus from main tasks. To address this, I regrouped and reorganized the information, renaming sections to better convey their content. The information architecture was redesigned to prioritize core features, displaying them prominently while relegating less important functions to dropdown menus and secondary screens. The menu was reviewed and updated to align with the new structure, ensuring a more intuitive and coherent navigation experience. Additionally, I made error messages clearer in the new version to help users take appropriate action and moved crucial information to the initial view, addressing significant identified pain points.
User Interface
The UI was updated for consistency and modern aesthetics, focusing on clean lines, intuitive navigation, and a cohesive visual language aligned with contemporary design standards. I increased spacing to enhance visual appeal and clarify the hierarchy of information, aiming to create an interface that not only looks good but also provides a seamless and enjoyable user experience.
Interface Evolution of the Queries (Extractions)
Features disposition in the new version
Error messages more prominent and clear
Example of a new mapped flow
05
Validation Phase
I iterated a few times to meet stakeholders' expectations for the design evolution, achieving a high-fidelity appearance, although not yet pixel-perfect. Following this, we aligned on the main tasks and flows for gathering user interaction insights. In planning the usability tests, we aimed for a balanced approach, testing both modified screens and flows as well as new ones, while ensuring the tests were of appropriate length to prevent user drop-off. I then refined the prototype iteratively for testing on Maze.
Usability testing
The unmoderated test comprised 10 tasks of varying difficulty levels, followed by a SUS survey to assess user perceptions. Additionally, I explored alternative names for product features and sections, aiming to better align them with user language preferences.
The testing involved three rounds, during which I observed user behavior through video recordings and heatmaps. Audio recordings were also utilized, allowing users to provide insightful feedback. Based on these observations, I iterated on the prototypes, refining the designs to achieve higher success rates for the tasks.
This screenshot exemplifies the results collected from the most challenging task. Initially, we had a 0% success rate with the current version. We then tested two different approaches, with Version I performing better.
06
Deliverables
Handoff
In the final phase, I refined the designs based on the user testing results and organized the hand-off for the developers. I provided a comprehensive file that included the flows, a style guide with reusable components, a color palette, an icon library, and various component states (e.g., hover, disabled status for buttons, open/closed components, selected/unselected states, error and warning messages). This ensured a smooth implementation of the new design.
Project Review
I created a final presentation summarizing the entire discovery process and the results of the tests. In this presentation, I highlighted what we accomplished, what we couldn't address due to constraints, the design proposals and modifications, and potential future steps based on the research findings.
Moreover, within the Figma file, I introduced an additional section showcasing proposed new features, including basic flows, screens, and a guided onboarding flow. This addition aims to facilitate discussions and streamline decision-making for potential product enhancements.
Handoff canva
Detail of one section with flows and instructions
New proposed UI
07
Project Impact
Initial feedback has been positive, particularly regarding the design improvements and the research-driven approach.
The usability testing results provided us with a good level of confidence in the improvements made. The majority of tasks attained success rates of more than 80%-90% (with the average score for usability testing at 78%). One task reached 70%, while the most complex task saw a significant improvement, starting from 0% success for the current flow to 60% for the new one.
Given these promising results, we've decided to proceed to the next step, aiming to iteratively evolve the product and gather feedback from clients along the way.
The project is currently in the development phase, so data collection is pending.
Success rate of tasks in Usability Testing
08
Reflections & Learnings
Challenges
Regardless of our efforts, we struggled to gather enough varied client responses during the research phase, especially from new users. Conversely, those who participated in in-depth interviews were more experienced with data extraction tools, introducing a bias. To avoid delaying the project, we used the available data and prioritized action.
We also faced a lack of baseline user behavior data due to the limitations of the Google Sheets add-on, restricting our ability to collect quantitative analytics. For critical usability tasks, I had to simulate the current flow to gather data, though the volume was minimal.
Additionally, the project's closed scope required a linear waterfall process instead of an agile method, forcing us to review the entire experience at once without iterative testing.
Learnings
We gained valuable user insights that hadn't been explored before, despite the challenges faced. The collected data now helps stakeholders prioritize initiatives and plan future developments. This process highlighted the importance of comprehensive user research and iterative design testing and raised stakeholder awareness about the product development process, which was positively received.
Reflecting on my learning journey, it's evident that navigating the challenges of this project demanded more than just design skills. Leading the entire process independently in a realm of uncertainty deepened my understanding of design and decision-making. As a side project with time constraints, effective time management and adherence to timelines for each stage were essential. Embracing uncertainty and leveraging available tools and data proved pivotal in fostering adaptability, ultimately becoming my greatest asset.