App Dylan










Does including branding in the UX workflow to make the process leaner?



💁🏻‍♂️ Overview

Project Title:
Dylan - App Design

Brief
Adrian approached me with an insight he wanted a usable digital solution to: "Why are we collecting paper receipts to claim business expenses, when everybody is paying digitally with WeChat Pay and AliPay [in China] ?"

Constraints
6 weeks, 0 budget

Users
In their early 20s trying to gain financial confidence so that they can support their ambitions

Goals
Developing an insight into a product, learning user research methods, exploring how branding fits into the UX workflow, working with a client on a UX project

Context
Developed under the mentorship of Jason Early, whose past clients include Google and NASA


💭 What is lean UX?

There are many definitions, but I resonate most with this - lean UX is when you are able to minimize waste. Waste is anything that is not used in the deliverable.


🚋 Background

In order to reduce waste, people often save branding and visual designing for last. During the making of Dylan, I explored whether including branding in the UX workflow actually make the process leaner. This question came to me in the Summer of 2018, having just finished my internship at a branding firm in Hong Kong. During the time I was there, I contributed to the art direction of Fortune 1000 firm campaigns, branding proposals of startups, Nikon’s instagram campaign, among others. Hoping to be more involved in the validation and development of ideas, I pursued UX by joining General Assembly’s 6-week Design Circuit. I was fortunate to be guided by Jason Early, whose past clients include Nasa and Google.


🤸🏻Critical assumptions

  1. This project assumes that the design team has branding capabilities.
  2. Because of time limitations, I only explored the benefits of one project that incorporates branding earlier. The comparison is how this project would have gone, if branding is considered after the UX process.

❗ Framework

Process: The black shows the original UX process I was presented with, while the red shows the additions I have made.

2. Interviews: first stage of the discovery process
3. Problem Statement: honing in on the results of the the discovery process
5. Brand Audit: looking at similar brands, executed after the competitive analysis
6. Brand persona: creating the brand persona, with an illustrated portrait of Dylan, the persona
7. Storyboard Q: illustrated storyboard and icons
7. Storyboard A: illustrated icons to demonstrate overarching user journey

⚠️ Observation 1

After I finished the project, I realized that everything besides 7. Storyboard A was recycled, meaning that everything was repurposed and used in the final output. Illustrated storyboards, personas, and icons are particularly easy to reuse because of how relevant they are to the final product. Here are some things to consider

For

  1. High level storyboards are unlikely to change
  2. It takes about the same time to look for specific stock images
  3. Drawings can still be used for pitch decks/ websites/ other products
  4. It helps the client visualize the output
  5. There is quite a lot of styling options even if the linework is complete (see 13. Art Style Study)

Against

  1. If the app is photo-based, illustrations might not be useful.
  2. This increases the investment into product development - what if the project gets axed after user testing the wireframes?
  3. Depending on how the project is funded, there may be more urgent deliverables that are necessary

8. Adding Value: Realizing that problem - solution - value are different parts that need addressing. A solution needs to be applied in order to add value.
9. Feature list: An impact/ effort chart
10. Sitemap: Brainstorming the features necessary to support the solutions identified. Solutions elaborated in slides below.
11a. Development: User flows, wireframes, and post-interview notes on wireframes

📝 Observation 2: Branded elements help visualize more complex ideas

The final visual design is so important when ideas become increasingly complex. Simply put, wireframing does not necessarily translate to compelling visual design. Diagrams in 12a. Diagram Study are interesting as wireframes, but is not something I can imagine the final product to look like. This is a good example of when UX and UI demands inform each other’s decisions.

For

  1. Beginning branding earlier helps ease the transition into UI, as UI cannot begin until there is at least a vague branding direction. As mentioned in 6. Brand Persona, we wanted the app to be “your encouraging friend” who will inspire you to achieve your financial goals. While we were happy with the draft styling option in 12b. Diagram Study, I presented several alternatives to the client for reference after this was approved.
  2. It also means that if split among larger teams of designers, branding and the discovery process can run concurrent with each other. This speeds up the development process, if the client has the right budget
  3. Clients are unlikely to user test ideas with poor visual design

Against

  1. The icons are in fact quite flexible (see 13. Art Style Study). Styles ranging from cartoon to material design. Nevertheless, if the client requests a different set of icons entirely, then the past branding work will have to be completed again.

12a. Diagram Study: Brainstoryming ways to represent information
12b. Diagram Study - After Interviews: Responding to interviews and refining the brief for the diagram
13. Art Style Study: A closer look at the potential visual directions. This slide gives a overall sense of what directions are possible. Differences are more pronounced in the complete branding proposal with references for each direction

🎤 Observation 3: The final branding guide is developed according to the app design

Product design branding was not within the scope of my previous internship, and so I was unfamiliar with the practicalities of putting a app branding guideline together. It surprised me how, unlike branding traditional media, you can specify margins, grids, and item sizes for appications in order to provide a stronger brand presences

For

  1. This reinforces the idea that branding should be considered in tandem with the UX. Unless the final product is based purely on graphics found in libraries. You will ultimately have to deal with branded assets.
  2. Towards the end of the project, the client actually agreed to use the persona as the logo, with Dylan as the app name, further reducing waste. It is congruent with the branding idea of “your encouraging friend”, and so the decision felt justified.

Against

  1. -

✏️ Conclusion: Yes, leaner, but consider (faster + cheaper) vs. (managed risk)

While incorporating branding into the UX process makes the overall workflow faster and cheaper, the client has to take on additional risk. More work has to be completed before main UX milestones are reached, and so it will ultimately depend on the client’s priorities whether or not branding should be included in the UX workflow.


Final App Design

Bringing financial confidence to users by helping users understand their finances. With the app, users can

  1. Check transactions from accounts
  2. Track their overall spending
  3. Begin financial planning by customizing their goals.

Accounts
Select, Link, Authorize
Balance
Pay, Group, Review
Goals
Add, Consider, Save










About me


Hi, thank you for visiting! I am Marvin, a UX designer from Parsons School of Design.

I believe in Product development - because I love making things, the business value of design - because the things I build should have an impact, and data - because there needs to be a way to evaluate the impact. To pursue the direction, I am partaking in “Applications of Digital Analytics and Product Management Strategies in UX Processes”, a 5 week workshop (Nov-Dec) privately organized by Daniel James, who previously held positions at BCG (Consultant), Goldman Sachs (Analyst), and Capital One Labs (Director of Product Management). Using analytics to drive UX processes, and focuing on metric interpretation helped quantify the impact of design immensely.

In my last three years as a college student, I spent a lot of time exploring different fields, honing my design capabilities along the way. I learnt to manage semester-long projects (HKU Architecture 2016-2018) - to handle photography professionally (New York Fashion Week 2018 F/W Workshop) - the conventions of branding (Constant, Creative Intern Summer 2018) - as well as the fundamentals of UX (General Assembly UX Design Circuit Summer 2018). My major in illustration at Parsons School of Design supports my experimentation in visual communication.

Get in touch, or see CV