## AARRR framework
We use the AARRR framework to measure and optimize every phase of a product by optimizing it through the insane focus on one metric at a time.

## What is AARRR framework?

![](assets/aarrr_4627424c84844c9c19fc46da18c48077_md5.webp)

The AARRR framework consists of five phases a customer goes through in order to achieve growth and each phase has its own set of metrics to focus on. AARRR stands for Acquisition, Activation, Retention, Referral, and Revenue. Each of these can be tracked to see how well a product is doing and how stable its growth is in the long run.

## Why AARRR?
AARRR is widely accepted as the five most important metrics for a startup to focus on. That is because these metrics effectively measure a product’s growth while at the same time being simple and actionable.

## How we apply AARRR?
### Choose one phase of the AARRR
Define the stage that products are on and choose one phase to improve.

### Gather data
Gather data, both quantitative (user behavior from analytics) and qualitative (user feedback, app store reviews, etc.), to get the baseline (current reality) of that metric. This also gives us an idea of what the problem might be.

### Validate the problem
Validate the problem by conducting the user interview/usability test. This will give us an idea of whether it really is a problem, discover the new problem(s) and a chance to figure out why the problem occurs. In short, we’ll have the problem defined.

### Ideate on potential solutions
We might get the stakeholders involved in sketching bunch of ideas and more importantly, get their buy-in early on.


We use the AARRR framework to measure and optimize every phase of a product by optimizing it through the insane focus on one metric at a time.

aarrr


### What is the design sprint?
The sprint is a four-day process for answering critical business questions through design, prototyping and testing ideas with customers.
Design sprint mostly applied to the Exploration phase.
Friday is usually Education event or Lab projects at Dwarves Design, learning and continuous professional and personal development are in the core of our DNA. No one wants to settle, everyone wants to take the next step forward.

### Why a design sprint?
A Design Sprint is an immersive experience where a team collaborates, focuses, and makes progress on a problem using design thinking methods in rapid succession.

### The 4 stages
#### Day 1: Map & Sketch
Finding the right problem to focus on and multiple solutions to address it.
1. Invite experts from the organization and from the outside to share their knowledge on various aspects of the challenge.
2. Define the main questions of the Design Sprint as well as the long-term goal of the new venture. Put things into perspective and focus on the main, most important aspect of the problem.
3. Use Note-and-Vote approach (using post-its) to exclude unnecessary discussions and Together-Alone type of brainstorming that lets everyone put their ideas and opinions on the table. These two approaches are used throughout the Design Sprint and are instrumental for its success.
4. Map the customer journey (very basic at this point) and choosing the most crucial area of this journey, which will serve as the main focus of the Sprint.
5. Produce individually multiple sketches that would represent the future solution.

#### Day 2: Decide & Storyboard
Focusing on choosing one concept and refining it in detail.
1. Team members use stickers to vote on the parts of each concept they like.
2. Work on creating a 6-step flow (using post-its) of the customer experience: starting from discovery and ending with a successfully solved problem.
3. Create one Master Line by clustering the main steps and excluding excessive ones.
4. Use Master Line to sketch the Storyboard in detail every step of the user journey, including the low-fidelity wire-frames (in case of the digital product) of the solution, the exact copy of the messages and texts, colors, positions of elements, etc.

#### Day 3: Prototype
Solely dedicated to building the prototype. The team divides this task taking separate roles based on existing skills.
1. One or two people work with sketching software (we use Sketch/Adobe XD and Invisions) creating the wireframes (Makers), another person searches for design assets such as pictures, photos, backgrounds, logos (Collector),
2. Third Design Sprint Team member takes responsibility for the messaging and texts (Writer)
3. And finally a fourth person stitches the whole flow together and performs quality control (Stitcher).
4. The fifth one is responsible for preparing an interview, from drafting interview questions, developing a screening survey to select only people who represent the target audience, disseminating the call for testers via social media channels or online-boards, arranging time-slots, and checking-in with testers to make sure they will come on time.

#### Day 4: Test
Dedicated only to the user-tests.
These are open-ended qualitative interviews where users will try out the prototype and give their feedback. There are normally from 5 to 8 of such interviews. This might seem not many, however, it’s statistically proven that after the 5th interview the amount of new useful information dramatically declines.
During interviews, take notes using post-its. These notes are later gathered and grouped similarly to the User Test Flow in order to bring forward the main analytical conclusions of the Design Sprint.

### Setting up the design sprint
#### Set roles for the sprint
- **Facilitator**: Leads the design sprint. Guides the sprint from start to completion.
- **Recorder**: Takes notes, photographs and is in charge of the documentation for the sprint.
- **Product Owner**: Typically the client and the person with the initial product vision. This person has the final say in the product.

#### Supplies needed
1. Post-it Notes
2. Sharpies
3. Blank sheets of printer paper
4. Whiteboard
5. Whiteboard Marker
6. Circle vote stickers
7. Easel Pad

#### Setup room
The Design Sprint meeting room has to be big enough to fit all the people in the sprint and often has a whiteboard to pin and tape up sketches.

### How many is enough?
The exploration phase could take many Sprints as possible until we finalize a suitable solution.
In the Detailed Design phase, we still apply the Agile method to implement and user-testing the Final version before handoff to our Client.


Design sprint mostly applied to the Exploration phase. Friday is usually Education event or Lab projects at Dwarves Design, learning and continuous professional and personal development are in the core of our DNA. No one wants to settle, everyone wants to take the next step forward.

Design Sprint

lean-canvas


## Lean Canvas
Lean Canvas is an adaptation of Business Model Canvas by Alexander Osterwalder which Ash Maurya created in the Lean Startup spirit (Fast, Concise and Effective startup). Lean Canvas promises an actionable and entrepreneur-focused business plan. It focuses on problems, solutions, key metrics, and competitive advantages.

![leancanvas](assets/lean-canvas_leancanvas.webp)

### 1. Problem
What is the crucial problem faced by the product’s consumers? Capture their central frustration. The best way to describe the problem is in terms of the jobs customers need to do, what they are ultimately trying to achieve and what is the pain or frustration they currently feel. Possibly with a concise sentence.

#### EXISTING ALTERNATIVES
How can these problems be solved today? These are the current competitors. Customers may be solving the problems through a single service, or through a combination of them, or even through basic and primitive techniques, and for some reason, all these services are failing them. By listing competitors, we will be able to compile a competitive analysis and differentiate your value proposition later in the process.

### 2. Customer Segments
Now that we know which are the problems that we are willing to solve with our products’ ideas, let’s focus on who is actually having these pains. This is crucial, as customers are at the center of any new business or new product development that actually works.
Define 3-4 personas suffering because of the problems you are going to solve?

* Do these people have specific job titles or roles?
* Do they work in specific industries?
* Do they have particular demographics/salary range?

#### EARLY ADOPTERS
Identifying early adopters is extremely important because these are the ones that are going to be your first customers and the first version of the business is going to be crafted around them.

### 3. Unique Value Proposition
This message should explain what we do, how we are different, and why we are worth investing in. What is the promise to consumers?
How does the product fit into the bigger picture; where does it fall in the grand scheme of things?

**Describe the product to target customers in one just ONE sentence**

It usually combines:
* the target segment
* the key problem
* the key benefits customers are going to get after having used the product
* the special and unique way the product will be delivered.

**“We help (who?) achieve (what benefit?) by doing (the special and unique way the new business/new product is doing it)”.**

### 4. Solution
* Define what are solutions to consumers’ problems?
* Present the defining elements of the product: what makes it the top tool for addressing consumers’ needs?

### 5. Channels
How will we interact with consumers, inform them of the product? Print ads, social media platforms, promotional events, or even word of mouth—consider the most effective ways to reach users.

### 6. Revenue Streams
How will you generate income? Present a pricing model for the product, and then highlight other sources of revenue—ad sales, subscription fees, or asset sales.

### 7. Cost Structure
What will it cost to launch and maintain the product?

* Development
* Marketing
* Employees

### 8. Key Metrics
How we track consumer engagement, excitement, and usage of the product. (SASS, AARRR, user, download, quote…)

### 9. Unfair Advantage
How do we stand out from competitors? What puts we ahead of the pack? Why should consumers have confidence in our product above others?
It has to be something that you already have, and cannot be copied or bought, and would require a considerable amount of time for anyone else to build.


Lean Canvas is an adaptation of Business Model Canvas by Alexander Osterwalder which Ash Maurya created in the Lean Startup spirit (Fast, Concise and Effective startup). Lean Canvas promises an actionable and entrepreneur-focused business plan. It focuses on problems, solutions, key metrics, and competitive advantages.

Lean Canvas


## Research
### 1. Understand prospect
Understanding stakeholder, company, business model, goals and challenges of the product in order to set mindset, define style, color palette, and typography, iconography, illustration, and photography.

### 2. Define product
* **Style**
Based on the target user and product’s requirement, we define layout style. Make references from Dribbble, Behance and other showcase sites to catch up with the current design trends.

* **Color**
Define primary and secondary based on the logo and branding of the product. In case the client does not have a logo or verify their color palette, we can use Milanote app to create a moodboard that is a great way to set a visual direction from the client’s ideas.

Using 2 principles color to combine color in UI design:

    - 6:3:1 rule
    - Max 3 primary colors

Delivering a harmonious color scheme is clean and eye-friendly.

* **Typography**
Define typeface, font-size, font weight of each style (header, subheader, body text, etc.)

* **Iconography**
Define icon style based on elements’ style and branding characteristics. Icon color is defined following the color palette of the product.

* **Illustration & Image**
Illustration and image are used in accordance with content and style
You should apply a mask to bitmaps image when you export to an image file.

* **Platform**
Specify a particular screen (Desktop, Mobile or Tablet); divide into grid layout to align elements into columns, rows.

* **Grid Layout**
Grids are a framework that speeds up the designer-to-developer workflow by allowing developers to pre-set classes in their code that correspond to column sizes.

      - Select a suitable grid (we generally use 12 columns)
      - Use a baseline grid to align elements
      - Optimize grids for mobile and web app

* **Responsive retrofitting**
We live in a multiscreen-world. Everything needs to work across devices so responsive is a way to design a flexible screen. According to the requirement’s client or platform, we can decide on having a responsive or not.

## Demo Design
Design some demo screens and send to the client to verify style, color palette, typeface, font-size, etc. In case the client hasn’t decided on color palette yet, we will design without color first. Creating a screen in a grayscale color palette before adding color forces to focus layout, text style and spacing.

## Design System
### What is Design System
Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

![](assets/d56a8496bb80c42b7c2b89d718b1da48_MD5.avif|"Design System")

### How we build Design System
#### Purpose and shared values
Before starting anything, it’s essential to align teams around a clear set of shared goals. It will help to build a vision and making sure everyone looks in the same direction. These goals will evolve with time and it’s normal. We just have to make sure that changes are broadly communicated.

#### Design principle
Design principles are the guiding sentences that help the teams to reach the purpose of the product thanks to the design. So you need to modify your practices and start establishing a style guide for the design system.
#### Color palette
Kick off your design system process with sprints devoted to unifying and implementing the color palette. Colors affect all the parts of the system, so you have to organize them first.

* Step 1: Create a moodboard
Using Milanote app to create a moodboard. Read more about how to make a moodboard
* Step 2: Identity primary and secondary colors
* Step 3: Send the color palette to customer
* Step 4: Decide on the naming convention
There are different approaches to naming colors in a design system. You can name colors using abstract names (e.g. \#b9b9b9 - pigeon), actual names (e.g. \#b9b9b9 - silver), numbers (e.g. \#b9b9b9 - silver-1) or functional names (e.g. \#b9b9b9 - silver-base)

* Step 5: Decide on the system of building accent palette colors
* Step 6: Test the color palette against the colors in the inventory
* Step 7: Implement new color palette in CSS (consider using a preprocessor and build a list of variables) on a test server
* Step 8: Test how the new palette affects the interface
* Step 9: Check the contrast between colors in the new UI. Make sure you comply with WCAG guidelines.
Use the Contrast Ratio web app for quick access to WCAG color contrast ratios. You can read more the rules of contrast color to create “Contrast pairs” which clearly shows a WCAG tests.

* Step 10: Finalize the color palette
After tests and gathering feedback, finalize the palette and communicate it to the company. Add the palette to your design system documentation.

#### Typographic elements guide
Note preferred text sizes, spaces, fonts, etc. as well as any rules on where and when to use them. For example, how big are section headings or text body? Define details, like font weights, line heights, or custom kerning rules if applicable.

#### Graphic design assets
* Icons: All the icons that products, apps, or sites use. Having a standardized icon library ensures consistency across the entire brand.
* Photography: A single go-to reference for all product’s photography, both custom images, and purchased stock photos.
* Illustration: Compile all the custom illustrations commissioned, including page flourishes or border designs.
* Branding images: Standardized logos and other branding images, like mascots. Rules for logo usage can get strict, so it’s better to pull pre-approved images to ensure compliance.

#### Pattern library
List all design components with all states such as input, press, hover, etc.; categorize them by function, such as “navigation,” or by type, such as “drop-down menus.”

#### Tool
* Sketch
* Adobe XD

### High-fidelity Prototype: Interactive Design
#### What
A high-fidelity prototype is an interaction-supported UI, which means a user can interact with it by triggering an action:
* Press a button
* Modify a slider in the filter section

Then, he or she can see or review how the prototype should react like a real product.

#### When
It is created after we completed designing UI.

### Goal
* Test our assumptions for the product
* Quickly show our design concepts to the developers and customers
* Receive feedback for iteration

### Tools
* Principle
* Protopie
* Adobe XD


Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible.

Low-fidelity prototype: UI Design


## UX Research Framework
### 1. Gather Data
In the first phase, we focus on gathering as much valuable data as humanly possible. It’s time for open-question asking, non-judgmental listening, and meticulous note-taking.

#### Stakeholder Interview
In order to create successful products as a designer, it’s crucial to discover how the stakeholders think - what is the vision for the product (from each of the stakeholders' perspectives), and how can these be amalgamated?

* Basic Information
* Restrictions
* Value proposition
* Users
* Competition
* Context of use
* User goals

#### User Interview
There is no better way to recognize the problems and pain points of the target audience than simply by talking to them. The result of the interview should answer these questions:

* What are the different lifestyles of potential product users?
* What motivates people to behave in certain ways?
* Which user/s should I focus on?
* What jargon do people use to talk about a domain?
* What is the user’s workflow?
* Is there a need for the product/feature?
* What are the right requirements for the product?

#### Competitor Analysis
A competitive analysis is a way to collect and compare data about products (and companies) in the marketplace. This method is often used to highlight the strengths and weaknesses of products in order to make more informed decisions about your product strategy. A typical competitive analysis might include information, such as:

* An overview of the product landscape (products, companies, prices, market share, etc.)
* User demographics
* Lists of product features
* Social media presence (followers, posts, etc.)
* Evaluation of visual design language
* Voice, language, and content

### 2. Analyze data
Now we’ve gathered the data we need, it’s time to make sense of it. Here, we’ll take a closer look at our findings and aim to identify patterns.

#### Problems valuation
Look back over collected data and identify the problems we managed to draw from interviews.
* Not really
* Important
* Crucial

#### Solution Definition
Take the most crucial problems and brainstorm solutions for them. Try to find as many possible solutions to this problem as possible. Then with your team vote for the best one.

* Problem
* Possible Solution

#### Personas
Different target groups have different needs, approaches, and opinions. Creating a persona for each group is a great way to streamline your research data, whilst representing the specific considerations for fundamentally different groups of people.

* Persona Name
* List of Users
* Profile
* Problems

#### User Story
User stories are short, simple descriptions of a feature told from the perspective of the person who desires the new capability, usually a user or customer of the system. They typically follow a simple template:

* As a < type of user >, I want < some goal > so that < some reason >.

#### User Journey Mapping
User journey mapping visualizes how a user interacts with a product and allows designers to see a product from a user’s point of view.

* **Context**: What is going on in users’ day when they engage with our product? Are they in a rush? Worried? Planning an adventure?
* **Motivation**: What drives a user to interact with our product? What are they hoping to get out of it? Why are they using our product instead of a competitor’s - or nothing at all?
* **Mental Models**: How does user conceive of the problem space that our product addresses? What concepts and connections come naturally to them, and what do they need to be taught?
* **Pain Points**: What are the challenges users are facing? Is our product helping them solve these or aggravating them? Are there any obstacles they have to use our product?

Note the emotional state of users at each step of their journey.

#### Flows
Once you have the problem and the solutions it’s time to connect the dots. Draw a user flow that takes users from their entry point through a set of steps towards a successful outcome and final action, such as purchasing a product.
For each user flow, the questions you need to consider are:

* What is the user trying to accomplish?
* What is important to the user and what will give them the confidence to continue?
* What additional information will the user need to accomplish the task?
* What are the user’s hesitations or barriers to accomplishing the task?

![](assets/ux_3d7c3626f0c1880f74be8d46181f9e1b_md5.webp)



## Wireframe: Workflow Design
Created on scraps of paper, a whiteboard, or in a software program, serve to establish relationships between elements in a project such as navigation, imagery, and calls to action.
Often, a wireframe has 3 core goals:
* To show the content and functionality of the pages before any further designs.
* To help designers communicate with clients about the design concept.
* To establish the information hierarchy of the site.

### Tools
* Paper & Pencil
* Balsamiq
* Whimsical

![](assets/wireframe_3c6ce1f34b539d7de9da020608c19f8a_md5.webp)

## Information Architecture
Information architecture (IA) is, like a blueprint, a visual representation of the product’s infrastructure, features, and hierarchy. IA provides designers (as well as product development and engineering teams) a bird’s-eye view of the entire product.

### How we do
* Sitemap

!["Sitemap"](assets/wireframe/203ab5b0117c8ecbeb2cf2db4b549d51_md5.gif)
* Card Sorting

![](assets/wireframe_1f61968fcb92a401380478e6df78410a_md5.webp)
* State machine

![](assets/wireframe_a58d97e8735e49f087898dd95725b929_md5.webp)

### Tools
* Whimsical
* Draw.io


Playbook > Design