Back to Portfolio

Deets App

Designed and shipped a digital contact card MVP app for soft launch, focusing on boosting user adoption.

Deets App
90%
Users rated the redesigned experience 4/5 out of 5 for usability and visual clarity
2x
Faster task completion during usability testing for key actions like sharing and styling a card
100+
Mobile-first high-fidelity Figma screens delivered for all core task flows
20+
UX artifacts including 2 primary personas, 5 core task flows, 5 journey maps, IA diagrams, interview and usability test reports

Project Overview

The client, a tech startup, is an Australian digital business card app tailored for professionals and business teams, empowering users to effortlessly create and share digital business cards using QR codes and links.

The Product & The Scope

The client, a tech startup, is an Australian digital business card app tailored for professionals and business teams, empowering users to effortlessly create and share digital business cards using QR codes and links.

Deets faced specific user adoption challenges:

  • Low User Adoption – Users were hesitant to adopt the app due to challenges in understanding its value, usability concerns, and security apprehensions.
  • Complex Onboarding – The onboarding process was unintuitive and confusing, leading to user frustration.
  • Unintuitive Task flows – Users found styling their business cards challenging due to a non-intuitive interface.
  • Unclear Value Proposition – There was a lack of a clear and compelling value proposition, leaving potential users uncertain about the app's unique benefits.

The Team

We were a small but focused squad, combining design, research, and product practice. We closely collaborated between our internal team and the client side team.

Deets App Team

The Process

We followed a user-centered design thinking process, focusing on understanding users' pain points and business needs. Our goal was to create a solution that balanced usability, business value, and technical feasibility through continuous feedback loops and iteration.

Key Steps:

1. Stakeholder Interviews
Discovery
Engaged with product managers, founders, and developers to understand business objectives, user expectations, and technical limitations.
2. UX Research
Research
Conducted in-depth user interviews and usability testing sessions to identify usability gaps and improvement opportunities. Synthesized findings into actionable artifacts including personas, journey maps, and task flows to align on design direction.
3. Design & Iteration
Design
Developed wireframes and UI aligned with brand guidelines. Created a modular style guide and interactive prototypes, refining designs based on continuous feedback.
4. Handoff & Specs
Delivery
Delivered developer-ready specifications and supported handoff through documentation.

The Outcome

We delivered a research-backed, developer-ready design solution that significantly improved product clarity, usability, and team efficiency. Early validation through usability testing demonstrated measurable gains in user performance and perception.

Key Results:

  • MVP and recommendations were positively received by stakeholders and clients, reinforcing long-term roadmap alignment
  • 2× increase in user adoption within the first month post-launch
  • 70% decrease in user drop-off between key task steps
90%
Users rated the redesigned experience 4/5 out of 5 for usability and visual clarity
2x
Faster task completion during usability testing for key actions like sharing and styling a card
100+
Mobile-first high-fidelity Figma screens delivered for all core task flows
20+
UX artifacts including 2 primary personas, 5 core task flows, 5 journey maps, IA diagrams, interview and usability test reports
Design System Component Library
Design System Documentation
Design System Implementation
Deets App Outcome Screenshots
PROJECT OVERVIEW
Company DEETS tech
Project Category Mobile App
Role UX Researcher, UI Designer
Tech Stack • Figma
• Figjam
• Google Survey
• Adobe Illustrator
• Excel
• PowerPoint
• HTML & CSS
Deliverables • Interactive MVP (Figma)
• Component Library
• UX Artifacts
Date Q3 2023
Project Overview
UX Research
UI Design
Deliverables Handoff
Before vs After
Key Learnings

Complete Case Study

Given the app's struggles with user adoption and onboarding, deep user and stakeholder research was essential to uncover hidden pain points and align the team on what really mattered. Without a clear understanding of user behaviors, motivations, and technical constraints, any redesign risked missing the mark.

UX Research

UX Research enabled us to base design decisions on evidence, ensuring the solution would be both user-friendly and feasible to build.

Stakeholder Interviews

We engaged closely with the client side team to clarify the project vision, business objectives, and technical constraints. These conversations helped us identify what success looked like from a business perspective and highlighted existing development challenges impacting user experience.

Competitor Analysis

To understand the market landscape and identify UX opportunities, we conducted a focused competitor analysis of three key players identified by the client:

Blinq

Blinq

HiHello

HiHello

Haystack

Haystack

  • HiHello and Blinq stood out with their new user onboarding and card design templates. They also both had features behind a paywall which encouraged users to upgrade.
  • Haystack's UI and limited features posed minimal competitive threat.

Key Differentiator for Deets

Personalization Power

Users could personalize QR codes with color options, layout tweaks, and branding — a level of control rarely seen in similar apps.

Real-time Sync

When someone updates their info, it syncs across all saved contacts instantly — no additional outdated details or manual re-entry.

Deep Customization

From fonts and layouts to social links and notes, Deets offered deep flexibility to tailor every card to personal or professional needs.

User Interviews & Usability Testing

We conducted comprehensive user research to understand how people actually use digital business cards and identify pain points in their current workflows.

We conducted structured usability evaluations and in-depth interviews with users across iOS and Android.

Participant Snapshot
  • 11 professionals aged 25–55
  • Roles across architecture, consulting, finance, tech, PR, and social sectors
  • Mix of Android and iOS users
  • Regular networkers and digital tool users
Objectives
  • Understand what users enjoy and where they struggle
  • Evaluate ease of sharing and customizing digital cards
  • Observe which features feel intuitive vs. confusing
  • Capture platform-specific (iOS vs. Android) experiences
  • Identify bugs, blockers, and unexpected behaviors
Insights Gathered

75% experienced lack of clear error feedback during login and onboarding tasks

40% questioned the overall value and uniqueness of the app, impacting adoption

70% struggled with locating and effectively using styling/customization features

85% of users reported confusion due to inconsistent iconography and design language

60% missed visual hierarchy cues, resulting in incomplete workflows

Participant Quote
"I assumed I'd be able to create more than one card, but I can't see how to do it"

Synthesizing Insights

Based on our comprehensive research and usability findings, we distilled key insights to guide the design direction and prioritize improvements.

1. Discoverability & Usability Gaps
Users struggled to locate card creation options and customization paths. This outlined the need for clearer navigation and streamlined interactions.
2. Value Proposition Uncertainty
40% questioned the app's unique benefits. This highlighted a critical need to clarify and communicate Deets' value clearly.
3. Error Feedback & Reliability Issues
Users encountered bugs affecting login, signup and card sharing flows. This created gap in user trust and experience quality.
4. Branding & Visual Consistency Issues
Users experienced confusion due to inconsistent visual elements. This called for a unified and clear brand presentation throughout the app experience.
These insights shaped the creation of:
2x
primary personas representing core user groups
5x
user flows for key tasks, such as card creation, styling, sharing, deletion and login/signup
5x
user journey maps across each task flow pinpointing key pain points and opportunities
Affinity Mapping by Group

User Personas

We created 2 primary personas that guided our customer journey mapping and the design iteration from initial concepts to wireframes. Throughout the design process, we continually referred back to these personas to sense check that the proposed user flows met the needs of users that were different to our own.

👔
Professional Paul

A mid-30s consultant who values efficiency and professionalism. Needs quick, customizable digital cards to share with clients and colleagues seamlessly.

💼
Entrepreneur Emma

A young business owner who prioritizes brand expression and flexibility. Seeks extensive customization to reflect her unique business identity.

Journey Maps

The CJMs served as invaluable tools for the design team as they offered insights into the digital touchpoints our key personas encountered while interacting with the app. We mapped the journeys across the 5 core tasks users regularly performed to uncover pain points.

Task Pain Point Opportunity
Task 1: Sign Up / Log In Confusing onboarding steps caused user drop-off early in the journey. Streamline onboarding process with clear, guided steps to reduce early drop-off.
Task 2: Card Creation Users did not find it intuitive to create a new card due to unclear navigation Make the card creation more intuitive by discoverable CTA guided by helpful tooltips
Task 3: Card Styling Complex styling options overwhelmed users, reducing customization engagement with the feature. Introduce preset templates and guided styling options to make customization easier and more accessible.
Task 4: Multiple Card Creation Users couldn't easily discover the option to create multiple cards, leading to underutilization of this feature. Design a clear, intuitive card creation interface with improved navigation and discoverability
Task 5: Card Sharing Insufficient feedback on successful sharing caused uncertainty among users. Implement clear confirmation messages and share tracking to improve user confidence and satisfaction.

Feature Prioritization

We mapped all identified ideas onto a prioritization matrix, plotting them by value to users (high to low) and implementation complexity (easy to difficult). This helped us categorize features into two key groups:

15+ ideas selected
Hygiene Factors

Quick wins essential for a successful launch. These focused on revamping the app's core user interface and streamlining key user flows to fix critical usability issues.

3+ ideas selected
Value Adds

Innovative features with high potential to significantly boost user adoption and engagement, planned as enhancements post-launch.

MVP Matrix

Refined Site Map & User flows

We re-evaluated and redesigned the core user flows to reduce friction and streamline interactions. The existing flows had redundant steps, unclear feedback, and inconsistent UI patterns—all of which contributed to user drop-off.

We restructured the app's information architecture with a focus on clarity, discoverability, and efficiency. The goal was to reduce cognitive load and make key features more accessible.

Improvement Area Key Improvements
1. Centralized Access Centralized all key actions—card management, sharing, and contacts—on a dedicated home screen to reduce navigation depth.
2. Simplified Navigation Reduced bottom nav items to 3 core sections:
→ My Cards (View, edit, and create all saved business cards)
→ Scan (Instantly scan a contact's QR code)
→ Contacts (Access saved profiles and shared Deets)
3. Clear Hierarchy Reorganized screens so primary tasks like creating, styling, and sharing cards are surfaced earlier in the flow.
User Flow

UI Design

Once the UX artifacts were finalized we approached UI design as an iterative process in internal sketching sessions, and regular feedback loops. Starting from wireframes to final prototype, we tested early and often.

Design System

The client had a well-defined brand identity, which provided strong visual foundations. We built on it to refine Deets' brand experience — not reinvent, but elevate.

We started by reviewing the existing visual language and then extended it into a scalable system that ensured consistency, scale, and clarity throughout the design and development process.

Design Element Specifications
Typography scale Established a 5 level hierarchy using the brand's chosen typeface. Font sizes and weights were optimized for readability on small screens, ensuring consistency across iOS and Android.
Color tokens Defined color tokens aligned to the Deets brand. Each token passed WCAG AA contrast checks and was mapped to specific UI functions like alerts, backgrounds, and CTAs.
Iconography system Rebuilt with a unified 2px stroke and consistent visual metaphors. All icons were optimized for legibility at 24px and designed to be visually cohesive within the UI.
Button & input components Created reusable components with defined states—default, hover, tap, and error. These components followed mobile-first sizing and spacing conventions for optimal usability.
Spacing rules & grid structure Implemented an 8pt spacing system with a 4-column grid tailored for mobile devices. This ensured layout rhythm and alignment across different screens and interactions.

By anchoring our UI decisions in mobile standards and real usage contexts, we ensured a polished, user-friendly experience ready for development handoff.

Wireframes to High-Fidelity

Once we validated our early UX concepts, we started with low-fidelity wireframes and evolving them through ongoing testing and design jams into high-fidelity screens.

This process focused on uplifting the product's core hygiene factors. We layered in valuable enhancements where possible. Each iteration aimed to simplify the experience, and align flows with user expectations.

1. Login / Signup

"How might we enhance the signup process for smoother onboarding?"

  • Redesigned "Welcome to Deets" page layout
  • Consistent, standard logos for Gmail, Microsoft, and Apple
  • Autofill details from signup into first card
2. Card Styling

"How might we make the card creation process more intuitive?"

  • Click-to-edit fields and image uploads
  • Integrated logo search + upload
  • Real-time preview mode for better visibility
  • Improved toggle usability
3. Card Sharing

"How might we reduce confusion in the sharing experience?"

  • Card preview before sharing
  • Auto-generated custom messages
  • Personal notes when saving a card
  • Option to choose which card to share (fixing previous order issue)
4. Contacts View

"How might we make the contact screen more familiar and filterable?"

  • New "Rolodex-style" card view
  • Ability to group contacts
  • Autofill details from signup into first card
Wireframe 1
Wireframe 2
Wireframe 3
Wireframe 4
Wireframe 5
Wireframe 6
Wireframe 7
Wireframe 8
Wireframe 9
Wireframe 10

Before vs After

Once the high-fidelity designs were locked in, we brought everything to life through an interactive prototype built in Figma. This allowed us to test core flows and validate our design decisions in real-world-like scenarios.

It helped stakeholders interact with the product before development and Identified micro-frictions in navigation. This set the foundation for a smoother handoff to developers

Before - Client's MVP

The client's MVP had confusing navigation, unclear value proposition, and inconsistent design patterns, making it hard for users to create and share digital business cards effectively.

Deets Before 1
Deets Before 2
Deets Before 3
Deets Before 4
Deets Before 5
Deets Before 6
Deets Before 7
Deets Before 8
Deets Before 9
Deets Before 10

After - Redesigned Deets App

The redesigned Deets app introduced intuitive card creation flows, clear sharing mechanisms, and streamlined contact management, making it easy for users to create and share professional digital business cards.

Deets After 1
Deets After 2
Deets After 3
Deets After 4
Deets After 5
Deets After 6
Deets After 7
Deets After 8
Deets After 9
Deets After 10
Deets After 11
Deets After 12
Deets After 13
Deets After 14

Deliverables Handoff

After testing and prototyping, we moved into final delivery — documenting findings, handing off assets, and recommending clear next steps for the client ahead of launch.

Wireframes to High-Fidelity

Once we validated our early UX concepts, we started with low-fidelity wireframes and evolving them through ongoing testing and design jams into high-fidelity screens.

This process focused on uplifting the product's core hygiene factors. We layered in valuable enhancements where possible. Each iteration aimed to simplify the experience, and align flows with user expectations.

UX Artifacts Deliverables Description
Final UI Screens 50+ Hi-Fi UI Screens Mobile-first high-fidelity mockups for all core screens (Onboarding, Card Styling, Sharing, Contacts)
Interactive Figma Prototype 100% Clickable Flows Mobile-first high-fidelity mockups for all core screens (Onboarding, Card Styling, Sharing, Contacts)
Component Library 50+ Reusable Components Button, input, card, and layout components built as a shared design system
UX Artifacts 12+ Annotated Documents Button, input, card, and layout components built as a shared design system
Usability Report 20+ Issues Logged Detailed list of bugs, inconsistencies, and UX gaps found during testing and early validation
Recommended Actions Pre-Launch Checklist Actionable next steps including bug resolution, feature prioritisation, and market alignment for a confident soft launch launch.

In a comprehensive handoff workshop we walked through the high-fidelity screens, UX insights, and rationale for launch recommendations.

Key Learnings

This project was my first full end-to-end design delivery experience, and it came with a lot of valuable learning moments. Collaborating with a talented team of designers helped me grow and sharpen my Figma skills. I had a steep learning curve initially as I stayed aligned with the fast-paced delivery timelines expected by both the development and product teams.

Designing for real users is messy but rewarding:

Working closely with real feedback showed us that intuitive design often hides in the details. Throughout the project, I saw firsthand how features like clear navigation cues and overall visual clarity can make a huge difference to real users.

Great UX starts with a unified team:

Keeping communication open and building trust with designers, researchers, developers and business teams was truly impactful. Being clear about where we needed support and how we could provide help helped us collaborate smoothly and solve problems faster.

You might be interested in:

Dashboard Design Studio

Dashboard Design Studio

SaaS Data Dashboard

 Design System

Design System

SaaS design library

 Deets App

Deets App

Mobile App MVP

 DeepSlice Pizza

DeepSlice Pizza

Food Web and Mobile App

 Gen AI Design

Gen AI Design

Enterprise SaaS – Gen AI