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.

Features

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:

72

millennials enjoy giving cards

82

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

motivations

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.

Frustrations

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.

goals

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

needs

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.

Likes

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

Dislikes

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

Shapes:

Geometrically derived, slightly rounded corners, patterns.

Space:

Structured, neat.

Movement:

Dynamic, quirky.

Colors:

Vivid, retro-feel.

style

ICONS:

Straightforward, traditionally styled, geometric-based.

Typeface:

Abril Fatface for headings, Abril Display Bold for subheadings, and Montserrat Regular for body copy.

Buttons:

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

shapes:

Vary - can be geometric, organic or free form, soft drop shadows.

Space:

Open, free, clear.

movement:

Smooth, light, inviting.

Colors:

Cerulean with Chilli Pepper Red, with Cruise Cyan, Luminous Yellow and Aquanaut Blue as secondary brand colors. Can be solid or gradient.

style

Icons:

Clean, modern, minimalist, rounded, lightweight and playful appearance.

Typeface:

Playfair Display for headings, Circular Bold for subheadings, and Circular Std Book for body copy.

Buttons:

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

Logo

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

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

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.

Why did I choose to meet the AA
(instead of AAA) requirement?

Prototype Screenshots

Some prototype screenshots

final words

Learnings
& 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.

Postscent*

Introduction

Project Tasks

UI Design Requirements

UI Inspirations & Competitors

Features

Target Audience & User Persona

72

82

Target Audience