Client
None
Location
Amsterdam, NL
Year
2024
Duration
1 month
Contribution
Brand design, UI/UX, visual design, motion design, copywriting, marketing
In a nutshell
Deep dive

In a nutshell

Introduction

Matchbox helps you find better gifts. By setting up and training a profile for anyone you need to buy a gift for, you won’t have to stress about shopping anymore. This project and its case study were written specifically to showcase what the initial design process of an app might look like. If you're interested in the research and processes behind projects like this, I highly recommend checking out the deep dive tab. If you'd rather just see some renders of the final product, keep scrolling!

Logo design

Designed with simplicity and accessibility in mind, the Matchbox logo is geometric yet playful. The all-caps typeface makes sure the logo stays legible at smaller sizes while the curvy accents inject some fun into the design. The lowercase 'a' was chosen for more optimal spacing, and its shape is mirrored to create the 'C', for some extra visual harmony. The result: a clear, memorable logo perfect for any size, from thumb-sizes icon to full screen.

Brand design

Like the logo, we keep the typography simple: the easily readable and versatile Figtree font family is perfect for that. Color usage is also minimal but intentional. Dark green provides a premium, versatile look that pairs well with product photos, while yellow accents add a sense of optimism and a pop of color to draw attention. For this project, we opted for out-of-the-box icons. To cover the wide variety of possible products to swipe on, Matchbox uses the MingCute icon set. However, some custom icons were designed for key features due to legibility issues with the originals.

Opening the app

Upon first opening the app, new users are greeted with a splash screen—but interestingly, there’s no sign-up form. Instead, Matchbox creates a locally stored invisible account for each user, allowing them to jump straight into creating their first recipient profile. If users want to create a formal account, they can do so through the Settings screen.
Users can choose between a quick and an elaborate process when adding their first recipient.

Creating a user profile

Matchbox gathers most of its information from a user’s swiping input, but if users want to start with more informed suggestions, they can opt to create a detailed profile. Creating a profile this way gives you a head start and helps you get into the mindset of the person you're shopping for, though it does take a bit longer. If that’s not your thing, you can create a quick profile that only requires the basics, such as a name and budget.
Take a look at this clickable prototype showcasing the profile creation process!
Matchbox's suggestions get increasingly accurate the more the user swipes.

Speed-dating for gifts

Most people are familiar with swiping interactions by now—many primary social platforms use it extensively. Matchbox's user interface was largely inspired by one of the pioneers of swiping: Tinder. The UI is intuitive: if you like something, give it a heart; if you don’t, give it an X. All liked products move into the Top Picks tab, where users can view more information about the product and be redirected to the vendor’s website or app if they’re interested.
The intuitive interface makes Matchbox easy to use for people of all ages.
The built-in calendar helps users keep track of events like birthdays, anniversaries, and holidays.

World's most generous calendar

Matchbox isn’t just for those who need help finding the right gifts; it’s also for those who tend to forget! The built-in calendar feature helps you keep track of birthdays, anniversaries, holidays, and other special occasions when you might want to get someone something nice. You can even enable push notifications to ensure you don’t forget.

Conclusion

Every project comes with its own unique sets of problems to solve, and each problem comes with a learning moment. In this section of the case study I'll be going over some of the aftermath of the project and what its takeaways are.

Consistency vs. optimization

Matchbox’s UX design borrows from well-known UI patterns, but one size rarely fits all. Often, the perfect solution to a problem can be achieved by existing solutions for about 80%, but that remaining 20% may require some extra effort. The UI for Matchbox is mostly composed of recurring components, but some liberties were taken to improve the interface or the visual design of the product. Consistency is important, but so is a flexible approach.

A living timeline

Design stages often overlap; for example, wireframes often begin midway through the information architecture process. After establishing the brand identity, I revisited the wireframes with a clearer vision of typography and color. Viewing the product as one big picture instead of a series of consecutive processes helps contextualize the work, especially when working independently.

Would your product benefit from a design treatment like this?

Diving into new and exciting challenges is what keeps my job interesting. My hybrid approach of integrating marketing and user experience research into product design is especially useful for early-stage startups and software development firms. If that sounds interesting to you, please don’t hesitate to get in touch.

Deep dive

Introduction

Matchbox is a concept for a consumer-oriented app service that uses machine learning to help you find better gifts. Users can create digital stand-ins of their recipients by setting up a profile for them and then rating potential gifts as if they’re the person they want to buy for. This project is a mock case study designed to illustrate a standardized app design process.

Background

A lot of the more complex UX work that I do is either protected by an NDA or not up for dissection, at the discretion of my clients. I created Matchbox as a case study to be able to showcase what an app design process could look like.  As of writing this case study, there are no plans to push the concept into production.

Kickoff research

During the first wave of market research, I set out to test my hypotheses about the state of the market and the potential user base to inform branding and UX design decisions. I did this by setting up surveys and interviews and looking for relevant media and related studies. Additionally, I wanted to gauge potential opportunities for a monetization model that felt natural and non-detrimental to the end user.

Key findings

Marketing-oriented findings

  • Demographic factors such as income, family size, and geographical location significantly influence gift-related spending patterns. In 2023, the average American spent $923 on gifts. In contrast, the average expenditure in the United Kingdom was notably lower at £602. The Dutch were even more frugal, with an average spending of about €341. Notably, in 2018, interviewees reported spending an average of €122 during the winter holidays.
  • Somewhat surprisingly, kids are not the most likely demographic to receive gifts. That honor goes to (romantic) partners, with just over 60 percent of people prioritizing them.
  • Gift givers tend to spend more money on affluent recipients than on those with a lower socioeconomic status. This is partly due to the belief that wealthy recipients prefer expensive gifts, but it is also a way to signal the giver's own financial status.
  • 52% of consumers purchase gift cards out of convenience, and 90% consider physical gift cards an acceptable gift. Gift cards are often last-minute purchases, and the likelihood of opting for a gift card increases the less close the gifter is to the recipient.
  • Unsurprisingly, gift sales peak during the fourth quarter of the year. A smaller spike in gift sales occurs during the summer months of July, August, and September, which are the most common months for birthdays.

Product-oriented findings

  • Although the app’s initial concept sounded promising to my interviewees, some expressed discomfort about sharing highly personal information, such as someone’s purchasing history.
  • A general distrust of anything perceived as AI noticeably deterred some interviewees from embracing the app concept. Concerns about AI and its capabilities have been gradually increasing over the past few years.

Sources:

Personas

In design-oriented fields like branding and user experience design, we often use personas to visualize the target groups we're designing for. A persona is essentially an idealized representation of who your user is. By attaching a face to the typically faceless 'generic user,' we make it easier to empathize with them, and design accordingly. The personas shown below were assembled by traits and statements gathered from my findings during the marketing research.
Name
Deborah
Age
68
Profession
Retired nurse
Personal statement
As a 68-year-old woman with two grown children, I've been blessed with five wonderful grandchildren. Now that some of them are getting into their preteen years, it’s getting tougher to find gifts they actually like.
Challenge
Living off an average pension, I can't always afford to buy the latest gadgets and gizmos every birthday or holiday. I’m looking for a good balance between affordable gifts and things that my grandkids will still enjoy.
Needs
I do most of my online shopping on my computer, but I can use my smartphone for some things too. I play a few mobile games, chat with friends and family on WhatsApp, and check the weather. I’ve never really understood all this new stuff like AI or machine learning, and I’m pretty skeptical about it.
Name
Lissa
Age
31
Profession
Customer success manager
Personal statement
Maintaining valuable relationships is crucial to my job. One simple but effective way to do this is by sending thoughtful gifts to my contacts on special occasions.
Challenge
Choosing the right present can be really time-consuming, especially when I don’t know the recipient very well.
Needs
I need a quick and reliable way to find safe, appropriate gift options for my business contacts. These gifts should be professional and thoughtful, reflecting well on both me and the company. While budgets can be flexible depending on the importance of the relationship, having a standard price range to work within would make the process much more efficient.
Name
Jonathan
Age
27
Profession
Barista / student
Personal statement
I'm working toward my master's in Theatre Studies, and I juggle a lot of tasks on a daily basis. Between writing my thesis and working to cover my expenses, my schedule is always packed, and sometimes I have trouble managing everything.
Challenge
 One thing I tend to forget is birthdays and holidays, which means I often end up realizing too late that I should get get gifts for my friends and family. Gift card it is, I guess.
Needs
It’s important to me to show my loved ones that I care, even if it’s with a small token of appreciation. I need a simple and quick way to find appropriate gift options that won’t break the bank. Having a reliable system to remind me of upcoming dates and suggest affordable gifts would make a huge difference and help me stay on top of things.

These personas give us a better idea of where people’s heads might be at. Of course you can never know for sure, but creating a design with intent becomes more feasible once you know what kind of person you’re designing for.

Product blueprint

After the initial research phase, we begin applying our findings by mapping out the general direction of the product. With this new knowledge, we have a solid foundation for determining its core features, organizing those features, and structuring the information and functionalities within the product. In layman's terms, this is where we start planning.

Changes to the concept

Although educated guesses are better than nothing,  my assumptions about consumers’ wants and needs may not actually align with reality. Market research is crucial because everyone has biases. Through marketing research, wewere able to conclude that some aspects of Matchboxshould be pivoted into adifferent direction.

Increased emphasis on convenience

Market research offers valuable insights into general patterns of gift-giving, especially during the holiday season. One important finding is that gift cards are often chosen for their convenience. To capture the largest possible market, Matchbox must surpass gift cards in terms of convenience.

De-accentuate AI aspect

The original branding for Matchbox emphasized its AI capabilities, but as the general public increasingly develops a distrust of AI, it’s probably a good idea to retire that. To address this, we plan to have any algorithmic functionalities operate in the background, ensuring that the user experience feels as organic as possible.

Adding familiarity

Matchbox uses a digital stand-in for each gift recipient, trained by the user’s input. Users can refine a profile by adding certain traits upon creation, though this step is entirely optional. They can then use a Tinder-like interface to evaluate options from the recipient’s perspective, which will serve as the data Matchbox uses to suggest appropriate gifts.

Features

MVP features

'MVP' stands for minimum viable product. (It also means most valuable player, but that's not the definition usually being referred to in product design.) In simple terms, MVP refers to the features that are absolutely necessary for the app to function. In the case of Matchbox, those features are the following:

  • Recipient questionnaire: For the initial creation of a recipient profile
  • Swiping mechanic: For the user to judge potential gifts
  • Customizable notification system: To remind users of upcoming events or birthdays
  • Calendar: For the user to add events on which they plan to give somebody a gift
  • Invisible account mechanism: Convenience is king, and nobody likes the account creation process. Instead, each user is initially assigned an ‘invisible’ account. They can create a full-fledged account from the Settings menu if they want to, which allows them to use their account on multiple devices. 

Secondary features

Secondary features are subsidiary elements that are not required for a user to achieve the intended goals of a product, but that do enhance the product's user-friendliness or user experience. In product development cycles, these features are less important than the MVP features, and may be scrapped until a later version if time or resources run out. Our secondary features for Matchbox are:

  • Fail-safe: Sometimes, gift options may not align with the model’s perception of a certain recipient. To ensure the user has not made a mistake, we include a confirmation screen for gift options that seem to break any perceived patterns.
  • Gift filter: Allows the user to filter out novelty items such as perishables, gag gifts, or NSFW products.
  • Vendor filter: Enables users to exclude vendors they do not wish to buy from.

Nice-to-haves

A "nice-to-have" is a feature or element that enhances the overall user experience and adds value but is not essential for the core functionality or usability of a product. They are basically elements of which the absence isn't generally noticed, but their presence is.

  • Character creation: Helps users immerse themselves in the recipient's perspective more effectively.
  • In-app checkout flow: Seamlessly integrates the checkout experience, regardless of the third-party seller the app refers users to.

Information architecture

Information architecture is a term often used for where certain features and information are located within a product. To determine the initial information architecture, I conducted a card sorting session with five participants. Card sorting is an exercise in which a tester is asked to create logical groups from a set of cards containing keywords or features. It’s a simple yet effective method that can eliminate the user experience designer’s bias and ensure that the way information is structured makes sense to the average person. This process helps identify potential recurring components and optimizes the final implementation. The resulting architecture was designed to streamline the user experience.

This looks a lot better in fullscreen mode.

Wireframes

With a solid foundation for the information architecture in place, I moved on to wireframing. A wireframe is to design what a rough sketch is to an illustration: it provides a core structure that serves as the base on which the final design will be created. They help identify potential recurring components and set the stage for subsequent design phases. Additionally, wireframes can sometimes be used for user testing. However, for this project, I opted to conduct my initial prototype test runs with a high-fidelity prototype instead, which happens a bit further down the road.

Some of the initial wireframes created for Matchbox. Plenty of elements in these wireframes were either repurposed or did not make the cut to V1, but that's what creating a wireframe is for: To fail quickly and move on to a better solution.

A wireframe's size and fidelity depends on the requirements for the project. For example, a very polished wireframe can be useful in communicating with clients, but likely won't be necessary for in-house productions. The same goes for the level of detail in a wireframe: When working in bigger teams where person-to-person communication can become challenging, it pays off to include any nuance you can think of to avoid miscommunication, whereas a smaller team with a tighter feedback loop isn't likely to have a need for a highly extensive wireframe.

Visual design

With the app's general structure down and a good sense of who we're developing this product for, we can start to think about what the final product is going to look like. The practice of creating and arranging elements such as typography, color, imagery, and layout, is called visual design.

Core design principles

Core design principles are simply things we keep in mind while deciding on the product's visual design. If a particular design aspect clashes with any of our core principles, it's best practice to rethink that aspect.

  • Broad appeal: Matchbox's visual design has to appeal to a broad target audience and stay on-trend.
  • Gift-giving focus: The design should feel appropriate for an app centered around gift-giving.
  • Year-round versatility: The base brand should be versatile enough for year-round use.
  • Creative flexibility: Since Matchbox is not likely to be used intensively throughout the year, there is room to take some creative liberties with conventional UI design to create a more unique user experience.

Logo

Some logo drafts

The logo for Matchbox needed to be memorable, distinguishable, and suitable for use on phone screens at various sizes—ideally even as an app icon. To meet that requirement, I mainly explored all-caps options with enough visual accents to add spice up the otherwise minimalistic design.

The final logo is simple and geometric, featuring some curvy, friendly shapes. It upholds our core principle of being broadly accessible without compromising legibility. A lowercase 'a' was chosen to make the letter spacing appear more even, and the same base shape of this glyph was repurposed for the 'C' to create harmony and a visual throughline in the design. Overall, the logo is playful, clear, and well-suited to our use case.

Typography

Figtree font family

The Figtree font family is a great fit for Matchbox because it's easy to read at any size and offers variable font weights. Matchbox uses Medium, SemiBold, and Bold, with Medium serving as the standard weight for paragraphs and labels, while SemiBold and Bold are used for headings or elements requiring emphasis.

Color

These are the colors currently being used in the product designs. In the event of an expanded need for colors, such as the aforementioned nice-to-have character creation feature, we would need to assemble a palette of primitives (base colors without specific designation that can be used freely for visual assets).

Icons

Matchbox uses the MingCute icon set, chosen for its wide range of object-related icons, which are especially useful for an app focused on purchasing gifts. However, since some of the icons in the MingCute set can be hard to interpret due to their thickness, custom icons were created for prominent elements like the main menu and recurring controls.

The app's main menu shown at the bottom of the screen

Product design

UI/UX design

Ensuring a seamless user experience involves defining core flows. For Matchbox, I identified three central flows: onboarding, recipient profile creation, and the sales pipeline. While there are additional paths users may take, these three main flows are crucial in making or breaking the overall user experience.

Onboarding

Matchbox's onboarding experience is designed to be entirely  unobtrusive. All it initially requires from a user is their email address. The rest of the user’s profile is gradually built through micro-interactions and pop-ups. Users can create a full account after adding their first recipient if they want to, but it's not required for the app to function. Formal account creation can be initiated via the Settings screen and will also be prompted when the user attempts to log out.

Users can choose between a quick and an elaborate process when adding their first recipient.

Creating a recipient

Recipient creation is effectively split into two phases: the initial creation and the gift browsing phase. Aside from the name, none of the input fields in this section are mandatory; however, each piece of information a user chooses to provide contributes to a more refined and personalized selection of gifts. Users also have the option to start off quicker with a less in-depth profile, and make up for the lack of information by browsing a bit longer.

Matchbox's suggestions get increasingly accurate the more the user swipes.

Sales pipeline

Gift browsing is done through a swiping UI. Most of its basic functionalities are inspired by Tinder: Users can like, dislike, or skip a product. They can tap the card for more information, and a progress indicator displays Matchbox’s confidence in a particular product. All liked products move into the Top Picks tab, where users can tap a button to get redirected to a vendor's website.

Take a look at this clickable prototype showcasing the profile creation process!
The intuitive interface makes Matchbox easy to use for people of all ages.
The built-in calendar helps users keep track of events like birthdays, anniversaries, and holidays.

Second phase of research

User testing

There are numerous phases in which the functionality of an app can be tested: some designers choose to do this using wireframes, while others prefer a more high-fidelity prototype. Since visual design plays a significant role in Matchbox’s overall user experience, I chose to run tests with a fully designed prototype. My tests focused primarily on observing users’ navigation through the main flows and gauging the likelihood of conversion.

Key insights

  • Participants under 45 had no trouble completing the objectives. Some participants in older age groups had a little bit more difficulty, but were ultimately able to complete the tasks without any intervention.
  • Some users expressed a desire for additional filters.
  • Some participants suggested that Matchbox could be useful for finding purchases for themselves too.
  • One participant expressed interest in a version of the app with decreased motion effects.

UX/UI improvements

Catering to a less tech-savvy audience is important for Matchbox, so support was added throughout the product design. I used several forms of explainer elements for this, such as tooltips for buttons and the option to go through a guide when first downloading the app.

Additional filters are a consideration for a premium version of Matchbox.

Known challenges and potential solutions

The broader the target group, the more challenging it becomes to create a universally intuitive user interface. Mistakes will inevitably occur, but I aimed to mitigate most of them through the use of explainer elements. One non-invasive way to add clarity to the app is by prompting support-oriented pop-ups after a certain number of actions, or a period of inactivity. For example, if a user repeatedly navigates back and forth between screens for an extended time, a screen will appear asking if they want to retake the tour.

As long as misclicks or undesired actions do not become frustrating to the point of a user quitting the app, we should be in good shape.

Additional visual design

Reskins: To add another layer of polish to the app’s user experience, we reskin the app icon to match the closest holiday. This subtle change is likely to remind users that they have the app installed and alert them to upcoming holidays, potentially increasing conversion.

Potential reskins for holidays include Mother's Day, Father's Day, Valentine's Day, Sinterklaas, Christmas, and birthdays.

Character Creation: Early concepts included character creation for each recipient persona. This feature may help users better immerse themselves in the recipient’s perspective—and it’s also just fun. Customization is highly valued in interaction design.

Release and conclusion

Every project comes with its own unique sets of problems to solve, and each problem comes with a learning moment. In this section of the case study I'll be going over some of the aftermath of the project and what its takeaways are.

Marketing strategies

As this project is a mock case study, it will not actually be released. However, for demonstration purposes, we can explore some potential advertising strategies. In addition to traditional advertising like targeted ads, influencer marketing would be a great way to organically grow a user base. Some methods to go about that would be:

  • Targeting older demographics: Having users or popular group admins post about the app in Facebook groups around the holidays.
  • Influencer marketing: Leveraging Instagram and TikTok for younger demographics.
  • Professional outreach: Utilizing LinkedIn influencer marketing for professionals.
  • Referral program: Offering discount codes for referrals.

Post-launch support

In addition to requests for feedback being integrated throughout the user experience, users can also choose to leave feedback by navigating to the Settings menu. Additionally, they can request human support there as well.

Conclusion

Consistency vs. optimization

Matchbox’s UX design borrows from well-known UI patterns, but one size rarely fits all. Often, the perfect solution to a problem can be achieved by existing solutions for about 80%, but that remaining 20% may require some extra effort. The UI for Matchbox is mostly composed of recurring components, but some liberties were taken to improve the interface or the visual design of the product. Consistency is important, but so is a flexible approach.

A living timeline

Design stages often overlap; for example, wireframes often begin midway through the information architecture process. After establishing the brand identity, I revisited the wireframes with a clearer vision of typography and color. Viewing the product as one big picture instead of a series of consecutive processes helps contextualize the work, especially when working independently.

Would your product benefit from a design treatment like this?

Diving into new and exciting challenges is what keeps my job interesting. My hybrid approach of integrating marketing and user experience research into product design is especially useful for early-stage startups and software development firms. If that sounds interesting to you, please don’t hesitate to get in touch.

Piqued your interest? Let's talk!

Book a slot in my calendar and we’ll be in touch in a jiffy. How exciting!

Book a meeting
Go to contact page
ContactCookies & Privacy