✸  UX Stage 1  ✸

Problem definition

Tools used:  HMW's  •  Problem statement  •  Lean Survey Canvas  •  Competitive Feature Analysis  •  Business Analysis (SWOT/DAFO)  •  Strategy Blueprint  •  Lean UX Canvas

The tools to highlight among the 7 tools used at this stage are:
The Lean Survey Canvas and the Lean UX Canvas

Lean Survey Canvas

Validating the problem - Surveys are a quick way to find attitudinal patterns across a population of users and are very useful when deciding which problems to focus on as a design team.

Although UX researchers usually present qualitative data (gathered from interviews or ethnographic research), we often use survey data to translate user concerns into business concerns and that's what we have applied here.

Lean Survey Canvas is a team tool for generating surveys faster. The Lean Survey Canvas has helped us to do this in an organized manner. This approach funnels it through a planning stage before writing questions, a process designed to evolve a great survey in a fast, lean, and iterative way.

Lean UX Canvas

Part of the problem definition stage is to create a Lean UX Canvas. Lean UX is a methodology created by Jeff Gothelf that focuses on the actual experience being designed rather than deliverables.
‍
The Lean UX Canvas helped us to frame our work as a business problem to solve (rather than a solution to implement) and then dissect that business problem into its core assumptions. We then weave those assumptions into hypotheses. Finally, we design experiments to test our riskiest hypotheses.

Bellow is an example of the Lean UX Canvas that we have reviewed and updated through the development of the App.

✸  UX Stage 2  ✸

data collection & synthetize

Tools used:  Surveys(quanti.)  •  Interview (quali.)  •  Guerrilla  •  Affinity Diagram  •  Empathy Map  •  Storyboards  •  Results gathering & analysis  

The tools to highlight among the 6 tools used at this stage are:
The Affinity Diagram and the Empathy Map Canvas

Affinity Diagram
‍
It is the method we decided to use to cluster findings so that we can physically see trends and relationships in data. It is is a bottom-up activity where we group detailed findings together first, and that bubbles up to higher level trends. We did not start by creating categories first and then assigning individual findings into a category, rather categories are originated by this grouping activity.

It was very useful during the initial phases of analysis (where we had a lot of data and didn't know when to start) in order to use our research to define the design direction. Quantitative and qualitative data were analyzed, then grouped by identified patterns that shaped the user of different types of groups.

Empathy Map Canvas
‍
The canvas was designed by Dave Gray, as part of a human-centered design toolkit called Gamestorming. Used to develop a deep, shared understanding and empathy for other people, it is a tool that helped us in Elements to describe aspects of a user's experience, needs and pain points.
‍
First we started with the GOAL section, by defining WHO will be the subject of the Empathy Map and a goal: something they need to DO. After that we worked clockwise around the canvas, until we have covered Seeing, Saying, Doing, and Hearing. After that we made the circuit of outside elements we focused on what’s going on inside the map.

The Empathy Map Canvas has been featured in the Stanford D School curriculum and in Harvard Business Review, where David Kelley, founder of IDEO, and his business partner Tom Kelley, listed it as one of “Three Creativity Challenges from IDEO’s Leaders.”

✸  UX Stage 3  ✸

user definition

Tools & techniques used:  Brainstorming  •  MoSCoW  •  User Persona  •  User Journey  •  User Scenario  •  User Stories •  Flowcharts  •  Mind Mapping  •  MVP

The tools to highlight among the 8 tools used at this stage are:
The Brainstorming, the MoSCoW, the User Persona, the User Journey and the User Scenario

Brainstorming

Brainstorming and Mind Mapping are great tools for finding new ideas on known problems or proposed challenges. Both are highly effective ways of generating new ideas and organizing your thoughts and in this case we have focused on Brainstorming. It's as a group creativity technique to find a solution to a specific problem or topic which combines a relaxed, informal approach to problem-solving with lateral thinking.

It encouraged our team to come up with thoughts and ideas that can, at first, seem a bit crazy. But these ideas can be crafted into original, creative solutions to a problem, while others can spark even more ideas. This helped us to get unstuck by “jolting” us out of our normal ways of thinking.

"Brainstorming means using the brain to storm a creative problem and do so in commando fashion, with each stormer attacking the same objective.” - Alex Osborn

MoSCoW

In parallel with the different User tools, we had to create the MoSCoW. Every project has resource limitations: Time, Money, and People. So if we planned on developing an MVP, we needed to select and prioritize what we want to include.
‍
Also, we wanted to avoid adding "over-features". So we needed to plan a gradual roll-out of our solution. The more features you have at launch, the harder it is to tell what works and what doesn’t. But, how to choose and prioritize these features?
‍The MoSCoW method is a great prioritization technique, includes must's, should's, could's and will not have.

User persona
‍
Creating the User persona at this stage was a very important milestone.
‍Personas provide a powerful tool for communicating descriptions of different types of users and their needs and then deciding which users are the most important to target in the design of form and behavior.

Personas provided us in this case with a precise way of thinking and communicating about how groups of users behave, how they think, what they want to accomplish, and why. We believe that the best way to successfully accommodate a variety of users is to design for specific types of individuals with specific needs and that's what we have done here.

For us the most important reason to create personas is to set a common understanding of the final user. – For the design team, the client, the developers, and any other important stakeholders involved in the project. We gathered all the possible scenarios and came out with Nick, the improver!

User Journey and User Scenario

Creating the User Journey and User Scenario at this stage was a very important milestone. User Journeys are useful for organizing information and it has helped us on understanding at a glance the high-level user experience, focus on areas we should work on that we may have otherwise overlooked and document a series of events and workflows.

We gathered all the possible scenarios and came out with Nick Journey and Scenario

“A customer journey map is a visualization of the process that a person goes through in order to accomplish a goal. It’s used for understanding and addressing customer needs and pain points.” - Nielsen Norman Group

✸  UX Stage 4  ✸

solution ideation

Tools used:  Design Studio  •  Sketches  •  Card Sorting  •  Sitemap  •  User Flow  •  Crazy 8  •  Concept Testing

The UX tools to highlight among the 7 tools used at this stage are:
The Card Sorting, SiteMap, UserFlow & Crazy8

Card Sorting

The primary purpose of card sorting is to help organize items into logical groups, it consists of giving users words or concepts on cards and allowing them to group them based on their own understanding of the topic.
‍
From our application perspective, card sorts helped us to structure the information architecture of our product. Users can inform three primary aspects of your Information Architecture:
Terminology/Ontology, Categories/Taxonomy and Relationships/Choreography.

We recruited 15 users for card sorting, we asked them to sort a maximum of 50 cards. We let the users know how long we think the card sort will take ahead of time. This was done to help us see our user’s understanding of the App content.

Users come to your platform with their own ideas and expectations of what they will find and where they will find it. This comes from their previous experience with similar platforms or their expertise on the information. The closer your Information Architecture reflects the user’s mental model, the better. - Jakob Nielsen

SiteMap
‍
We used a Sitemap (also known as Organization Structure) to show the relationship between pages in a site. Sitemaps are also used to document the organization, navigation, and labeling found in a site. A Sitemap depicts where the pages “live” in the platform, but not necessarily the order users will see them in, as it can behold in our website.

The Information Architecture defines the overarching structure and relationship between all areas of our site. Its goal is to come up with a structure that balances the users’ desires with the business’s needs of our e-commerce.

There are multiple ways to approach getting the website Information Architecture right. The end deliverable might be a sitemap, but it also includes site-flow diagrams and wireframes to convey how the site will work from a practical perspective. This all-together is the Information Architecture, and the 3 tools/techniques have been used in this project.

Finally we reviewed UX tools and tested suggestions for changes to the sitemap to improve the information architecture, bellow is the final result.

User Flow

The user flow showed us the path or paths a user takes to complete a task. It helped us validate our user journey, in order to be able to detect possible pain points and simplify our solution quickly. User flows depict the primary ways our users will interact with our product.

The concept of flow is important. The success of your website or app is often contingent upon how well your modeled flows meet the needs of your targeted users (personas), as well as the needs of your business. – UX Pin

Crazy 8

As part of the ideation process we came up with 8 different ideas in 8 minutes, the so called Crazy 8. Part of the reason we end up with under-developed ideas is that we stick with the first good idea we have — rather than taking the time to explore complementary approaches. A common mistake is fleshing out an idea too early without iterating it.

Crazy 8s is designed to combat this pattern by forcing us to generate lots of ideas in a short period of time before delving into the details. The activity can then be repeated to hone & flesh out a few of the best ideas and that's what we did.

✸  UX Stage 5  ✸

prototype & test

Tools used:  Tree Jack  •  Task Analysis  •  Low Fidelity wireframes + testing  •  Mid Fidelity wireframes + testing  •  Prototype  •  Test  •  Iterate

The UX tools to highlight among the 7 tools used at this stage are:
The Low Fidelity Wireframes + Testing
and the Mid Fidelity Wireframes + Testing

Low-Fi Prototype

There are a few ways to include low fidelity wireframes in the UX design process. We started by sketching out our mobile interface’s screens on paper – these sketches are often referred to as paper wireframes. They are typically concept sketches, a set of drawings or storyboard, representing the skeleton of the interface.
‍
The next level up is a low fidelity wireframe. Lo-fi wireframes include the most basic content and visuals and are usually static (not interactive). They helped us to map out the shell of the interface, its screens and basic information architecture. Bellow is an example of one of our first low-fi wireframes.

Mid-Fi Prototype

Mid-Fidelity wireframes are usually digitally structured versions of previous sketches, they don’t include any design aesthetics, color, typography or graphic elements. In this case, wireframing let us plan the layout and interaction of your interface without the distractions of colours, typeface choices or text.
‍
Our Mid fidelity prototype is a type of prototype with limited functionality but has several clickable areas presenting an application's interactions and navigation potentials. We created upon user scenarios and storyboards. Through our mid-fidelity prototype, it becomes easy to present plots. The correct content description is emphasized in the prototype and the basic visual design is developed for all action steps.
‍
The mid-fi prototype works effectively for the validation of the interaction concept. Bellow is an example of one of our first mid-fi prototypes.

✸  UI Stage 1  ✸

INSPIRATION

Tools used:  Brand Attributes  •  Moodboard  •  Explore  •  3 alternatives looks and feels built up

The UI tools to highlight among the 4 tools used at this stage is:
The Moodboard

Moodboard
‍
The Moodboard is an arrangement of images, materials, and pieces of text intended to evoke or project a particular style or concept. We have used it as an exploratory research tool to collect and present ideas in order to enable the development of this project, also used across all design disciplines for the generation of ideas in the early stages of conceptualization.

Client Collaboration
‍
Mood boards can be a great way to convey your design idea, win pitches, and get an early sign-off.
What you’re thinking and feeling about a creative idea is limited to how good your verbal communication skills are at expressing this to project stakeholders. This moadboard has helped us get everyone on the same page and start a conversation that aligns everyone’s vision. Bellow is an example of one of our first moodboard.

The mood board and the different tools and techniques that we have used at this stage have helped us to:
- Translate a concept where words may fail.
- Lay a foundation and establish the theme of the project (i.e. Soft or hard? Clean or grungy?).
- Give clients tangible evidence of our design research phase.
- Create a picture in the clients head early on and let them see exactly what we’re planning, so that you can get feedback and iterate early if needed.
- Cut down on time spent revising due to miscommunication.
- Get the whole team on the same page for the visual design direction

✸  UI Stage 2  ✸

define ui

Tools used:  Pick colours  •  Choosing and pairing fonts  •  Pick icons  •  Pick imaginary  •  Define Space, consistency, shadows and alignments to UI  •  Define Light/Dark  •  Build Style Tile

The UI tools to highlight among the 7 tools used at this stage are:
The Style Tile and define space, consistency, shadows and alignments to UI

Style Tiles
‍
Creating a branded identity is no easy task. It requires a hard effort but it’s also one of the most rewarding creative tasks. Style tiles are a needed step for us as UI Designers, especially in the process of gradually defining a look & feel. Style Tiles are a design deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand.
‍
What makes a style tile unique from other tools is that it is specifically a method for establishing a visual vocabulary between the designer and the client, rather than setting a ‘mood’ or defining elements that will ultimately be included in a full layout. – Samantha Warren, Design Lead at Adobe

Bellow is an example of one of our first Style Tile

Style tiles are for when a mood board is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining the layout. –styletil.es

Define space, consistency, shadows and alignments to UI
‍
One of the hardest things we faced with when we stared out our visual designing was the amount of time that we could spend moving elements around on our screen until we were “happy” with the end result. Creating good alignment bridges the visual gap between every element in your design, helping us to create relationships between the elements that we have.

Properly aligning our designs makes the layout visually more appealing, makes it easier for users to scan over a page and allows us to make conscious decisions about where elements are placed and how they interact with each other. Always checking our UI design for consistency between element styling, visual cues, and controls.

Bellow is an example of one of our first Define Space, consistency, shadows and alignments to UI.

✸  UI Stage 3  ✸

alternatives & preference test

Tools used:  States of design  •  Define StyleGuide  •  UI Kit  •  Landing Page  • 

The UI tools to highlight among the 4 tools used at this stage is:
The Landing Page

Landing Page
‍
Landing pages increase our conversion rates in the most optimized way possible. We have designed it to optimize conversions because they have:
‍
- Message Match in order to align our ad headline to our landing page headline. A good message match assures the visitor they have arrived on the right page.
- A Conversion Ratio of 1 to 1: Conversion ratio is the ratio of clickable elements on our landing page to the number of page goals.
- Easy A/B Testing: The purpose of A/B testing is to learn the optimal version of your page in order to maximize your conversion rate. A/B testing our landing page is more simplified than testing our homepage because we are only experimenting with a single objective as opposed to multiple third-parties.

Bellow is an example of one of our first Landing Page

✸  UI Stage 4  ✸

build prototype & test

Tools used:  Build micro-interactions & animations  •  HI-FI Prototype  •  Test + iterations

The UI tools to highlight among the 2 tools used at this stage is:
The Hi-Fi Prototype

Hi-Fi Prototype
‍
High-fidelity prototypes often look like “live” software to users. This means that test participants will be more likely to behave realistically, as if they were interacting with a real system, whereas with a sketchy prototype they may have unclear expectations about what is supposed to work and what isn't. Prototypes with high-fidelity interactivity have realistic (faster) system response during the test.

We were able to test workflow, specific UI components, graphical elements such as affordance, page hierarchy, type legibility, image quality, as well as engagement. Bellow is an example of one of our Hi-Fi Prototypes.

✸  UX Stage 1  ✸

Problem definition

Tools used:  HMW's  •  Problem statement  •  Lean Survey Canvas  •  Competitive Feature Analysis  •  Strategy Blueprint  •  Lean UX Canvas

The tools to highlight among the 6 tools used at this stage are:
The Lean Survey Canvas and the Competitive Feature Analysis

Lean UX Canvas

Part of the problem definition stage is to create a Lean UX Canvas. Lean UX is a methodology created by Jeff Gothelf that focuses on the actual experience being designed rather than deliverables.
‍
The Lean UX Canvas helped us to frame our work as a business problem to solve (rather than a solution to implement) and then dissect that business problem into its core assumptions. We then weave those assumptions into hypotheses. Finally, we design experiments to test our riskiest hypotheses.

Bellow is an example of the Lean UX Canvas that we have reviewed and updated through the development of the App.

✸  UX Stage 2  ✸

data collection & synthetize

Tools used:  Business Analysis (SWOT/DAFO)  •  Surveys(quanti.)  •  Interview (quali.)  •  Guerrilla  •  Affinity Diagram  •  Empathy Map  •  Storyboards  •  Results gathering & analysis  

The tools to highlight among the 7 tools used at this stage are:
The Business Analysis (SWOT)

Business Analysis (SWOT)
‍
SWOT Analysis is a simple tool that can help to analyze what the company/project does best right now, and to devise a successful strategy for the future. SWOT has revealed areas of the business that could held us back, or that our competitors could exploit if we did not protect ourselves.

We gathered a team of people from a range of functions and levels in our organization and used Brainstorming techniques to build a list of ideas about where the project organization currently stands.

Every time we identified a Strength, Weakness, Opportunity, or Threat, we wrote it down in the relevant part of the SWOT analysis grid. A summary is presented bellow.

✸  UX Stage 3  ✸

user definition

Tools & techniques used:  Brainstorming  •  MoSCoW  •  User Persona  •  User Journey  •  User Scenario  •  User Stories •  Flowcharts  •  Mind Mapping  •  MVP

The tools to highlight among the 8 tools used at this stage are:
The User Persona, the User Journey and the User Scenario

User persona
‍
Creating the User persona at this stage was a very important milestone.
‍Personas provide a powerful tool for communicating descriptions of different types of users and their needs and then deciding which users are the most important to target in the design of form and behavior.

Personas provided us in this case with a precise way of thinking and communicating about how groups of users behave, how they think, what they want to accomplish, and why. We believe that the best way to successfully accommodate a variety of users is to design for specific types of individuals with specific needs and that's what we have done here.

For us the most important reason to create personas is to set a common understanding of the final user. – For the design team, the client, the developers, and any other important stakeholders involved in the project. We gathered all the possible scenarios and came out with Maria, the funny teacher!

User Journey and User Scenario

Creating the User Journey and User Scenario at this stage was a very important milestone. User Journeys are useful for organizing information and it has helped us on understanding at a glance the high-level user experience, focus on areas we should work on that we may have otherwise overlooked and document a series of events and workflows.

We gathered all the possible scenarios and came out with Maria's Journey and Scenario

“A customer journey map is a visualization of the process that a person goes through in order to accomplish a goal. It’s used for understanding and addressing customer needs and pain points.” - Nielsen Norman Group

✸  UX Stage 4  ✸

solution ideation

Tools used:  Design Studio  •  Sketches  •  Card Sorting  •  Sitemap  •  User Flow  •  Crazy 8  •  Concept Testing

The UX tools to highlight among the 7 tools used at this stage are:
The User flow

User Flow

The user flow shows the path or paths a user takes to complete a task. They help us validate our user journey, in order to be able to detect possible pain points and simplify your solution quickly. User flows depict the primary ways our users will interact with our product.

‍
''The concept of flow is important. The success of your website or app is often contingent upon how well your modeled flows meet the needs of your targeted users (personas), as well as the needs of your business.''
– UX Pin

The process we followed was:
  First - which users/personas you will be creating a user flow for.
  Second - what core user stories/tasks you want to document in the user flow.
  Third - where your users are coming from.

✸  UX Stage 5  ✸

prototype & test

Tools used:  Tree Jack  •  Task Analysis  •  Low Fidelity wireframes + testing  •  Mid Fidelity wireframes + testing  •  Prototype  •  Test  •  Iterate

The UX tools to highlight among the 7 tools used at this stage are:
The Low Fidelity Wireframes + Testing and the Mid Fidelity Wireframes + Testing

Low-Fi Prototype

There are a few ways to include low fidelity wireframes in the UX design process. We started by sketching out our mobile interface’s screens on paper – these sketches are often referred to as paper wireframes. They are typically concept sketches, a set of drawings or storyboard, representing the skeleton of the interface.
‍
The next level up is a low fidelity wireframe. Lo-fi wireframes include the most basic content and visuals and are usually static (not interactive). They helped us to map out the shell of the interface, its screens and basic information architecture. Bellow is an example of one of our first low-fi wireframes.

Mid-Fi Prototype

Mid-Fidelity wireframes are usually digitally structured versions of previous sketches, they don’t include any design aesthetics, color, typography or graphic elements. In this case, wireframing let us plan the layout and interaction of your interface without the distractions of colours, typeface choices or text.
‍
Our Mid fidelity prototype is a type of prototype with limited functionality but has several clickable areas presenting an application's interactions and navigation potentials. We created upon user scenarios and storyboards. Through our mid-fidelity prototype, it becomes easy to present plots. The correct content description is emphasized in the prototype and the basic visual design is developed for all action steps.
‍
The mid-fi prototype works effectively for the validation of the interaction concept. Bellow is an example of one of our first mid-fi prototypes.

✸  UI Stage 1  ✸

INSPIRATION

Tools used:  Brand Attributes  •  Moodboard  •  Exploration  •  3 alternatives looks and feels built up

The UI tools to highlight among the 4 tools used at this stage is:
The Moodboard (incl. brand attributes)

Moodboard
‍
The Moodboard is an arrangement of images, materials, and pieces of text intended to evoke or project a particular style or concept. We have used it as an exploratory research tool to collect and present ideas in order to enable the development of this project, also used across all design disciplines for the generation of ideas in the early stages of conceptualization.

Client Collaboration
‍
Moodboards can be a great way to convey your design idea, win pitches, and get an early sign-off.
What you’re thinking and feeling about a creative idea is limited to how good your verbal communication skills are at expressing this to project stakeholders. This moadboard has helped us get everyone on the same page and start a conversation that aligns everyone’s vision. Bellow is an example of one of our first moodboard.

The mood board and the different tools and techniques that we have used at this stage have helped us to:
- Translate a concept where words may fail.
- Lay a foundation and establish the theme of the project (i.e. Soft or hard? Clean or grungy?).
- Give clients tangible evidence of our design research phase.
- Create a picture in the clients head early on and let them see exactly what we’re planning, so that you can get feedback and iterate early if needed.
- Cut down on time spent revising due to miscommunication.
- Get the whole team on the same page for the visual design direction

✸  UI Stage 2  ✸

define ui

Tools used:  Pick colours  •  Choosing and pairing fonts  •  Pick icons  •  Pick imaginary  •  Define Space, consistency, shadows and alignments to UI  •  Define Light/Dark  •  Build Style Tile

The UI tools to highlight among the 7 tools used at this stage are:
The Style Tile

Style Tiles
‍
Creating a branded identity is no easy task. It requires a hard effort but it’s also one of the most rewarding creative tasks. Style tiles are a needed step for us as UI Designers, especially in the process of gradually defining a look & feel. Style Tiles are a design deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand.
‍
What makes a style tile unique from other tools is that it is specifically a method for establishing a visual vocabulary between the designer and the client, rather than setting a ‘mood’ or defining elements that will ultimately be included in a full layout. – Samantha Warren, Design Lead at Adobe

Bellow is an example of one of our first Style Tile

Style tiles are for when a mood board is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining the layout. –styletil.es

✸  UI Stage 3  ✸

build prototype & test

Tools used:  Build micro-interactions & animations  •  HI-FI Prototype  •  Test + iterations

The UI tools to highlight among the 2 tools used at this stage is:
The Hi-Fi Prototype

Hi-Fi Prototype
‍
High-fidelity prototypes often look like “live” software to users. This means that test participants will be more likely to behave realistically, as if they were interacting with a real system, whereas with a sketchy prototype they may have unclear expectations about what is supposed to work and what isn't. Prototypes with high-fidelity interactivity have realistic (faster) system response during the test.

We were able to test workflow, specific UI components, graphical elements such as affordance, page hierarchy, type legibility, image quality, as well as engagement. Bellow is an example of one of our Hi-Fi Prototype

✸  UX Stage 1  ✸

Problem definition

Tools used:  HMW's  •  Problem statement  •  Lean Survey Canvas  •  Competitive Feature Analysis  •  Business Analysis (SWOT/DAFO)  •  Strategy Blueprint  •  Lean UX Canvas

The tools to highlight among the 7 tools used at this stage are:
The Lean Survey Canvas and the Lean UX Canvas

Lean Survey Canvas

Validating the problem - Surveys are a quick way to find attitudinal patterns across a population of users and are very useful when deciding which problems to focus on as a design team.

Although UX researchers usually present qualitative data (gathered from interviews or ethnographic research), we often use survey data to translate user concerns into business concerns and that's what we have applied here.

Lean Survey Canvas is a team tool for generating surveys faster. The Lean Survey Canvas has helped us to do this in an organized manner. This approach funnels it through a planning stage before writing questions, a process designed to evolve a great survey in a fast, lean, and iterative way.

Lean UX Canvas

Part of the problem definition stage is to create a Lean UX Canvas. Lean UX is a methodology created by Jeff Gothelf that focuses on the actual experience being designed rather than deliverables.
‍
The Lean UX Canvas helped us to frame our work as a business problem to solve (rather than a solution to implement) and then dissect that business problem into its core assumptions. We then weave those assumptions into hypotheses. Finally, we design experiments to test our riskiest hypotheses.

Bellow is an example of the Lean UX Canvas that we have reviewed and updated through the development of the App.

‍“The Lean UX Canvas helps us prepare better surveys faster (in just a few hours). It allows everyone to collaborate around a single source of truth with all of the information at hand. We now focus on the insight we need or validating our hypotheses rather than writing questions. The result is a more concise survey (under 8 questions) that’s much easier for the participant to complete with clear, actionable insight from the results.” - Chris Thelwell

✸  UX Stage 2  ✸

data collection & synthetize

Tools used:  Business Analysis (SWOT/DAFO)  •  Surveys(quanti.)  •  Interview (quali.)  •  Guerrilla  •  Affinity Diagram  •  Empathy Map  •  Storyboards  •  Results gathering & analysis  

The tools to highlight among the 7 tools used at this stage are:
The Business Analysis (SWOT) and Affinity Diagram

Business Analysis (SWOT)
‍
SWOT Analysis is a simple tool that can help to analyze what the company/project does best right now, and to devise a successful strategy for the future. SWOT has revealed areas of the business that could held us back, or that our competitors could exploit if we did not protect ourselves.

We gathered a team of people from a range of functions and levels in our organization and used Brainstorming techniques to build a list of ideas about where the project organization currently stands.

Every time we identified a Strength, Weakness, Opportunity, or Threat, we wrote it down in the relevant part of the SWOT analysis grid. A summary is presented bellow.

✸  UX Stage 3  ✸

user definition

Tools & techniques used:  Brainstorming  •  MoSCoW  •  User Persona  •  User Journey  •  User Scenario  •  User Stories •  Flowcharts  •  Mind Mapping  •  MVP

The tools to highlight among the 8 tools used at this stage are:
The User Persona, the User Journey and the User Scenario

User persona
‍
Creating the User persona at this stage was a very important milestone.
‍Personas provide a powerful tool for communicating descriptions of different types of users and their needs and then deciding which users are the most important to target in the design of form and behavior.

Personas provided us in this case with a precise way of thinking and communicating about how groups of users behave, how they think, what they want to accomplish, and why. We believe that the best way to successfully accommodate a variety of users is to design for specific types of individuals with specific needs and that's what we have done here.

For us the most important reason to create personas is to set a common understanding of the final user. – For the design team, the client, the developers, and any other important stakeholders involved in the project. We gathered all the possible scenarios and came out with Rosa, the intelectual!

User Journey and User Scenario

Creating the User Journey and User Scenario at this stage was a very important milestone. User Journeys are useful for organizing information and it has helped us on understanding at a glance the high-level user experience, focus on areas we should work on that we may have otherwise overlooked and document a series of events and workflows.

We gathered all the possible scenarios and came out with Rosa Journey and Scenario, a user who supports the local economy but finds it difficult to find books on their websites and ends up giving up to buy them in large stores.

“A customer journey map is a visualization of the process that a person goes through in order to accomplish a goal. It’s used for understanding and addressing customer needs and pain points.” - Nielsen Norman Group

✸  UX Stage 4  ✸

solution ideation

Tools used:  Design Studio  •  Sketches  •  Card Sorting  •  Sitemap  •  User Flow  •  Crazy 8  •  Concept Testing

The UX tools to highlight among the 7 tools used at this stage are:
The SiteMap, UserFlow & Crazy8

SiteMap
‍
We used a Sitemap (also known as Organization Structure) to show the relationship between pages in a site. Sitemaps are also used to document the organization, navigation, and labeling found in a site. A Sitemap depicts where the pages “live” in the platform, but not necessarily the order users will see them in, as it can behold in our website.

The Information Architecture defines the overarching structure and relationship between all areas of our site. Its goal is to come up with a structure that balances the users’ desires with the business’s needs of our e-commerce.

There are multiple ways to approach getting the website Information Architecture right. The end deliverable might be a sitemap, but it also includes site-flow diagrams and wireframes to convey how the site will work from a practical perspective. This all-together is the Information Architecture, and the 3 tools/techniques have been used in this project.

Finally we reviewed UX tools and tested suggestions for changes to the sitemap to improve the information architecture, bellow is the final result.

User Flow

The user flow showed us the path or paths a user takes to complete a task. It helped us validate our user journey, in order to be able to detect possible pain points and simplify our solution quickly. User flows depict the primary ways our users will interact with our product.

The concept of flow is important. The success of your website or app is often contingent upon how well your modeled flows meet the needs of your targeted users (personas), as well as the needs of your business. – UX Pin

Crazy 8

As part of the ideation process we came up with 8 different ideas in 8 minutes, the so called Crazy 8. Part of the reason we end up with under-developed ideas is that we stick with the first good idea we have — rather than taking the time to explore complementary approaches. A common mistake is fleshing out an idea too early without iterating it.

Crazy 8s is designed to combat this pattern by forcing us to generate lots of ideas in a short period of time before delving into the details. The activity can then be repeated to hone & flesh out a few of the best ideas and that's what we did.

✸  UX Stage 5  ✸

prototype & test

Tools used:  Tree Jack  •  Task Analysis  •  Low Fidelity wireframes + testing  •  Mid Fidelity wireframes + testing  •  Prototype  •  Test  •  Iterate

The UX tools to highlight among the 7 tools used at this stage are:
The Mid Fidelity Wireframes + Testing

Mid-Fi Prototype

Mid-Fidelity wireframes are usually digitally structured versions of previous sketches, they don’t include any design aesthetics, color, typography or graphic elements. In this case, wireframing let us plan the layout and interaction of your interface without the distractions of colours, typeface choices or text.
‍
Our Mid fidelity prototype is a type of prototype with limited functionality but has several clickable areas presenting an application's interactions and navigation potentials. We created upon user scenarios and storyboards. Through our mid-fidelity prototype, it becomes easy to present plots. The correct content description is emphasized in the prototype and the basic visual design is developed for all action steps.
‍
The mid-fi prototype works effectively for the validation of the interaction concept. Bellow is an example of one of our first mid-fi prototypes.

✸  UI Stage 1  ✸

INSPIRATION

Tools used:  Brand Attributes  •  Moodboard  •  Explore  •  3 alternatives looks and feels built up

The UI tools to highlight among the 4 tools used at this stage is:
The Moodboard

Moodboard
‍
The Moodboard is an arrangement of images, materials, and pieces of text intended to evoke or project a particular style or concept. We have used it as an exploratory research tool to collect and present ideas in order to enable the development of this project, also used across all design disciplines for the generation of ideas in the early stages of conceptualization.

Client Collaboration
‍
Mood boards can be a great way to convey your design idea, win pitches, and get an early sign-off.
What you’re thinking and feeling about a creative idea is limited to how good your verbal communication skills are at expressing this to project stakeholders. This moadboard has helped us get everyone on the same page and start a conversation that aligns everyone’s vision. Bellow is an example of one of our first moodboard.

The mood board and the different tools and techniques that we have used at this stage have helped us to:
- Translate a concept where words may fail.
- Lay a foundation and establish the theme of the project (i.e. Soft or hard? Clean or grungy?).
- Give clients tangible evidence of our design research phase.
- Create a picture in the clients head early on and let them see exactly what we’re planning, so that you can get feedback and iterate early if needed.
- Cut down on time spent revising due to miscommunication.
- Get the whole team on the same page for the visual design direction

✸  UI Stage 2  ✸

define ui

Tools used:  Pick colours  •  Choosing and pairing fonts  •  Pick icons  •  Pick imaginary  •  Define Space, consistency, shadows and alignments to UI  •  Define Light/Dark  •  Build Style Tile

The UI tools to highlight among the 7 tools used at this stage are:
The Style Tile and Picking Colour, fonts and icons

Picking Colour, fonts and icons
‍
The Colour in the UI process that we have followed was:
First, we followed the HSB, Hue, Saturation and Brightness model. Secondly, we applied Dominant, Subordinate and accent model to create color palettes. Thirdly, we identified our primary and secondary colours. Fourth, we created a neutral palette to apply in light and dark interfaces. Finally, we created a color code for our functional color palette.

We reviewed basic color terminology and process, how the color wheel is organized and how to combine different colours to provoke effects on the user psychology taking advantage of the selected color scheme to create useful schemes and to design Interfaces. Bellow is an example of our first Pick colours  and Choosing and pairing fonts

Style Tiles
‍
Creating a branded identity is no easy task. It requires a hard effort but it’s also one of the most rewarding creative tasks. Style tiles are a needed step for us as UI Designers, especially in the process of gradually defining a look & feel. Style Tiles are a design deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand.
‍
What makes a style tile unique from other tools is that it is specifically a method for establishing a visual vocabulary between the designer and the client, rather than setting a ‘mood’ or defining elements that will ultimately be included in a full layout. – Samantha Warren, Design Lead at Adobe

Bellow is an example of one of our first Style Tile

Style tiles are for when a mood board is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining the layout. –styletil.es

✸  UI Stage 3  ✸

alternatives & preference test

Tools used:  States of design  •  Define StyleGuide  •  UI Kit  •  Landing Page  • 

The UI tools to highlight among the 4 tools used at this stage is:
The StyleGuide

StyleGuide
‍
A Style Guide is a set of standards that communicate design instructions to a team or organization. Style Guides align designs with a company’s voice and mission. In a general sense, it is a mature set of guidelines and visual references of a whole digital product that includes not only fonts, colours, style and other UI elements but also much more info that companies may need to carry out a consistent brand strategy.

Our thorough Style Guide establishes a common language for designers, developers, product managers, marketing and external agencies. There are many facets to any good design system, starting with company culture/vision/mission and trickling all the way down to branding, copywriting, component libraries, and other. All those have been taking in account for us. Bellow is an example of one of our StyleGuide.

& more pages to follow (18 pages total)

✸  UI Stage 4  ✸

build prototype & test

Tools used:  Build micro-interactions & animations  •  HI-FI Prototype  •  Test + iterations

The UI tools to highlight among the 2 tools used at this stage is:
The Hi-Fi Prototype & comparison of the web before and after the new design

Comparison of the web before and after the new design / features added.
‍
Bellow is a summary of the previous and new design:

Hi-Fi Prototype
‍
High-fidelity prototypes often look like “live” software to users. This means that test participants will be more likely to behave realistically, as if they were interacting with a real system, whereas with a sketchy prototype they may have unclear expectations about what is supposed to work and what isn't. Prototypes with high-fidelity interactivity have realistic (faster) system response during the test.

We were able to test workflow, specific UI components, graphical elements such as affordance, page hierarchy, type legibility, image quality, as well as engagement. Bellow is an example of one of our Hi-Fi Prototype