Deets

(UX/UI design)

Redesign of Deets Digital Business Card App

Duration

4 Week Design Sprint(September 2023)

Type:

Client Project for the Live App Deets

Tools:

Figma, Figjam, Google doc, google slide, Slack

Team:

11 UX/UI designer

Who’s the client?

I was involved in a student team project evaluating Deets, a digital business card app designed for professionals and teams. Our goal was to pinpoint usability issues, prioritize critical features for its October 2023 launch, and enhance user onboarding to attract paying customers. The final deliverables comprised a client presentation and a prototype featuring updated flows and designs based on research insights, along with recommendations for a successful launch.

MY Role

As a team, we performed user research and competitive analysis, Heuristic evaluation and created user flow, wireframes and prototype in a 4 week sprint. I worked on this real client project as part of my Academy Xi's UX/UI Design course.

Main Challenges

Prior to commencing our formal UX research, my team and I initiated a self-conducted observation to gain initial insights to understand problem.

However in our discovery workshop with the client and also our app review we identified 4 user experience issues.

1. Multiple bugs

The DEETS app contained multiple bugs which impact a users' ability to complete key tasks.

Impact: Bugs disrupt the user experience and trust in the app.

2. Poor Onboarding Experience

The onboarding experience is unintuitive and confusing. Information entered during onboarding doesn't auto-populate in a user's card.

Impact: A poor onboarding process could discourage users from using the app.

3. Non-intuitive card creating and card styling

Creating and styling a digital card in the app was not intuitive, with a lack of buttons for key actions.

Impact: A time-consuming and frustrating user experience.

4. Unclear value proposition

There was a lack of a clear and compelling value proposition, leaving potential users uncertain about the app's unique benefits.

Impact: A lack of a compelling value proposition could impact Deets' ability to engage and retain users.

The problem

Users need a more frictionless onboarding process, intuitive card design tools and a seamless share flow so that they can trust the app.

Research Goals

  • Improving the user interface for more intuitive and user-friendly experience.

  • Improving the onboarding process to create a frictionless user experience.

  • Improving the share flow to make it more user-friendly and intuitive.

  • Optimising the user flows and providing recommendations for essential features.

Design Process

our approach began with comprehensive research:

  • 11 behavioural user interviews

  • 3 competitor reviews

  • Heuristic evaluation

Behavioural Interviews

Developed an interview and testing script, conducting 11 user interviews to understand business card experiences, contact-sharing behaviors, and app interactions.

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.

The insights from these interviews were instrumental in identifying user journey pain points and positive app features.

Competitor Analysis

We studied the following competitors to identify areas of strength and gaps in the market .

  • HiHello

  • Blinq

  • Haystack

This analysis revealed that:

Deets lacked several features offered by competitors, such as card design templates and the ability to create multiple cards in a free plan. Highlighted Deets' robust card customisation options, setting it apart and influencing our strategic direction.

Heuristic Evaluation

The evaluation concentrated on onboarding, creating and styling a card, and sharing flows. 
 The heuristics showed the app needs to be improved in the following areas: 

match between system and real world, flexibility and efficiency of use, error prevention, and aesthetic and minimalist design. 

Mapping User Flows

We also mapped the user flows for onboarding, card creation, styling, and sharing. These maps helped us understand the sequence of actions users take in the app and identify steps that could be simplified to streamline the user journey.

A screenshot of the styling flow

Overwhelmed with all the insights…

After all of that user research and testing, we then needed to make sense of our notes and began grouping them into categories through affinity mapping to understand the key insights and priorities.

The themes that we created from the data were included:


User Delights:

  • Card customization: Users enjoyed customising their cards and were happy about the amount of details that can be included.

  • Multiple business cards: Users liked the option of creating of multiple business cards to share with different audiences.

  • Social media links: Users liked the option to link other platforms onto the app.

    User PainPoints:

  • Sharing card to Deets non user: Users found it confusing to save the card to phone contacts as they expected it to be saved after they clicked ‘Done’. 

  • Onboarding: Users expected to see home page and their business card separately. 

  • Multiple Card creation: Users could not figure out how to create multiple cards or if it was possible at all. 

  • Styling card: Users found styling their business cards challenging, as UI is not intuitive enough to understand how to complete tasks related to customization. 

  • Feedback mechanism: Limited visual feedback provided to let a user confirm if an action was successful. 

The key insights then led us to create…

Creating a persona that encapsulated the key traits of the users that we discovered in our research enabled us to empathize with DEETS users. This, empowered us to pinpoint and address the challenges they encounter with the app.

Understanding The Customer Journey

We mapped the customer journey for our persona across each of the main flows or tasks that users undertook:

  • onboarding

  • card creation

  • styling

  • sharing flows.

These maps guided the design strategy and played a key role in prioritising painpoints to be addressed.

Idea Generation

To reframe pain points from the research into design opportunities we used the journey maps and created three HMW (How Might We) statements.

How Might We

Further enhance the sign-up 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?

The opportunity

Informed by user research, our exploration revolved around three key opportunities:

streamlining the onboarding process, optimising card design for efficiency, and refining the sharing flow to minimise potential errors

01

02

03

Exploring and validating potential solutions

Sketching

We undertook some rapid ideation focusing on our 3 key HMW statements. we sketched multiple screens and user flows. Here are some early sketches we worked on for the Deets Homepage, styling page, contact page and premium features pop-up.

Wireframing the Solution

From sketches, we started crafting initial wireframes in Figma to tackle fundamental user challenges. Our primary objectives revolved around addressing the three 'How Might We' (HMW) statements related to enhancing onboarding, card styling, and card sharing.

I concentrated on the card styling HMW statement.

Final Designs

Uplifted onboarding process

We introduced a multi-step onboarding process to the app, offering users the flexibility to provide key details (email, name, company information, profile image) or skip.

User-friendly features:

  • Autofill details from sign-up into the first card

  • As a result, the app now automatically generates a draft card that users can edit on their home page. This change aims to simplifying the manual card creation process and meeting users' expectations that cards be pre-populated using details from their sign-up form.

Improved site navigation

We redesigned the Deets homepage, replacing the prior version which presented either a 'create new card' button for newcomers or the user's card as the homepage. In the updated homepage, we introduced an intuitive carousel to display a user's active cards, making it effortless to preview and share them.

To enhance user accessibility, we implemented a bottom navigation bar for essential actions and added a 'plus' button on the homepage to simplify the process of creating additional cards.

These changes stemmed from valuable user feedback, addressing issues such as challenges in adding multiple cards due to a lack of prominent buttons or visual cues, as well as difficulties in accessing essential functions like contacts, which were hidden behind the hamburger menu.

Seamless contact sharing

The contact sharing process was non-intutive and contained numerous bugs.

Key issues included:

  • Confusing messaging led to users misunderstanding how to save a card to their phone.

  • Non-Deets users couldn't view shared cards, raising questions about the purpose of designing a card if people don't see it.

  • Sharing with Deets users didn't direct recipients to the app, instead it prompted users to download the app.

  • Lack of feedback left users uncertain about successful contact sharing.

  • Users has no dedicated screen to view all their cards, causing inefficiency, especially with many cards.

To address these issues, we made a number of changes based on user research, including:

  • Streamlined sharing for both Deets and non-Deets users, adding prominent share buttons to cards for quick access.

  • Included a card preview feature when sharing cards via a link.

  • Provided feedback through success messages to confirm successful contact sharing.

  • Enhanced Deets-to-Deets sharing functionality.

  • Enabled users to customise the message that is sent with their card.

Intuitive card styling

Enhancing card styling was a top priority, driven by user concerns regarding its complexity, the overwhelming number of options, and the time-consuming nature of the process.

We made numerous improvements based on research, including:

  • Automatic generation of draft cards during onboarding.

  • Introduction of clickable editing, allowing users to make quick updates by clicking directly on elements and reducing user confusion.

  • Implementation of a card preview feature, enabling users to review their card before saving.

  • Improved toggle usability by increasing their size and simplifying style information for a more user-friendly experience.

  • Addition of the ability to include logos, based on user feedback.

  • Recommendation of design templates to streamline the process, informed by research.

Before

Before

Before

Before

After

After

After

After

The Final Solution

  • While the DEETS app's official launch is pending, our UX review made a significant impact. Deets fully embraced our design recommendations.

    KEY IMPROVEMENTS:​

    1. LOGIN & SIGNUP:

    Intuitive onboarding process and simplified navigation

    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

  • We drafted the most critical impact points that we found out from our research and design solutions.

    ​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.

  • Scope Management: The initial scope included tasks such as reviewing the Deets website, generating marketing ideas, and testing designs. We priortised the app and usability from the start. Through this experience, I developed a deeper understanding of how to prioritise effectively and communicate project boundaries with clarity. This project equipped me with practical skills that will prove invaluable in future projects.

    User Testing: Conducting comprehensive user testing and creating interview scripts deepened my understanding of testing methods and user behavior. I enjoyed leveraging my journalism skills for interviewing during the project.