Sign Up And Receive My Latest Tips & Updates!
.svg){kind=small}
PROJECT
CATEGORY
client
services
- UI Design
- MVP Product Delivered
process stages
year
DURATION
Zorro Bookstore - e-commerce
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
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
CATEGORY
client
services
- UI Design
- MVP Product Delivered
process stages
year
DURATION
Zorro Bookstore - e-commerce
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
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
CATEGORY
client
services
- UI Design
- MVP Product Delivered
process stages
year
DURATION
Zorro Bookstore - e-commerce
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
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
CATEGORY
client
services
- UI Design
- MVP Product Delivered
process stages
year
DURATION
Zorro Bookstore - e-commerce
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
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
CATEGORY
client
services
- UI Design
- MVP Product Delivered
process stages
year
DURATION
Zorro Bookstore - e-commerce
Understanding the Autonomous & EV Vehicles market-
Developing market solutions under the the Design thinking methodologies
PROJECT
CATEGORY
client
services
- UI Design
- MVP Product Delivered
process stages
year
DURATION
Zorro Bookstore - e-commerce
Understanding the Automotive Human Machine Interface (HMI) market -
Developing market solutions under the the Design thinking methodologies
Zorro Bookstore - e-commerce
Zorro bookstore is an Web super guaia y super molona, ese es el Project Sumary
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.
