app design


Make your sentiment smell great.
A UI case study on a create-your-own scented, handwritten card app to help people stay connected with a more personal, thoughtful touch.

UI/UX design
Adobe XD
6 weeks
* Working app name
Image and text placeholders were used in the prototype.
UI design
Adobe XD
6 weeks
* Working app name
Image and text placeholders were used in the prototype.
Design Over Fika logo that takes user to its homepage


Mark loves to cook up a feast for his family and friends. When that was not possible during Covid, he started sending DIY scented cards to them to stay connected on a personal, more meaningful level, and to remind them — visually, tactilely, and olfactorily — of their happy feasts in the past.

Mark wanted to digitalize this idea of personal communication via custom-made, handwritten scented cards with a mobile app, so that it would be as easy and convenient as possible. This will eliminate the possibility of forgetting to pick up cards while running errands, or stocking up on cards only to misplace them. It will also be safer for users (the card senders) to continue the tradition of sending cards while social distancing was encouraged.

Project Tasks

There were 2 main tasks:

  • Come up with a visual design direction for the brand and mobile app. A create-your-own-card mobile app idea was not a new one (as you shall find later in my research section). A challenge here was to create an original visual design direction, and demonstrate this through wireframes/ mockups and subsequently, the prototype.
  • Design an interactive iOS mobile prototype for the MVP: The prototype would have duo purpose. Firstly, it would allow Mark to validate his idea as quickly as possible. And secondly, it would give testers a sense of how they could interact with the real app.

UI Design Requirements

  • Define secondary brand colors to complement the primary brand colors of red and blue
  • Interface should look and feel light to use
  • Keep layout clean and simple, so it would be easy for users to understand, familiarize, and learn
research dive

UI Inspirations & Competitors

The first step was analyzing Postscent's competitors for UI design inspirations, and to identify the 'must-have' features (i.e. ones that users need, want or value) that the Postscent app should include.

Mark provided a shortlisted list of competitor apps that I based my research on. Here are some key findings from my research:
  • Handwriting function was important. Users enjoy the app when they can scribble their message. They felt that cards were less authentic and less personal with a typed message, losing part of the original delight in sending and receiving cards.
  • Card customization options needed structure. Users found it overwhelming, intimidating, and difficult to navigate around when the card customization options were displayed at once.
  • Postage date function helped users stay organized. Users found it "a nice feature" to help them plan ahead and stay on top of special occasions.
  • Zoom and rotate added ease in card creation process: Competitor apps that did not provide one or both of these functions led to user frustrations.
  • Ability to save messages for future use could provide user convenience. Users at times re-used messages on their cards, and expressed in their reviews the need of this function to avoid re-typing or re-writing the same message several times.


Mark and I combined our research to prioritize and finalize the app's features, which included:
  • Shop/ browse for a card design (to help user jumpstart their own design)
  • Upload, crop, and rotate image
  • Write or type the card message
  • Choose a scented paper to print on
  • Zoom and rotate the card design
  • Choose light or dark background during the card design process
  • Preview the final card design
  • Save typed or written messages for future use
  • Set postage date
  • Enter important people and dates to receive reminders
identifying user needs

Target Audience & User Persona

While people of all ages participate in the tradition of sending cards, Mark found that people tend to start sending cards - more specifically, holiday cards - when they hit a milestone in life, such as marriage or a first child. Millennials was the generation currently hitting those landmark events.

According to data from Hallmark:


millennials enjoy giving cards


millennials enjoy receiving them
The target audience for this app was therefore the millennials.

Target Audience

Mark provided a rough description of this millennial audience:
  • Age: 25-40
  • Gender: Any
  • Tech savy enough to use an app

    User Persona

    To clarify user's motivations, frustrations, needs, and goals, I created a user persona.

    Say hello to Julia.
    Postscent's user persona


    • Wants to make personal correspondence more meaningful and lasting (as opposed to using social-media, which can be tiring and feel more of a transitory connection).
    • Likes to stay organized and plan ahead with sending cards for special occasions.
    • Considers receiving cards as a novelty, and therefore a thing of delight.


    • Unable and unwilling to shop for cards in-store due to pandemic's restrictions.
    • Feels that shopping for a card is time consuming.
    • Struggles to finding the right card that matches her design taste.
    • Often forgets to pick up a card when she needs one and to mail it off.


    • Wants to stay connected, and to convey her wishes and feelings with a personal touch.
    • Wants to design cards that reflect her creative taste and flair.

    mindset & personality

    • Outgoing and confident
    • Creative and spontaneous
    • Caring
    • Passionate


    • Something easy to use, so she can quickly create and send cards out at the last minute; easy to reach for as an app/ on the phone when she needs it; available whenever she needs to send a card without needing to visit a store during its opening hours.
    aesthetic exploration

    The Gut Test

    To get a direction on the visual design, a gut test was conducted to find out Mark's aesthetic preferences.

    A series of varying visual design were presented to gauge his reaction. He was asked to pay attention to the visual aspects of each design, such as color, shapes, icons, typefaces, and general composition, and to rate each design on a scale of 1 (do not like) to 5 (love) based on how much the image aligned with his vision. We then averaged the scores and asked more in-depth questions on high and low scores to help gain more insight into our possible design directions.

    Here are some key findings from the gut test.


    • Bright colored backgrounds
    • Use of gradients and shadows
    • Vibrant colors against white background
    • Round edges for images and buttons
    • Clean layout with some visual depth


    • Too much meaningless visual elements
    • Designs that are too flat, too hard-looking, or too comic
    • Dark themes
    moodboards & style tiles

    Selected Visual Directions

    After gaining an understanding of the visual styles that resonated with Mark and the reasons why, I created a few mood boards and style tiles. Mark selected the following visual directions as his favorites.

    Retro Direction

    The retro moodboard conveyed travel, history, culture and nostalgia.
    Retro style tile
    visual language
    Geometrically derived, slightly rounded corners, patterns.
    Structured, neat.
    Dynamic, quirky.
    Vivid, retro-feel.
    Straightforward, traditionally styled, geometric-based.
    Abril Fatface for headings, Abril Display Bold for subheadings, and Montserrat Regular for body copy.
    Slightly rounded corners, simple.

    Creativity and Connection Direction

    The creativity and connection mood board was about relationship, community, positivity, as well as creative exploration and experimentation. So styles can contrast to make a playful expression.
    Final mood board
    Final style tile
    visual language
    Vary - can be geometric, organic or free form, soft drop shadows.
    Open, free, clear.
    Smooth, light, inviting.
    Cerulean with Chilli Pepper Red, with Cruise Cyan, Luminous Yellow and Aquanaut Blue as secondary brand colors. Can be solid or gradient.
    Clean, modern, minimalist, rounded, lightweight and playful appearance.
    Playfair Display for headings, Circular Bold for subheadings, and Circular Std Book for body copy.
    Fully rounded, gradient-filled and soft drop shadow for primary buttons to enhance visual appeal and to create visual depth; solid-filled for secondary buttons.
    Mark chose the Creativity and Connection direction in the end, because he thought it was important to make the app and the brand bright, fresh, and fun — all of which the combination of Cruise Cyan and Luminous Yellow help bring out.
    brand essentials

    Logo & Style Guide


    Postscent did not have an official logo ready, so I created a working logo that can be used towards the prototype.

    My inspiration for the graphic component came from the wavy lines that accompany a postmark. The graphic was subsequently adapted to also visualize the wafting of a smell or scent.

    For the text component, I juxtaposed a typed text element ('post') with a handwritten text element ('scent'). The Playfair Display font was used for the typed text element, because of its sense of playfulness that mimick the styling of ink pens. For the handwritten text element, I crafted a new font to enhance the organic feel of the logo.

    The brand name was italicized for emphasis, and to imply playfulness, energy, and movement (unlike normal/upright letterforms, which suggest a stagnant or stationary state).

    Black was used for text color to give the logo sophistication and a modern feel, and to make the brand name instantly visible.

    Style Guide

    While a style guide was not a project deliverable, I created one in parallel with the wireframes to help reinforce Postscent's design language consistently and accurately.

    The style guide was updated as a living document.

    I chose cyan and yellow as background colors (along with white and grey), since using them as font colors will result in an accessibility issue (insufficient contrast) with light colored backgrounds.

    Here is Postscent’s working style guide.
    Final style guide
    screens & uX changes

    Wireframes & UX Considerations

    Wireframes & UX Considerations

    The prototype needed to, without going overboard, highlight what the app would offer and what could be done within the app. So it was important to decide on the key screens to focus on.

    Since the purpose of the app was about creating and sending cards, the processes of creating-your-own-card, submitting sender and recipient information, and making payment were crucial flows for the prototype. Additionally, areas of the app that users will most likely visit frequently using the tab bar i.e. Home and Designs will also be focused areas.
    Some of Postscent's original wireframes in grey scale. There are 5 screens, from left to right: Login screen, Home screen, Designs screen, Create screen, Shopping Cart screen.
The original tab bar is below the screens, with 5 sections: Home, Designs, Create, Account and Cart
    Some of Postscent's original wireframes
    The wireframes evolved as UX considerations were taken into account.

    Here are some of the UX considerations.
    dynamic tab bar
    The tab bar would slide downwards and hide itself when the user scrolls down, and slide up and unhide itself when user scrolls up. This provides more vertical space while scrolling.

    The tab bar is hidden on screens with very specific actions (such as checking out the shopping cart, or during the sign-in and payment processes, and in Create mode. This minimizes overloading the user with too many actions.
    grouped card customization options
    There are 10  steps to create a card. These steps will be grouped into 3 parts for easier navigation  for users to complete their design.

    Part 1. The canvas: This comprises of grid, layout, and card type options to help form the base.
    Part 2. The content: This is where users get creative and add their design.
    Part 3. The final touches: Corners, border, scent paper
    accordion menu with auto collapse sections
    In Create Mode, the accordion menu will have one section open at a time. Once a user tapped on an option, the accordion menu automatically collapses and opens the next section. This keeps the various options organized in a space-efficient format without overwhelming the user.
    floating CTA buttons
    In certain areas of the app, a floating CTA button will be used at the bottom of the screen. User can take action whenever they are ready without the need to always scroll to the bottom of the content.
    card-based design on shopping cart screen
    The original shopping cart screen was a good start. But when multiple cards are added to the cart, the user needs to be put more effort in navigation as all the content get lost in the layout.

    An improvement on this is to utilize the card-based framework to separate and organize the content. Card thumbnails and drop shadows will help create distinction between the cards to enhance the usability of the interface.
    wcag aa conformance for accessibility
    WCAG standards were followed to guide design decisions. Text used in the wireframes and prototype met the AA requirement, making them accessible for most users.
    Why did I choose to meet the AA
    (instead of AAA) requirement?
    An orange down arrow to show explanation on why I choose to meet the AA requirement, instead of the AAA requirement.

    Prototype Screenshots

    Some prototype screenshots
    final words

    & Future Considerations

    This was a fun project to let my creativity run loose! I had the full flexibility to explore with colors and shapes, play around with possibilities, while staying true to visual simplicity and aesthetics.

    Fun aside, there were things I learnt along the way.

    Avoid having too many possibilities.
    As this could lead to an endless search. Looking at other existing designs and finding UI features that users like and are familiar with helped create more accessible and visual appealing designs, and sped up the process of selecting the final visual direction.

    Focus on the bigger picture, the MVP.
    Mark detailed lots of features and long term goals, so initially the project scope was much wider. The challenge for us was to get rid of the urge to incorporate the “nice-to-have’s” and focus on the “must-have's” that align with the major business goals. The “nice-to-have’s” could definitely improve the user experience, but were unnecessary for a prototype for the MVP.
    Sticking to just the “must-have’s” will keep the scope manageable and keep it focused on the bigger picture (the MVP). Don't get bogged down in the details.

    Establish clear channels of communication.
    Working remotely in different time zones can be challenging. As Mark and I had different working hours, the meetings were time-bound, making it difficult to brainstorm and discuss every issue or answer every question. What we agreed on from the get-go that worked really well was establishing clear channels to communicate to one another. Comments that could be pointed out directly from the design were done within Adobe XD’s commenting platform. This kept design feedback and reviews centralized and streamlined. For issues that required long elaboration, we used email. And for the regular check-ins and brief updates, we used Slack.

    Just dive in and start.
    Sometimes, it’s difficult to know where to start, where you’re immersed in the documents and information you are provided with. I learnt that the best way to move past (or forward from) this is to just...start. Start working on it, however and whatever step that may be. Eventually, the pieces will start connecting and the idea taking its shape.

    For future considerations, I would like to:
    • Flush out other areas of the app. The project focused on showing the flexibility and ease of creating and sending cards, and making payment. Having other areas of the app designed will help bring a fuller testing experience.
    • Explore other user flows of the payment process.
    • Design a dark theme. Since dark mode is becoming a norm for any mobile app, designing a dark theme of the app will present new, exciting challenges to learn from.
    next Project  |  


    Get the best beats.
    Transformation of a client's concept into high-fidelity mockups, from creating structure and design blueprint, to refining and improving mockups.
    Previous Project  |  

    Next Episode

    Never miss an episode again.
    An exploration on design opportunities to improve the user experience of a popular TV show tracking app.