Sofía
Menu
Redesigning a tool to plan and document client visits, enabling collaboration and learning
Disclaimer: This case study includes modified content and visuals to comply with a non-disclosure agreement. While the core design process and outcomes remain accurate, certain details have been generalized to respect client confidentiality.
Duration
3 months
Role
UX/UI Designer
Tools
Figma
Jira
Team
4 UX/UI Designers,
1 PM
2 Developers
1. The Challenge: A Tool No One Wanted to Use
Employees at this beverage distribution company regularly visit stores and restaurants to evaluate operations, gather feedback, and identify improvements. These full-day events are known as Visit and Evaluation Days (VEDs).
The company had an app to support this process, but users found it unintuitive and inefficient. Many abandoned it altogether in favor of pen and paper or other tools. Stakeholders were receiving frequent complaints and decided to rebuild the experience from scratch—this project became the first step in redesigning their full digital ecosystem.
2. Discovery: Listening, Observing, and Learning
We began with collaborative research to uncover user needs and business goals.
Methods
Workshops: Two remote FigJam sessions with stakeholders to understand their vision and expectations.
Interviews: 1:1 sessions with active users using a 33-question guide covering the full VED journey.
Heuristic Evaluation: Usability review of the existing app using Nielsen’s heuristics.
Benchmarks: Reviewed similar apps and tools users already relied on.
Key Insights
Field learning is crucial: VEDs are valuable for knowledge-sharing across teams and from customer interaction.
Users adapt their own tools: Many preferred pen and paper due to app limitations.
Collaboration is organic: No two VEDs are alike; sharing improves everyone’s work.
Communication is fragmented: Users relied on multiple external platforms to coordinate.
Design Opportunities
The app has to be the companion not the focus of the visit - simple flows, few steps, intuitive interactions, and automation should help.
Guides and information should be short and easy to digest. They should encourage the user to learn, without beign an obstacle.
The note-taking experience should allow freedom, not be restrictive, since users have different ways of collecting and analyzing information.
Information distribution is essential for users. Opening more ways to share information directly would be helpful for them.
We defined three core design principles:
Goal-Oriented: Help users complete the VED with clarity and ease.
Flowing: Make navigation feel natural and intuitive.
Friendly: Keep the tone and interface approachable and helpful.
This app marked the beginning of a broader redesign effort. We started the creation of a design system in Figma structured into:
Cover
Version Control
Foundations & Tokens
Assets
Component Pages
This structure laid the foundation for future scalability across the company’s ecosystem.
4. Visual Exploration: Designing with Intention
We ran a pressure cooker sprint to quickly explore layout, color, and visual style directions.
Three visual proposals were created:
Option A: Black as primary, red as blue. Minimal, wide spacing, with brand photography.
Option B: Blue as primary, green as accent. Rounder, bolder, more colorful visual elements.
Stakeholders opted for a hybrid—favoring A’s clean layout with the energy and color accents of B.
5. Iteration & Delivery
We worked in two-week sprints, moving from wireframes to high-fidelity screens in Figma. Every cycle involved collaborative reviews with stakeholders, designers, and developers to validate feasibility, improve clarity, and align with real-world constraints.
This iterative approach allowed us to:
Catch logic or flow issues early, directly with engineers
Adjust the UI to match technical limitations without compromising quality
Foster trust and alignment across the entire product team
By the end of the process, we had a fully functional, high-fidelity prototype aligned with user needs and technical feasibility.
Each screen was redesigned with a clear purpose: simplify the experience, support real-world workflows, and encourage collaboration. Here are some highlights:
Home
This became the launchpad for users—featuring the current VED, recent notes, and a quick-start button to create a new visit. By surfacing only what’s relevant for the day, we reduced cognitive load and gave users faster access to what matters most.
Visits
Previously the default landing screen, we moved this to a secondary tab and cleaned up the layout. We added clearer status indicators, quick actions like “Resume VED” and “Edit,” and improved filtering. This helped users plan and manage their workload more intuitively.
Visit Details
As the core functionality of the app, this screen went through multiple iterations with stakeholders. We replaced long scrolls with a tabbed layout, making it easier to jump between sections like agenda, notes, and team members. This small shift significantly improved task efficiency in the field.
Notes
We enabled multi-image uploads and added the ability to share notes via email. These updates were a direct response to user feedback and aligned with one of the VED’s key goals: spreading knowledge. Notes became more flexible, useful, and collaborative.
Edge Cases and Empty States
To support real-world use and reduce dev ambiguity, we designed multiple edge cases, including empty states and error screens. This not only enhanced the UX but also ensured higher implementation quality and resilience.
6. The Outcome: A System that Grew Beyond the App
What started as a redesign for a single tool evolved into the foundation for the company’s broader digital ecosystem.
Impact Highlights
Consistent, scalable UI: Our new design system has been adopted by 5 other internal products
Increased productivity: Teams now rely less on external tools thanks to better navigation, note-taking, and communication features
Growing design ops: The system now includes 37 reusable components and a centralized asset library
The product not only improved user satisfaction but also set a new quality standard for future apps in the company.
7. Reflections: What I Learned And What I’d Do Differently
This project reinforced something I believe deeply: good design is about more than screens, it’s about systems, collaboration, and long-term impact.
I saw firsthand how a shared language and rhythm with developers leads to better outcomes
I learned how important it is to balance brand identity with accessibility and usability
And I experienced how a single tool, when thoughtfully designed, can spark meaningful change across the organization
If given the chance, I would push harder to run usability testing before development began.
Due to tight timelines, the team opted to move directly into build mode. While our research gave us confidence, testing live flows with users earlier would have reduced risk and strengthened our decision-making even more.
Still, this project gave me the opportunity to apply the system across multiple products, evolve it with real constraints, and build lasting trust with both stakeholders and developers. That, to me, is what product design is all about.
TL;DR
I redesigned an internal tool for planning and documenting client visits for one of the largest beverage distributors in the region. By aligning with real user needs, we created an intuitive, goal-oriented app supported by a scalable design system that now serves multiple teams across five digital products.
Sofía Beltrán Martín © 2025
Designed by me for you.