UX Case Study

Super-charge the way you network

Business cards app

Tools Used

About Deets

The client, a tech startup, approached us with their mobile application, 'Deets'. Deets 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. They sought our help in addressing specific user adoption challenges. Our task was to identify usability issues and strategize which features and benefits are critical for the app's initial launch (Oct 2023).

Evaluate user experience and recommend improvements for Deets mobile app
Feature prioritization for app's soft launch
Provide user conversion strategy to transition from free to paid subscription.

My Role

User researcher and UI designer

The Problem

Users are hesitant to adopt the Deets app due to challenges in understanding its value, usability concerns, and security apprehensions; they need a more straightforward onboarding process, user-friendly card design tools, and a seamless sharing flow to build trust and confidently engage with the application.

Before

The Outcome

After thorough research and design improvements, we redesigned 30+ screens with 7+ screens of core feature re-vamping. The clients were not only receptive to our recommendations but also thrilled to incorporate them into the Deets mobile app.

KEY IMPROVEMENTS:

1. LOGIN & SIGNUP:

Intuitive onboarding process and simplified navigation (screen 1)

2. HOME PAGE:

Simplified and more intuitive card creation process
Dedicated homepage with personal card carousel.

3. CONTACT SHARING

Optimized card sharing with minimum possible steps in the user flow.
Card preview and personalized message for recipients.

4. CARD STYLING

Optimized card styling process with intuitive iconography.

5. CONTACTS LIST

'Rollodex' view to view all networks in a snapshot.
Custom groups option to categorize contacts

After

The Approach

Following the Double Diamond framework, our approach began with comprehensive research, diving deep into user interviews, competitor analysis, and heuristic evaluation during the "Discover" phase. This led to clear problem definition with "How Might We" statements in the "Define" phase. In the "Develop" phase, we brainstormed solutions, focusing on onboarding, card design, and sharing flows. After creating prototypes in the "Deliver" phase, we worked collaboratively with the client to bring our recommendations to life during the "Implement" phase. This systematic approach ensures a comprehensive solution to Deets' challenges.

CASE STUDY

Discover

User research and

Understanding the problem space

To understand the users and identify critical areas of success of the app, we undertook research across 3 key methods:

Competitor Analysis
Heuristic Evaluation
1:1 Interviews

Competitor Analysis

We studied the following competitors as identified by the client-

HiHello
Blinq
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 features paled in comparison.

Deets stood out in terms of the level of customization offered in card creation, for example being able to change the color of QR codes and allowing users to truly choose the look and feel of their business cards. Additionally, the automatic updation of contacts was a standout.

Heuristic Evaluation

A heuristic evaluation was conducted to assess the usability of the app, focusing on 10 usability heuristics.

The evaluation concentrated on onboarding, creating a card, and sharing flows.

The heuristics showed the app needs could be improved in the following areas:

Standardising the app's iconography and aesthetics
Improving flexibility and efficiency of core tasks (card creation and styling)
Incorporating error handling (incorrect password, support/help)

Personal Interviews

Interview Objectives:

Identify user delights and areas for improvement.
Evaluate user experiences when sharing details, creating and styling business cards, and searching contacts.
Observe which features come naturally to users and identify areas of user struggle.
Gather insights from both iPhone and Android users.
Document specific bugs, contact-sharing interactions, and critical success factors for the app.

Participant Details:

11 professionals
Early to mid-30s age bracket.
Working in diverse industries, including architecture, management consulting, investment, business ownership, social work, public relations, software engineering, and civil engineering.

11 Personal Interviews

11 Heuristic elements Inspected

3 Competitors Examined

“Why would you design a card if when you send it to someone they don’t see it”

“I assumed I’d be able to create more than one card, but I can’t see how to do it”

Define

Synthesizing the research

to generating actionable insights

Affinity Map

We created an affinity map to cluster our findings and came up with the following categories

PainPoints and Bugs
Features to prioritize
Attitude towards the app
UI feedback
Experience with business cards

Empathy Map

We captured and organized insights about Deets users' thoughts, feelings, and experiences into an empathy map to enhance understanding and design more empathetic products and services.

We found out that "not clear" and "I dont understand"was used frequently by our research participants.

"It’s not clear what you are editing - where will the image go that I am editing?”
"I don't understand how to create a new card, or if its possible at all"

Key insights for design decisions

The user research uncovered shared behaviors and frustrations among research participants, which proved to be of great value to drive our design decisions, these included:

Creating multiple cards: Users were unsure of how to create multiple cards, as there were no clear prompts or options on the homepage or within the hamburger menu.
Styling complexity: While users appreciated card customization, they found the styling options overwhelming and the UI design non-intuitive. The extensive creative freedom also resulted in cards with unreadable text, making the process time-consuming and confusing.
Complex sign-up: Users found the sign-up process non-intuitive. They desired autofill options and considered it more manual than necessary.
Value proposition uncertainty: Users questioned the app's value, as they already shared contacts from their iPhone or email signatures.
Need for templates: Users suggested adding pre-designed card templates to simplify the card creation process.
Card sharing challenges: Non-Deets users found it confusing when saving a card to their phone contacts, expecting it to save automatically after clicking 'Done.' They were also frustrated that they couldn’t view the styled card without the app.
Data security concerns: Users expressed data security concerns, emphasizing the need for clarity and assurance in this aspect.

Persona

We created our archetype user persona ‘Leroy’, a software engineer looking to expand his professional network.

Leroy is a techie who feels networking is clunky and time-consuming. He wants an optimal way to build his professional network.

Customer Journey Map

We mapped the customer journey for Leory accorss each of the main flows or tasks that users undertook-

Signing up/logging in
Creating a card
Styling the card
Creating New Card (Image in the right)
Sharing deets with contacts.

Develop

Building, Testing and Delivering the Final Solution

How Might We?

As asking the right questions is always one of the key factors to successful solutions we curated a number of 'How Might We' statements and prioritised the top three to fit the scope.

Crazy 8s

We undertook some rapid ideation focusing on our 3 key HMW statements. The key tasks were:

Worked independently and in small teams to sketch potential solutions.
We collectively voted on the concepts that best address the HMW problems.

MVP Matrix

We organized the ideas on a prioritization matrix along high-to-low value and difficult-to-easy axis points. It became clear that we had two broad categories to work on:

Hygiene factors
- These were a few quick-win solutions fundamental to the success of the app at launch.
- The hygiene factors primarily focussed on the app's interface changes and revamping the core user-flows.
Value adds
- We identified a few fantastic value add concepts that could drastically improved the app's user adoption

User Flows

Key differences

We re-looked at the key user flows i.e

1. Login/Signup

2. Card Styling

3. Card Sharing

The existing flows consisted of redundant steps, ambiguous feedback systems, and inconsistent and less-than-intuitive paths. All these flows needed to be reworked to make them simpler, and intuitive in the minimum possible steps.

We started building our low-fi wireframes by iterating designs for:

1. Dedicated home screen

2. Rolodex card view for contacts screen.

3. Card design template and layout.

4. Card sharing interfaces

5. Customized personal msg for contacts and

6. QR scan elements.

Low fidelity Wireframes

We designed initial wireframes to map out early iterations of the Home screen, Rolodex, and Contacts screen.

Once these looked good we moved on to the card design template and layout and sharing personal msg for contacts and QR scan elements.

At the end of this phase, we had a solid grip on user flows and mapped out our initial wireframes, influenced by our research insights. With a focus on hygiene uplifts, and value adds if time permitting, we then progressed onto our next design phase.

How might we further enhance the signup and contact details section to create a more frictionless onboarding process?

How might we make the card design process more intuitive and efficient?

How might we reduce potential errors to make the sharing flow more seamless?

Deliver

Building, Testing and Delivering the Final Solution

Branding

The clients had a clear vision of their brand identity so we worked within their brand guidelines for the UI design.
We also studied their existing design language to ensure the consistency of iconography and typography.

High Fidelity Prototype

Key Design Changes

Although we had decided to be designed primarily from a hygiene perspective, we also had a look at the value adds in the delivery phase where we were able to design for many value-add concepts as well.

1. LOGIN/SIGNUP (Addresses HMW1)

Primary Value Adds
- User-friendly onboarding process with progress bar and skip functions
- Intuitive navigation- edit and share button placements
- Autofill details from sign-up into the first card
Primary Hygiene Uplifts
- Welcome to Deets page- Capitalization and layout redesign
- Consistent and functional iconography
- Consistent, standard logos for Gmail, Microsoft, and Apple on sign-in and log-in pages

3. CARD STYLING (Addresses HMW1)

Primary Value Adds
1. Edit and preview functions
2. Clickable areas for users to upload images
3. Logo search and add function
Primary Hygiene Uplifts
1. Review of information architecture, users were confused by the style menu
2. Area for company logo
3. Increased usability of toggles

4. CARD SHARING (Addresses HMW3)

Primary Value Adds
- Card preview when sharing business card
- Custom messages will populate when sharing details
- Personalised notes that can be added when saving card to the app
Primary Hygiene Uplifts
- Contact shared successfully interaction
- Deets to Deets sharing flow and functionality improved
- Option to choose which card to share back- incorrect order previously

5. CONTACT LIST (Addresses HMW1)

Primary Value Adds
- ‘Rollodex’ view for contacts
- Custom groups options
Primary Hygiene Uplifts
- Contact filtering
- The contacts page resembles that of the user’s device
- Information architecture and layout

Bug Optimization List

How might we further enhance the sign-up and contact details section to create a more frictionless onboarding process?

Cross-platform incompatibility
No validation upon task completion
The privacy policy is undisclosed

How might we make the card design process more intuitive and efficient?

Standard image formats are not supported.
When opening ‘edit’ and without making any changes, it still asks if you want to save

How might we reduce potential errors to make the sharing flow more seamless?

Cross-platform incompatibility
Link sharing doesn’t save the contact in the Deets app.
Contacts not saved while sharing Deets to Deets User.

Feature Recommendation for Product Launch

We drafted the most critical impact points that we found out from our research and design solutions. This adhered to the objective 2 as clearly laid out by the client.

We recommended the following actions to help the client steer their next steps:

Bug resolution: Prioritise resolving identified bugs and usability issues to enhance the app's reliability and user experience
Feature prioritization: Decide on what design features Deets would like to implement before the launch
User testing: Undertake user testing to validate designs and gather feedback on the app's usability and perceived value by users
Market analytics: Reassess the market landscape for potential strategic adjustments to the app, and to identify any risk factors.

We provided user-suggested features, or those that we feel would add value to the Deets app, whilst solving user pain points, as next steps post shipping the MVP:

Email signature integration
Add a note / contextual reminder when saving a contact
Customize the back of the business card

Before

After

Prioritise fundamental user experience

“I would like a nicer and more intuitive experience, UI that matches what other apps do”

Users expressed concerns the fundamental user experience and interface elements were frustrating.

Focus on Privacy

“I am not comfortable putting all my contact details on a third-party app”

Privacy was a key concern for users when using the app - they wanted to know how their data was being protected.

Paper business card scanner

"I would use it if I was able to scan my existing paper cards without having to maually enter details"

Users liked the idea of digitising paper business cards that they already owned- to have one centralised place for all contacts.

Card design templates

“Different templates would be helpful. It would be good if all I had to do was add images in”

Users appreciate the ability to customise their cards, but many found it challenging. They felt templates to simplify the process would be helpful and make creating a card more efficient.

Key Learnings

Project's perceived needs vs Actual needs:

Initially, the client approached us with a focus on user testing, bug reporting, and feature prioritization. However, in the research phase it quickly became evident that the project required a more comprehensive approach. We recognized the necessity for strategic adjustments before proceeding with the Minimum Viable Product (MVP) and identified key User Experience (UX) considerations that demanded attention.

To align expectations and provide clarity, we engaged in open communication with the client where we emphasized that the project needed a thorough reassessment to meet before the soft launch.

Upon presenting our recommendations to the client, they were not only receptive but also positively overwhelmed by the depth of analysis we offered. This experience underlined to me the importance of moving beyond perceived needs, ensuring a more strategic and holistic approach to project development.

Inclusivity through accessible design:

From a practical standpoint, I was able to observe features like adjustable font sizes, clear navigation cues, contrast, and visual clarity significantly improve accessibility considerations. This made me understand that prioritizing accessibility isn't just a choice; it's a commitment to ensure that technology serves everyone, leaving no user behind.

Collaborating with a diverse team:

This project somehow had brought together a cohort that possessed experience in various complementary skills, we had people with talent in comprehensive research and branding specialists, and I was happy to have leveraged my technical skills in scripting and hands-on. It truly was a superb coexistence of various talents informing one another.