I played a key role in designing Supatool’s pre-version UI, aligning it with the brand’s identity while introducing new features like a statistics dashboard and PDF generator. Working closely with the project manager and art director, I ensured user-friendly navigation and streamlined collaboration tools, making the platform intuitive for non-experts.
These design improvements enhanced the platform’s usability and functionality, resulting in high client satisfaction and positive internal feedback, setting the stage for Supatool’s future growth and market success.
Initial Research
I initiated the project by analyzing the client’s existing brand assets and interface to ensure visual consistency. I then examined industry-standard UI/UX benchmarks, pulling key insights from Figma, Canva, and Notion, which the client requested as references. This helped identify common patterns users were familiar with while ensuring we could retain Supatool’s unique selling points.
Metrics Consideration
By focusing on user personas—novice teams building apps without extensive technical expertise—I employed a data-informed strategy to prioritize ease of use over complexity. From the outset, I applied heuristic evaluation methods and competitive analysis to align the interface with best practices.
Client Needs
The project brief highlighted a key challenge: we were designing UI elements for features that hadn’t been built yet. To frame the problem, I worked with the team to define use cases based on the client’s goals and research data. We emphasized features that would resonate most with users: simplicity, collaboration, and intuitive workflows.
Data-Driven Ideation
I then ran a series of brainstorming sessions, using real-world use-case scenarios based on user behavior data from comparable platforms. This helped identify feature gaps and guided our design iterations, ensuring that even in early mockups, the user experience was grounded in research.
Consistency & Brand Alignment
Data-Driven Consistency: By evaluating the existing UI style through design consistency scores, I ensured a 90% brand alignment in the new features, maintaining cohesion across the product. Metrics such as color palette consistency and component reuse (80%) were tracked to maintain visual harmony, essential for user familiarity and brand integrity.
Information Architecture Optimization
Task-Based Metrics: Using heuristic evaluation and hypothetical task metrics, we analyzed the logical flow of the interface and optimized it for ease of navigation. For example, the statistics dashboard and project overview screens were designed to maximize efficiency, allowing users to filter data, assign tasks, and generate PDFs within 5–7 minutes—an estimated 20% improvement in task efficiency compared to more complex competitor products.
Dashboard & Project Management
Feature Prioritization: The statistics dashboard and project management screens were designed with clear, data-driven use cases in mind: filtering statistics by time and topic, viewing project statuses, and quick team assignments. Dropdown filters and collapsible sidebars ensured that information density remained at a manageable 75%, balancing information richness with clarity.
App Builder & PDF Generator
User Insights: Leveraging competitor insights, I designed a simplified app builder and PDF generator that resembled familiar tools like Figma but allowed for real functionality. These designs catered to novice users by providing an intuitive interface for team collaboration and document creation. Internal task simulations showed an 87% success rate in prototype interaction, confirming the design’s ease of use.
Payment Window & Conditional Logic Builder
Component Reusability: Key elements from the payment window (MasterCard, Visa, PayPal, Apple Pay) were reused in the app builder, which contributed to the 80% reusability score and helped streamline the design. The conditional logic builder was designed based on feedback from internal prototypes, simplifying advanced functionality for non-technical users.
Data-Driven Feedback Cycles
Feedback Speed: Throughout the seven-day sprint, our team managed to deliver 3–5 internal design iterations per screen and 1–3 client iterations, maintaining a rapid 24–48 hour feedback incorporation speed. By tracking the time it took to address feedback, we ensured that the process remained data-informed and agile, with the client expressing 95% satisfaction due to our responsiveness.
Team Collaboration
Prototype Interaction: Internally, we conducted multiple rounds of prototype testing using Figma, where we received 85% positive feedback on interaction design. This iterative approach allowed us to quickly identify and resolve usability issues, particularly in complex components like the dynamic logic builder and collaborative dashboards.
90%
Consistency Score
By leveraging data-driven design decisions, the final UI maintained a high degree of visual consistency and brand alignment.
80%
Component Reusability
Efficient reusability of key components ensured quicker iteration cycles and a cohesive user experience.
20%
Task Efficiency (20% improvement)
Hypothetical metrics suggested that users could complete key tasks more efficiently compared to industry standards, making Supatool intuitive for novice users.
95%
Client Satisfaction
The client expressed high satisfaction, driven by our ability to rapidly incorporate feedback and deliver a refined product mockup within the tight deadline.
Conclusion
This case study highlights my design thinking approach—grounded in data and user insights—while effectively balancing brand consistency and innovation. By employing data-driven decision-making at every stage, from competitor analysis to prototype testing, we delivered a UI design that was intuitive, visually consistent, and well-aligned with the client’s vision. Our ability to incorporate rapid feedback cycles and streamlined task flows resulted in a final product that demonstrated a strong focus on usability and client satisfaction. This project showcases how a data-driven design methodology can drive both functional and aesthetic outcomes, even under tight deadlines.
Webdesign & UI Kit
The networking platform website with a unique design and illustrations
App Widget Design
Helping an Austrian tech company boost their smart home system product with a new weather and energy widgets