3. User Experience

Written By Editors Unbuilt Labs

by Marvin Cheung, Head of Research and Strategy

About the Best Practice Series

We advise a wide range of clients at the Venture Strategy Group from first time entrepreneurs to Fortune 500 Executives. The Best Practice Series establishes a clear bottom line on ambiguous topics to help busy professionals acquire a more holistic understanding of technology. There is enough material for a semester-long course in each of the course books, but you can also skim through it in a few hours and gain a high level idea of the topic. Wherever possible, we have referenced sources in the public domain to make the experience accessible to a wider audience. Feel free to sign up for an advising session if you want to explore a topic further.

Schedule a Free Introductory Advising Session

An Introduction to User Experience

“Websites and Web applications have become progressively more complex as our industry’s technologies and methodologies advance. What used to be a one-way static medium has evolved into a very rich and interactive experience.

“But regardless of how much has changed in the production process, a website’s success still hinges on just one thing: how users perceive it. ‘Does this website give me value? Is it easy to use? Is it pleasant to use?’ These are the questions that run through the minds of visitors as they interact with our products, and they form the basis of their decisions on whether to become regular users” - Jacob Gube

Creating a desirable product for users is key to product-market-fit. In this Coursebook, we will show you how to systematically approach User Experience and Design. We will give you a no-nonsense perspective and answer questions like: How much UX Design do I really need? What are the UX benchmarks for organizations of different maturity? How do you analyze an interface?

Recommended reading:

Content:

  1. How much UX do I really need?

  2. What is the absolute minimum UX standard I should adhere to?

  3. What are the UX benchmarks for organizations of different maturity?

  4. The Atomic Design Methodology: UX Design in an Ideal World

  5. Setting a UX Design Brief

  6. Know the field: Competitive Analysis, Mobile-first Approach, Information Architecture, and Jobs to be Done

  7. Zero-based Thinking: User Stories, Storyboarding, Wireframing, Paper Prototyping

  8. Digital Mockups: Design Patterns, Accessibility, Responsive Design, Visual Design, UI

  9. Other useful links

1. “How much UX Design do I really need?”

This is one of the questions we receive the most. UX Design practices will vary between geographies, organizations, and even within organizations. There are several contextual questions you should ask when you are determining your UX strategy or when you are trying to place UX in the overall value chain:

  1. Are you in a saturated market?

  2. Are you working with enterprise or consumer products?

  3. Are you in a mature or nascent tech ecosystem?

  4. How price sensitive are your customers? 

Unfortunately, spending $100 on UX does not translate directly into 100 UX points. Some UX initiatives eg. discussing new user insights during weekly all-hands meetings, can be easy and effective. Sarah Berchild talks more in depth about some of the small things that can help deliver a strong UX impact in her article “It starts with you”.

“Benefits of UX by role:

  • Product Owner/ Manager
    Benefit: UX can help a Product Owner by providing insight into user’s needs.

  • Front End Developer
    Benefit: UX can help by working closely to make sure ideas are feasible to build.

  • Finance
    Benefit: UX can help by measuring outcomes that affect the business.

  • Operations
    Benefit: UX can help by making products easier to use and streamlining processes.

  • Legal
    Benefit: UX can help by keeping customers informed without overwhelming them with information.

  • Sales
    Benefit: UX can help by increasing revenue for user-centric products.” 

- Sarah Berchild

Recommended reading:


2. “What is the absolute minimum UX standard I should adhere to?”

Whether you are at a startup or a Fortune 500, you can find yourself needing to meet tight resource constraints. This is when we receive questions like “what is the absolute minimum UX standard I should adhere to?” There is no one-size-fit-all answer, but these are the questions you should be asking:

  1. Does the design comply with all relevant regulations? 

  2. What immediate impact might the new release have if things go wrong? Is the interface usable? Might customers misunderstand the interface in any way? Might customers pay for the wrong product? 

  3. What long-term impact might the new release have? What are the customer support issues it might create? Might it damage your organization’s reputation? Are you creating long term product problems down the road?

  4. What is the absolute worst case scenario? How might you limit your risks?

Recommended reading:


3. “What are the UX benchmarks for organizations of different maturity?”

While it takes a long time for big corporations to incorporate UX fully into their decision-making processes, new ventures would have a much easier time finding Product-Market Fit if they incorporate UX best practices from Day 1. 

Realistically, even strong UX Designers at a startup will be limited by time, budget, and resources. We have several benchmarks that take resource constraints into account to help you determine whether your venture is ahead of or behind the curve. Bear in mind that being ahead ie. confirming something before you have enough data to support a decision, can cause problems down the road as well. 

  • Pre-MVP: Once you have a vision, you should have a few brand assets, such as a pixel-perfect logo and a name. Logos and names are the most difficult to change, so you want to try to get this right. You can also make some basic branding decisions such as whether you want to go with a white or dark theme, what colors to use (ideally two to three), and what fonts you want to use. Generally, we recommend picking a header font from Google Fonts, since it has the most third-party support, and a body font from the list of Web Safe Fonts for page speed, legibility, and general ease of use. 

  • MVP: When you are making quick iterations, there is nothing wrong with using User Interface (UI) packs and templates. You can also use no-code solutions eg. Wix or Squarespace to test landing pages and ideas. We recommend wireframing and rapid prototyping to test out as many ideas as you can before committing anything to code. The platform you use will pose certain design constraints so there are times when you will have to be creative with how you translate your mockup into the final interface. You should also begin to think about quantitative user research at this point.

  • Pre-Scale Up: Before you make a big marketing push, you want to clean up your design. Some startups, often ones led by entrepreneurs without a design background, will opt for a rebrand at this stage as users in the early majority category tend to have certain product and design expectations. By cleaning up design quirks and optimizing the user flow, you will have a more efficient marketing funnel as well. This translates to cost savings.

  • Scale Up and beyond: You should have a coherent design system at this stage with reusable components. Especially for consumer products with a wide user base, small design changes can have a large impact on revenue. Scale Ups and beyond tend to focus on interaction design and microinteractions. Some organizations go further and employ a corporate nudging team that will use behavioural sciences to promote certain behaviours, though the ethics of such is contested. 

Recommended readings:


4. The Atomic Design Methodology: UX Design in an ideal world

Before diving into the details of UX Design and UX Research, we want to have a high level understanding of how the disparate components come together to make up an interface. Brad Frost’s Atomic Design Methodology provides a fantastic overview. 

According to the framework, you can break a product down into pages, templates, organisms, molecules, and atoms. An atom can be a text field, a button, an image, a logo etc. After designing the atoms, you can put them together into molecules. For example, a search bar consisting of a text field, a search icon, and the search button can be considered one molecule. Multiple molecules form an organism, like a navigation bar, and multiple organisms form a page template. Fill in all of the placeholders and you have a page! 

Does it sound too good to be true? Because it is. While it is not a bad framework by any means - this is especially useful for UX audits or case interviews, the actual UX process when you work in-house will be a lot messier. There are many reasons why that will be, to name a few:

  1. You may change the functionality of the product at any point in the design process especially if you are in the process of building an MVP.

  2. You may decide to change your tech stack and the new platforms you use may have different design limitations.

  3. You may run out of time and need to short circuit the process.

  4. You may and should prioritize certain components of your product over others. There is no reason to design the full interface before user testing. 

However, the Atomic Design Methodology is still a framework we recommend, because it helps you think about interfaces in a modular way. Just remember:

  1. If you follow the Atomic Design Methodology, you will be creating a design system. Most organizations might not have the budget, time, or expertise to put it together, nor do you need to. You can opt for an open source UI library instead.

  2. There is no reason to follow a framework to a tee. Do what works for your team!

Recommended reading: Frost, Brad. “Atomic Design Methodology”. AtomicDesign.BradFrost.com, 2016. https://atomicdesign.bradfrost.com/chapter-2/ 


5. Setting a UX Design brief

Design is an iterative, hypothesis-driven process. Through preliminary research, you want to narrow down the set of hypotheses you want to test. The first step is to understand the problem space. There are several things you can do, for example:

  • Read through articles from online sources, eg. Google Search, Quora, other discussion forums. What questions are people asking?

  • Read through articles from academic sources, eg. on JSTOR. Has the problem been well researched?

  • Go through social media, eg. meme pages. What is the worst part of people’s experience of a particular problem?

  • Talk to friends in different industries. Might the solution be applicable to an unexpected target audience? What are some of the early thoughts?

By assigning different weights to different sources, you should arrive at a set of problem statements. Geunbae Lee’s article “Designer’s indispensable skill: the ability to write and present a solid problem statement” elaborates on what a problem statement should look like. Amy Ko’s article “How to understand problems” discusses some of the more technical qualitative user research methods, including user interviews, that can help you set a UX Design brief. People working with existing products will most likely have to work with quantitative user research as well. We will elaborate on user research methodologies in UX Research 101. 

Nevertheless, there are two guiding questions behind all UX briefs:

  1. What do we know to be true? 

  2. What hypothesis do we want to test? More specifically, what is the most critical hypothesis we need to test?

There are generally two entry points to a UX Design project. They have corresponding hypotheses:

  1. There is a new product, and you have to test the product vision ie. “Do people want the solution we are offering?”

  2. There is an existing product, and you want to figure out “How can we serve User Group X better?”

Practically speaking, a UX brief should have these components:

  1. Problem statement: What is the problem you are trying to solve?

  2. Goal: What are you optimizing for? Eg. engagement, transactions 

  3. Users: Who will use the product? (We will elaborate on Jobs to be Done in the next section)

  4. Stakeholders: Who needs to sign off on the project? Does any regulatory body need to be involved? 

  5. Constraints: How might we anticipate and navigate around different limitations?

Throughout the project, you will find yourself refining and iterating on the brief, maybe even scrap it altogether and start a new brief based on the information you discover. That is entirely okay! The goal here is to do as little work as possible to test as many different assumptions as you can. Make sure to keep a log of everything you learn along the way, and all the assumptions you did not manage to test. This list will be invaluable as you continue to develop the product.

As an aside, the main criticism of many spec (speculative) projects in design portfolios is that they do not do enough to reflect the real world challenges of creating a product. Here we want to acknowledge some of the questions that need to be asked beyond “Do people want our product?” but are not within the scope of this course book. Innovation by Design: MVP 101, Product Management 101 will be released soon.

  1. Will anybody be willing to pay for what we are offering? 

  2. Will they pay enough to maintain the quality of the new offering?

  3. Will the new product or feature fit into the overall business?

  4. Will it cannibalize the sales of an existing offering?

  5. Will it encourage nefarious activities in any way?

  6. Will it be compatible with the company mission? 

  7. Will it require expertise that will be very difficult to hire for?

  8. Will the additional work be fulfilling to the team in the long term?

Recommended readings:


6. Know the field: Competitive Analysis, Mobile-first Approach, Information Architecture, and Jobs to be Done

Before putting pen to paper, you want to conduct a little more research. At the heart of the competitive analysis is the question “What is everybody doing?”:

  • What are the solutions being offered?

  • How are people solving the problem currently?

  • Are people happy with the current solution?

While doing a feature list of competitors’ products can be simple, successfully reverse engineering the conditions from which design decisions are made require experience. Especially if you are developing a new product with no quantitative data available, being able to guess why certain design decisions were made can be incredibly helpful. 

Here, much like with Art or Literature, you would assume that the creators of the product have made decisions deliberately and based on quality data. We recommend taking a mobile-first approach towards designing: to design for the smallest screen size first. Some of the questions you want to ask:

  • Why did they opt for a particular wording?

  • Why is the Call to Action (CTA) where it is?

  • Which group of users are they prioritizing?

  • What are the Jobs to be Done?

An information audit and an accompanying user flow will be helpful here:

  • Can you account for all of the content on the page?

  • What steps are being taken to arrive at the solution?

The readings below give a good overview of the tools available to complete this task. Google’s “Basics of UX” in particular will help make sense of this step. 

Recommending readings:


7. Zero-based Thinking: User Stories, Storyboarding, Wireframing, Paper Prototyping

Zero-based thinking is when you start fresh: if you can start over, what would you do instead? Miniscule improvements upon competitor’s products will only get you so far. Maybe there is a radically different approach towards solving the problem. 

This is when user stories, storyboarding, and paper prototyping can help. 

  1. Interview and talk to your users. Get to know as much as you can about their workflow. Are different Jobs to be Done emerging? What are your users' pain points? Post-it notes or a Miro Board can help.

  2. Storyboard out the different contexts when the product will be used - stick figures work too!

  3. Brainstorm solutions. One of the questions that always get the conversation moving is “What is the absolute worst way to solve the problem?” 

  4. With reference to the research you have done, use a thick marker to begin drawing up rough, possible solutions on paper. Go wild!

  5. Iterate. Test different solutions with users, refine the product, and see the results.

  6. Finally, once the dust settles, you want to arrive at a set of screens that flow well from one to another. This is when we can blu-tack it to a board neatly and use it as a basis for a digital mockup. 

Recommended readings:


8. Digital Mockups: Design Patterns, Accessibility, Responsive Design, Visual Design, UI

If you recall Brad Frost’s Atomic Design Methodology, this is when all the pieces come together. Each industry has their own set of UX conventions. These are tried, tested, and effective methods to get things done. Make sure to research them thoroughly before creating a design system of your own.

There are two Design Patterns you should be familiar with. They are Google’s Material Design Guideline and Apple’s Human Interface Guideline. The simple thing to do would be to familiarize yourself with the graphics, starting with Google’s Material Design Guideline. IBM’s Carbon Design System is also worth mentioning. There is no need to memorize every detail and number, but you might be asked to double check the final interface and identify any anomalies even if you are not a UX Designer. Pay special attention to the accessibility section of the two guides. Especially if you are designing for the Web, make sure to have a basic understanding of responsive design principles. 

It is entirely possible to build a branded design system by changing the fonts, colors, corners, and drop shadows of the Design Patterns. As far as tools are concerned, we generally recommend using Figma because it allows for online collaboration and is free for a limited number of users. However, Sketch, Adobe XD, Illustrator, Photoshop, Invision, are also some of the common tools that UX Designers use to put mockups together. To animate interfaces, designers typically use Adobe After Effects and Facebook’s Origami Studio. Stay tuned for Branding and Identity: Design 101.

Happy creating!

Recommended readings: 


9. Other useful links

General tips:

Critiques:

Edge cases:

On-boarding: 

Cross-cultural Interface Design:

Inclusive Design:

Dark UX Patterns:

Interesting UX Portfolio Case Studies:

Editors Unbuilt Labs
Previous

2. Managing Complexity
Next

4. Effective Business Research