Design Process + Case Study

It is very important to have a design process, it helps to set clear expectations; it allows us to establish realistic project deliverables. Design process should be flexible so it can fit for different projects and clients.

DESIGN PROCESS FRAMEWORK

Have clear user goals of the product before using any creative tool. Understanding end user needs, better user experience. The outcome is how end users are going to benefit from it.

(1) EXPLORATION / RESEARCH

The goal of the exploration is to collect information at an early stage of the project process.

(2) FOCUS ON RESEARCH FINDINGS

(3) INVESTIGATING OPTIONS

(4) DEFINE INTERFACE, INTERACTIONS AND USER FLOW

- Sketching, whiteboarding sessions

- Wireframes

(5) VISUAL DESIGN

- Conceptual design (rough mock ups)

- Set up visual tone of voice

- Finalized visual

(6) USABILITY ANALYSIS

- Prototype

- Usability testing

(7) PRODUCTION DESIGN

(8) REVIEWS

(9) DELIVER

(10) REVISING AND IMPROVING

WRAP SOLUTIONS

about

Wrap is pre-packaged templates, a mobile app-like experience for commerce, digital companions, lead gen forms, or branded content in a few easy steps.

RESPONSIBILITIES: Art direction / review check points / design

TEAM: Partner with WORLD DESIGN Agency (4 designers)

Goals

(1) Creating user friendly easy to use wrap solutions

Authoring / template tool:

Easily create, design, write, and send without having to start from scratch.

(2) Widget Components

Weather, sound, video, location-nearby, click to call, chat, calendar, review feedback and rating, download PDF, subscribe contact form...

(3) Personalization

Creating wrap with customized data, from an existing authored wrap. (name, references prior behavior, dynamic call-to-action, follow up email thanking the customer for converting and makes recommendations for next actions...) 

How/Why

Benefits of personalized content:

(1) Increases conversions / easier conversion

• One-click purchases, by remembering their behavior, preferences, and information

(2) Builds a passionate audience

• Viewers usually are pretty specific about what exactly they love or what looking for

(3) Improves lead nurturing (the process of developing relationships with buyers at every stage of the sales funnel and buyer’s journey)

• Personalize content to each person’s interests and behavior

(4) Welcomes newcomers

• Showing new viewers information relevant to their interests or needs. It could be the first offer they convert on, the campaign that drove their response, or even the pages they visited on your website

(4) Detailed Analytics

Engagement metrics:

Beyond the impressions and click-through rates of standard ads, engagement metrics can offer a clearer picture of audience engagement. 

The tracking capabilities to measure when, where and for how long someone interacts with an ad. 

The better engagement rate, the higher lifetime value translates into greater customer retention

Data / Monitoring ad campaign / Measurable results:

Providing data and campaign results with easily understood format of how each creative element in a campaign is performing so can craft a more effective marketing strategy and give better directions.

Wrap analytics monitoring tool with break down of each cards; total views, CTA clicks, CTR rates, bounce rates, avg. time in wrap.

DESIGN CHALLENGES

(1) Prioritizing the contents for mobile use

• How and Why: 

  • Understanding mobile moments user behavior

(2) Maximizing CTA placement with clear purpose

• How and Why: 

  • Q1 - What do I want a subscriber to do?

  • Q2 - How will they know what to do?

  • Q3 - Why should they do it?

  • Think about - the language and the design. (create a sense of urgency)

  • Think about - CTA size and placement.

(3) Creating App-look layout with elegant, clean design and strong marketing content

• How and Why: 

  • Design principles - Symmetry, hierarchy, rhythm, simplicity, modular Design, readability, scale, texture, color, whitespace...

(4) Maximizing all usage of components in wrap solutions

• How and Why: 

  • Weather, sound, video, location-nearby, click to call, chat, calendar, review feedback and rating, download PDF, subscribe contact form...

(5) Creating parallax animation transition with purpose

• How and Why: 

  • Elegant movement to draw attention and focus

  • Example - JW Marriott, a luxury hotel and resort

(6) Wrap cover card optimization

• How and Why: 

  • To increase click through rate

  • A/B testing for cover/pre-loading card UI

(7) Data-driven creative strategies

• How and Why: 

  • Improving campaign by iterating design layout based on analysis of data to ensure the best possible campaign outputs

  • Study Wrap insight data

Wrap design showcases:

http://www.meiyeh.ink/

TEMPLATES

Template structure; we started with single wrap with 1 story arc. In this particular case, we had limited space to cover all different user cases. 

Afterwards, we used a traditional marketing funnel concept to showcase different stages of the campaign. I will use the Equinox sales pitch as an example. * All images are copyright by Equinox.

Here are the 6 steps of the campaign wraps:

(1) Awareness (2) Discovery (3) Consideration (4) Conversion (5) Customer Service (6) Retention

Under Wrap authoring environment we have 11 categories:

My templates, commerce, lead generation, landing pages, events, digital companion, real estate, content publishing, business publishing, sales enablement and other

PHASE 1:

- Creating template with different fonts, mood, styles, different user cases

CHALLENGES:

• Limited wrap space to cover all different user cases

• Need to create too many wraps to cover all styles and user cases

• High overhead cost

• Long project timeline

• Template categories

PHASE 2:

- Creating templates with marketing funnel user cases, using selected fonts, mood and styles.

BENEFITS:

• Story Arc (storytelling) of each wrap is more focus and effective

• Lower overhead cost

• Shorter project timeline

CHALLENGES:

• Meet the v1 template solution release deadline

• Template categories

PHASE 3:

- Creating template follow with Marketing funnel user cases, using few font styles, but all focusing on modern look and feel.

BENEFITS:

• Launched v1 template solution release on time

• Low overhead cost

CHALLENGES:

• Less selections of visual styles for user

• Template categories

Example of Awareness Wrap.

Here we are focus on the brand background and high level information about the brand to get user interested.

Example of Discovery Wrap. We added more details on all classes and CHAT widget.

View this wrap