PROJECT

Trueke Token - Finance

CATEGORY

App Creation & Design

client

IronHack

services

- UX Research
- UI Design
- MVP Product Delivered

process stages

Over 30 UX & 15 UI tools & techniques performed

year

2021

DURATION

15 days
Category: App Creation & Design —

Elements - Health & Well-Being

Trueke Token is a digital product that enables people from all over the world to connect, learn and share.

Uncover a range of popular topics including:
*   Connect   *   Share   *   Learn   *  Experience   *   Exchange   *

Project statement

IronHack was seeking for help to design a Service & Finance, knowledge-sharing experience. The main focus would be to define whether to take an App or Website approach, and decision after a big research was taken to go for an App. An App would allow the customer to control and interact with the whole TruekeToken Learn-Share-Connect ecosystem.

Project overview

The objective of this project is to design a product, following the design process thinking, that allows the user to learn, teach and exchange knowledge without fiat money involved thanks to the set of tools for integrated and holistic exchange of knowledge, learn and share experiences.

In order to do this we have the design thinking processes, used UX tools and techniques to understand the requirements and preferences of the users together with a set of UI tools that have enabled us to design this App.

Project goals

- key highlights

Become an established brand in the Service & Finance market

Create a loyal customer base

Establish trust and credibility through excellent service

Use technology to complement the online & in-live experience

Differentiate from competitors through innovation

Research methods

- key highlights

Customer interviews
Market research analysis
Prototype testing
Customer journey
Persona
Information architecture
& more

main challenges found in the research

- key highlights

1. Digital product that enables teach and learn

Users could not find a digital product that enables them to learn, teach and exchange hobbies and things that love to share at the same time. Now they can discover the things they love to do and people to do it with both online and in person.

2. an app to exchange knowledge and hobbies

An App where the user can learn and teach with no fiat money involved. Now user can discover local and online events, explore events by category, search by keyword, or see what’s popular in your area

3. an app to connect with the community around you

An App where you can connect and create a community based on knowledge and things you want to learn. Now you can host your own events online and in person by creating a group on your favorite topic or watch your community grow as your group is recommended to interested people.

key focus areas

- What are the challenges or barriers with app use & adoption?
- What’s important for a great app experience?
- What are areas customers' needs and unmet needs, both online and off?
- How are customers interacting with their smart phones in a regular basis?
- Lo-fi prototype feedback & more.

Core customer needs

- key highlights

Finding what’s right for me

So many products and customer archetypes, customers still need to feel like they belong and can find what they’re after with ease. Personalisation is an important feature for users with specific style of life and needs.

I need assistance

Some of the customer’s core frustrations are seen during their online experiences, being unable to find an App that gathers learning, teachings and a strong community to share them.

It better be worth the space

Customers are protective of their storage space and regularly cull apps they don’t use often. We had customers conduct a card sorting exercise and many more techniques described below to help us understand what is important to them in an app experience.

Product is key

Whether exploring new products or looking for something specific, product browsing is the key goal of any experience learning and teaching experience, and as such it must be well thought-out and intuitive to use. Without a traditional website to browse, it’s important that an app can service these core customer needs.

Following our customer interviews, we synthesized our findings and were able to create a customer journey and persona which were presented and discussed with the client. These exercises formed a great foundation to move into feature ideation and prioritisation.

Account creation

Designing a flexible set of steps that can capture the amount of data the user feels comfortable submitting—prioritising name, email and password fields—while leaving the door ajar for a customer to skip at any time.

Profile

Allowing customers to view their rewards, tier progress, benefits, profile settings and access their awards for online use.

PRODUCT BROWSE

Being a new App—product and brand discovery was an essential part of a users initial and ongoing app experience.

Life cycle emails

developing

We developed a series of life cycle emails that would engage the customer at different key moments of their journey. Emails were triggered at particular times and events to reward, motivate, retain and influence behaviour. Also there is a reward system for those learning to encourage them to teach and viceversa.

The UX & uI stages

The Design Thinking methodologY

Our Divided into four distinct phases – Discover, Define, Develop and Deliver – the Double Diamond is a simple visual map of the design process. In all creative process, a number of possible ideas are created divergent thinking before refining and narrowing down to the best idea convergent thinking. The Double Diamond indicates that this happens twice – once to confirm the problem definition and once to create the solution.

The new Double Diamond Model of Design Thinking display below.

The process to follow is key

Design Thinking is a step-wise process to be used to solve a problem and drive innovation. The digital products are built by us as a product team and are solutions to business and user needs. That's exactly what we have applied here.

Bellow we are going to highlight the most important processes, tools and techniques that we have followed at each stage of the App Design.

✸  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 UX Canvas

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 Surveys

Surveys

We wanted to highlight that with the surveys we did a series of questions or prompts that generates data points about user attitudes, in order to measure and categorize attitudes or collect self-reported data that can help track or discover important issues to address.

It also served as a domain research tool conducted to better understand how users or potential users think and feel about the industry or space in which our product fits.

✸  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 MoSCoW, the User Persona, the User Journey and the User Scenario

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 Leo, the skeptical!

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 Leo'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 Card Sorting

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 19 users for card sorting, we asked them to sort a maximum of 55 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

✸  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 and the 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

Brand Attributes

When we started thinking about our visual's identity, it was important to take some time to define the brand attributes, aka core values. Brand attributes are adjectives that represent the essence of our brand. Just like people, brands have personalities. Brand attributes are a set of human characteristics that identify the physical, character, and personality traits of our brand. This is similar to the attributes that allow us to consistently identify individuals.

How we defined the brand’s personality:
1- Started by looking at product-related characteristics such as the value proposition, target audience, price, and context.
2- Made a list of adjectives commonly used to describe people’s personalities.
3- Had our group rank and rate these attributes.

Bellow is an example of one of our Brand Attributes tests:

When people encounter a product or organization with incongruous personality traits, it undermines their sense of trust because they can’t find an accurate definition of what the company stands for.
The primary reason for defining brand attributes is to “define the type of customer experience you deliver.”

This process should influence the strategy for every touchpoint. The tone of marketing communications, content strategy, visual style, and even how staff dress should all be consistent with our brands personality.

Our brand attributes:
educative  -  colaborative  -  dynamic

✸  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; Picking Colour, fonts and icons; and define space, consistency, shadows and alignments to UI

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

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.

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 (20 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

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

learnings & Next steps

our customer

Trueke Token has been a very challenging project from the beginning. There was nothing like similar or close by this project in the market, an App to connect, create a community and exchange knowledge by teaching or learning with no fiat money involved but with an interexchange of tokens.
The idea was very original and well bought by our client. The UX research was key to understand that + 50% of people between 20 and 55 years old would like to connect with their community in different ways. Also we came to know that + 80% of people would like to learn something they like and in return teach something they like without necessarily having an economical monetary payment.
The UI was kept simple, slim and efficient to allow the customers to focus on the main objectives of the App.

The result is an easy to use App with all you need to learn, teach and enjoy while doing it!

Out of sight and out of mind

Our next steps for 2022 are: 1. to be able to expand this project to other communities around the world. Give the opportunity to all of you to investors to invest and be part of the Trueke Token community; 2. Create an Academy feature with tutorials and good practices created by the community about each area of knowledge; 3. Expansion beyond the European market. 4. Least but not last to link the tokens use in this App with Crypto-currency tokens in order to find financial support from the community.
I have to say that it has been a great challenge to work on this project, the potential of this App for 2022 and beyond is simply... huge!

PROJECT

Elements - Health & Well-Being

CATEGORY

App Creation & Design

client

IronHack

services

- UX Research
- UI Design
- MVP Product Delivered

process stages

Over 30 UX & 15 UI tools & techniques performed

year

2021

DURATION

15 days
Category: App Creation & Design —

Elements - Health & Well-Being

Discovering your unique you - mind, body & spirit, relieve stress, and find purpose with Elements - your total guide to well-being.

Take the next step on your journey with a new set of tools for integrated and holistic self-care. Uncover a range of popular topics including:
*   Confidence, Purpose & Success   *   Health, Weight & Increased Energy   *   Relationships & Connection   *   Creativity & Consciousness

Project statement

IronHack wanted our help to design and cultivate a Health & Well-Being experience. After a deep research the decision was pre-defined to go in the direction of a mobile app as their primary customer facing channel. An application would allow the customer to control and interact with the whole Elements Health & Well-Being ecosystem.

Project overview

The objective of this project is to design a product, following the design process thinking, that allows the user to transform their health & well-being, sleep better, relieve stress, and find purpose thanks to a new set of tools for integrated and holistic self-care.

In order to do this we have the design thinking processes, used UX tools and techniques to understand the requirements and preferences of the users together with a set of UI tools that have enabled us to design this App.

Project goals

- key highlights

Become an established brand in the Health & Well-Being market

Create a loyal customer base

Establish trust and credibility through excellent service

Use technology to complement the online & in-live experience

Differentiate from competitors through innovation

Research methods

- key highlights

Customer interviews
Market research analysis
Prototype testing
Customer journey
Persona
Information architecture
& more

main challenges found in the research

- key highlights

1. Digital product that enables Health & Well-Being IN A HOLISTIC WAY

Users could not find a digital product that enables them to easily access a holistic Health & Well-Being knowledge in one easy to use app. Empowering users to balance their bodies, revive their minds, and activate their spirits and find a pace on a path that suits them.

2. an app  to enhance your journey to integrated well-being

Everyone is entitled to a healthy and joyful life, to enhance your journey to integrated well-being.

3. an app to connect based on Health and well-being

Without an established presence yet, we weren't able to recruit existing Health&Well-Being customers, so reached out over 50 regular Health and Care customers from diverse fields to gain insights on their needs, motivations and frustrations to help shape the app solution.

key focus areas

- What are the challenges or barriers with app use & adoption?
- What’s important for a great app experience?
- What are areas customers' needs and unmet needs, both online and off?
- How are customers interacting with their smart phones in a regular basis?
- Lo-fi prototype feedback & more.

Core customer needs

- key highlights

Finding what’s right for me

With a myriad of products and customer archetypes, customers still need to feel like they belong and can find what they’re after with ease. Personalisation is an important feature for users with specific style of life and needs.

I need assistance

Some of the customer’s core frustrations are seen during their online experiences, being unimpressed with busy and un-interested health and care products and webs. With very little holistic health and Well-Being apps, it needs to be easy for users to find and access information they may not be able to online.

It better be worth the space

Customers are protective of their storage space and regularly cull apps they don’t use often. We had customers conduct a card sorting exercise and many more described below to help us understand what is important to them in an app experience.

Product is key

Whether exploring new products or looking for something specific, product browsing is the key goal of any experience tracking and shopping experience, and as such it must be well thought-out and intuitive to use. Without a traditional website to browse and purchase products, it’s important that an app can service these core customer needs.

Following our customer interviews, we synthesized our findings and were able to create a customer journey and persona which were presented and discussed with the client. These exercises formed a great foundation to move into feature ideation and prioritisation.

Account creation

Designing a flexible set of steps that can capture the amount of data the user feels comfortable submitting—prioritising name, email and password fields—while leaving the door ajar for a customer to skip at any time.

Profile

Allowing customers to view their rewards, tier progress, benefits, profile settings and access their barcode for future in-store ID scan.

PRODUCT BROWSE

Being a new App—product and brand discovery was an essential part of a users initial and ongoing app experience.

The UX & uI stages

Design Thinking methodology

Our Divided into four distinct phases – Discover, Define, Develop and Deliver – the Double Diamond is a simple visual map of the design process. In all creative process, a number of possible ideas are created divergent thinking before refining and narrowing down to the best idea convergent thinking. The Double Diamond indicates that this happens twice – once to confirm the problem definition and once to create the solution.

The new Double Diamond Model of Design Thinking display below.

The process to follow is key

Design Thinking is a step-wise process to be used to solve a problem and drive innovation. The digital products are built by us as a product team and are solutions to business and user needs. That's exactly what we have applied here.

Bellow we are going to highlight the most important processes, tools and techniques that we have followed at each stage of the App Design.

✸  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.

learnings & Next steps

our customer

Elements developed very well and smoothly through the entire process. We faced challenges since we wanted to differentiate our App for other Health and Well-Being Apps, our focus was always to give a very holistic App focusing on the costumer as the centre of the whole Elements environment.
The UI final layout came after several trails with the low-fi and mid-fi testing. A simple and minimalistic App to offer intuitive navigations and easy and understandable activity tracking, this outcome for sure was a challenged only solved with team work and costumer feedback.

Out of sight and out of mind

There were lots of though on what to include in our first MVP, out of sight and moving forward we will include: Doctors consultations through a new developed chat, products to include all ages specially the little ones and the positivily of online and live retreats. For sure... a new challenge to come!

PROJECT

FeverUp - Social Netw.& Booking Events

CATEGORY

Adding a new Feature

client

IronHack

services

- UX Research
- UI Design
- MVP Product Delivered

process stages

Over 30 UX & 15 UI tools & techniques performed

year

2021

DURATION

15 days
Category: App Creation & Design —

Elements - Health & Well-Being

Fever helps you discover what to do in your city, where to go and what to visit - Find exclusive events, secret places, and trendy pop-ups where you can enjoy new experiences.

Fever app recognizes your tastes and suggests the best personalized leisure offers, use the application to book and reserve tickets at the best price for all types of events:
*   Personalized recommendations based on your interests   *   Find nearby experiences and upcoming events   *   Save your favorite plans, pay safely in two clicks and get your mobile tickets   *   24/7 support via chat, phone or email

Project statement

IronHack&Fever wanted our help to design, add a feature and cultivate their brand's omni-channel experience. After a deep research the decision was pre-defined to go in the direction of a mobile app as their primary customer facing channel and adding feature.  Allowing the customer to control and interact with the whole Fever ecosystem, all from the customer’s smartphone.

Project overview

The objective of this project is to design a product adding a feature, following the design process thinking, that allows the user to transform their social networking & booking events thanks to a new set of tools for Fever.

In order to do this we have the design thinking processes, used UX tools and techniques to understand the requirements and preferences of the users together with a set of UI tools that have enabled us to design this App.

Project goals

- key highlights

Become an established brand in Social Networking & Booking events

Create a loyal customer base

Establish trust and credibility through excellent service

Use technology to complement the online & in-live experience

Differentiate from competitors through innovation

Research methods

- key highlights

Customer interviews
Market research analysis
Prototype testing
Customer journey
Persona
Information architecture
& more

main challenges found in the research

- key highlights

1. Digital product that enables book and reserve all types of events

Users could not find a digital product that enables them to find all type of local events and tickets at the best prices. Now they can discover the things they love to do and people to do it with both online and in person.

2. an app to share, meeat and enjoy common hobbies

An App where the user can share, meet and enjoy their best interests and hobbies. Now users can discover local and online events, explore events by category, search by keyword, or see what’s popular in your area, including personalized recommendations based on the users interests.

3. an app to connect with the community around you

An App where users can connect and create a community based on things you want to love. With the new feature the user can host their own events online and in person, also the new feature enables to chat and socialise before, during and after each event.

key focus areas

- What are the challenges or barriers with app use & adoption?
- What’s important for a great app experience?
- What are areas customers' needs and unmet needs, both online and off?
- How are customers interacting with their smart phones in a regular basis?
- Lo-fi and mid-fi prototype feedback & more.

Core customer needs

- key highlights

Finding what’s right for me

So many products and customer archetypes, customers still need to feel like they belong and can find what they’re after with ease. Personalisation is an important feature for users with specific style of life and needs.

I need assistance

Some of the customer’s core frustrations are seen during their online experiences, being unable to find an App that gathers learning, teachings and a strong community to share them.

It better be worth the space

Customers are protective of their storage space and regularly cull apps they don’t use often. We had customers conduct a card sorting exercise and many more techniques described below to help us understand what is important to them in an app experience.

Product is key

Whether exploring new products or looking for something specific, product browsing is the key goal of any experience learning and teaching experience, and as such it must be well thought-out and intuitive to use. It’s important that the app and browse can service these core customer needs.

Following our customer interviews, we synthesized our findings and were able to create a customer journey, persona, scenario and story which were presented and discussed with the client. These exercises formed a great foundation to move into feature ideation and prioritisation.

Account creation

Designing a flexible set of steps that can capture the amount of data the user feels comfortable submitting—prioritising name, email and password fields—while leaving the door ajar for a customer to skip at any time.

Profile

Allowing customers to view their rewards, tier progress, benefits, profile settings and access their awards for online use.

PRODUCT BROWSE

Being a new App—product and brand discovery was an essential part of a users initial and ongoing app experience.

Life cycle emails

developing

We developed a series of life cycle emails that would engage the customer at different key moments of their journey. Emails were triggered at particular times and events to reward, motivate, retain and influence behaviour. Also there is a reward system for those learning to encourage them to teach and viceversa.

The UX & uI stages

The Design Thinking methodologY

Our Divided into four distinct phases – Discover, Define, Develop and Deliver – the Double Diamond is a simple visual map of the design process. In all creative process, a number of possible ideas are created divergent thinking before refining and narrowing down to the best idea convergent thinking. The Double Diamond indicates that this happens twice – once to confirm the problem definition and once to create the solution.

The new Double Diamond Model of Design Thinking display below.

The process to follow is key

Design Thinking is a step-wise process to be used to solve a problem and drive innovation. The digital products are built by us as a product team and are solutions to business and user needs. That's exactly what we have applied here.

Bellow we are going to highlight the most important processes, tools and techniques that we have followed at each stage of the App Design.

✸  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.

Competitive Analysis
-App research

Competitive analysis provides both an offensive and defensive strategy in order to identify opportunities and threats in the current marketplace.

It also helps us focus on improving upon what already exists rather than reinventing the wheel.

The Competitive Analysis taken has analyzed both our current competition and potential competitors who might enter the market.

Competitive Analysis
-Web research

These charts helps us compare how the competitors implement specific features, allowing us to compare how competitors branding by looking at their value proposition, offering, target audience, name, logo, slogan, and brand personality.

✸  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

learnings & Next steps

our customer

Adding a new feature is always a challenge. In this case we did a deep study on ways to develop and improve feverUp App. The UX tools and techniques were key to understand that costumers would love to be able to communicate, chat and meet before, during and after each event they go to. Taking that into account we added that feature.
Also doing the competitive analysis we came through an important feature missing. The users could join events but they could not create events, this issue could position our App in a very weak position against competitors and also it is a high in demand feature nowadays (our surveys, interviews and market study demonstrated that).
Finally we decided and take the time-risk to add the ''event creation'' feature to our first MVP.
Our client was very happy with this final decision and from then on we could only work hard to achieve our goal!

Out of sight and out of mind

Looking forward we will include 1- Event creators networking - incl. tools, techniques and tips to share; 2- Find fevers, chat and propose them a new plan; 3- Experience blog. For sure added value options that will increase the success and costumer appealing to FeverUP!

PROJECT

Zorro bookstore - e-commerce

CATEGORY

Web re-Design

client

IronHack

services

- UX Research
- UI Design
- MVP Product Delivered

process stages

Over 30 UX & 15 UI tools & techniques performed

year

2021

DURATION

15 days
Category: App Creation & Design —

Elements - Health & Well-Being

Your favourite bookseller at your fingertips - If you are looking for holiday reading lists, gift ideas, have a look at our collections curated by the best book influencers out there. Great new features for readers and book lovers!

Take the next step on your journey with a new set of tools for integrated e-commerce and bookstore. Uncover a range of popular topics including:
*   Browse, buy or click & collect directly from the app or check stock in your local shop   *   Build multiple wish lists, great for saving items for later or building a gifting list   *   Read reviews from booksellers and customers and write your own   *   Share items with others by sending a link from the product screen

Project statement

IronHack&ZorroBookstore wanted our help to re-design and cultivate their brand's omni-channel experience. After a deep research the decision was pre-defined to go in the direction of re-build the website, to be used as their primary customer facing channel. Allowing the customer to control and interact with all the ZorroBookstore ecosystem.

Project overview

The objective of this project is to design a product, following the design process thinking, that allows the user to transform their e-commerce bookstore experience thanks to a host of useful features and a community of individual readers and book clubs, Zorro-bookstore has you covered.

In order to do this we have the design thinking processes, used UX tools and techniques to understand the requirements and preferences of the users together with a set of UI tools that have enabled us to design this App.

Project goals

- key highlights

Become an established brand in e-commerce bookstore & events

Create a loyal customer base

Establish trust and credibility through excellent service

Use technology to complement the online & in-live experience

Differentiate from competitors through innovation

Research methods

- key highlights

Customer interviews
Market research analysis
Prototype testing
Customer journey
Persona
Information architecture
& more

main challenges found in the research

- key highlights

1. Digital product that enables  reserve all types of books and events

Users could not find a digital product that enables them to find all type of local events and books at the best prices. Now they can discover the things they love to do and people to do it with both online and in person.

2. an app to share, meeat and enjoy books and events

Users could not find a digital product that enables them to find all type of local events and tickets at the best prices. A place where the user can share, meet and enjoy their best interests and hobbies. Now they can discover the things they love to do and people to do it with both online and in person.

3. a place to discover

Users can now discover new published books, local and online events, explore all of them by category, search by keyword, or see what’s popular in your area, including personalized recommendations based on the users interests.

key focus areas

- What are the challenges or barriers with the new re-designed website use & adoption?
- What’s important for a great website experience?
- What are areas customers' needs and unmet needs, both online and off?
- How are customers interacting with their laptops/tablets in a regular basis?
- Lo-fi and mid-fi prototype feedback & more.

Core customer needs

- key highlights

Finding what’s right for me

The markets offers so many products and we find such a variety of customer archetypes, that customers still need to feel like they belong and can find what they’re after with ease. Personalisation is an important feature for users with specific style and reading needs.

I need assistance

Some of the customer’s core frustrations are seen during their in-store experiences, being unimpressed with busy and un-interested floor staff as well as poor assistance and books and products availability. With only one store in place, it needs to be easy for users to find and access information they may not be able to in-store.

Product is key

Whether exploring new products or looking for something specific, product browsing is the key goal of any shopping experience, and as such it must be well thought-out and intuitive to use. Without a traditional website to browse and purchase products, it’s important that the new website can service these core customer needs.

Following our customer interviews, we synthesized our findings and were able to create a customer journey, persona, scenario and story which were presented and discussed with the client. These exercises formed a great foundation to move into feature ideation and prioritisation.

Life cycle emails

developing

We developed a series of life cycle emails that would engage the customer at different key moments of their journey. Emails were triggered at particular times and events to reward, motivate, retain and influence behaviour. Also there is a reward system for those learning to encourage them to teach and viceversa.

The UX & uI stages

The Design Thinking methodologY

Our Divided into four distinct phases – Discover, Define, Develop and Deliver – the Double Diamond is a simple visual map of the design process. In all creative process, a number of possible ideas are created divergent thinking before refining and narrowing down to the best idea convergent thinking. The Double Diamond indicates that this happens twice – once to confirm the problem definition and once to create the solution.

The new Double Diamond Model of Design Thinking display below.

The process to follow is key

Design Thinking is a step-wise process to be used to solve a problem and drive innovation. The digital products are built by us as a product team and are solutions to business and user needs. That's exactly what we have applied here.

Bellow we are going to highlight the most important processes, tools and techniques that we have followed at each stage of the App Design.

✸  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.

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 bookstores.

✸  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

learnings & Next steps

our customer

With the pressure of a tight budget and deadlines, it was difficult to redirect the clients focus from the next feature and onto the customer. We were able to get regular updates from customer support and analytics, but weren’t able to gather important qualitative feedback. This made it difficult to help our client make evidence based decisions with ongoing features. This isn't an uncommon issue, and wasn't solved from simply raising these issues in meetings. Running small workshops to discuss feature desirability of customers could have been an effective way to expose important unknowns and encourage directional research.

Understanding information architecture is a key element of digital product development. A good execution of the techniques will result in a product that promotes usability, facilitates the processes of understanding and assimilation of information, as well as the execution of user tasks, optimizing the user experience.

Out of sight and out of mind

The introduction of design systems within our agency's workflow was a relatively new aspect of our process and I had underestimated the success of its adoption. A design system needs constant reference, particularly when operating within teams that see regular change in personnel. A design system's success relies on a dedicated advocate.

There is a lot of potential in the e-commerce sector and this is a clear example on how good UX research and UI design can enhance the value of the commerce and make it very appealing for the customers and potential new ones!

PROJECT

Autonomous & EV Vehicles

CATEGORY

Product Design

client

Tata Motors

services

- UX Research
- UI Design
- MVP Product Delivered

process stages

Over 30 UX & 15 UI tools & techniques performed

year

2018-2019

DURATION

+ 1 year
Category: App Creation & Design —

Elements - Health & Well-Being

Understanding the Autonomous & EV Vehicles market-
Developing market solutions under the the Design thinking methodologies

PROJECT

Automotive Human Machine Interface (HMI)

CATEGORY

Product Design

client

Tata Motors

services

- UX Research
- UI Design
- MVP Product Delivered

process stages

Over 30 UX & 15 UI tools & techniques performed

year

2020-2021

DURATION

+ 1 year
Category: App Creation & Design —

Elements - Health & Well-Being

Understanding the Automotive Human Machine Interface (HMI) market -
Developing market solutions under the the Design thinking methodologies

client

IronHack

services

Uncover a range of popular topics including:

- Confidence, Purpose & Success

- Health, Weight & Increased Energy

- Relationships & Connection

- Creativity & Consciousness

- Personal & Spiritual Growth

year

2021

DURATION

15 days
Category: App Creation & Design —

Elements - Health & Well-Being

Discovering your unique you - mind, body & spirit, relieve stress, and find purpose with Elements - your total guide to well-being. Take the next step on your journey with a new set of tools for integrated and holistic self-care.

The Process

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Ellentesque sit amet odio nisi. Phasellus quis lorem leo. s, libero diam finibus tellus, at sagittis tellus eros vitae nisi. Sed dignissim augue sit amet diam laoreet venenatis. Aliquam bibendum erat eu nisi faucibus dignissim. Phasellus dignissim est tempor eros pulvinar luctus. Nam vulputate, risus a efficitur cursus, felis dolor vulputate mi, ac eleifend libero velit sed nunc.

The Result

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Ellentesque sit amet odio nisi. Phasellus quis lorem leo. s, libero diam finibus tellus, at sagittis tellus eros vitae nisi. Sed dignissim augue sit amet diam laoreet venenatis. Aliquam bibendum erat eu nisi faucibus dignissim. Phasellus dignissim est tempor eros pulvinar luctus. Nam vulputate, risus a efficitur cursus, felis dolor vulputate mi, ac eleifend libero velit sed nunc.

The End

Sed in justo ac leo sodales suscipit. Etiam rhoncus porta massa a volutpat. Vestibulum ultrices sollicitudin eleifend.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora inciduntCurabitur euismod pellentesque dapibus. Maecenas a pretium odio. Morbi porta congue tempus. Donec consequat condimentum ligula, id dapibus lorem tincidunt non.

Ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit.