SlideShare a Scribd company logo
1 of 33
Download to read offline
(Replace with full screen background image) 
UX & UI Design 
Differentiate through design
(Replace with full screen background image) 
Why UX Matters 
With a UX focus we can build beautiful and desirable products, 
whether apps or mobile websites, differentiated by usefulness and 
usability. The Batmobile is an example of a product where the user 
experience is a crucial component. This durable vehicle has wheels, 
an engine and it can take you from point A to point B. But the thing 
is, if we at any certain point of the project only look at these features 
separately, we might as well end up with something completely 
different...
(Replace with full screen background image) 
Design is problem solving 
To design is to plan and make something for a specific use or 
purpose – design is problem solving. With a UX mindset we design 
for a user in a context, not for separate features in a list. The VW 
Camper is indeed, like the Batmobile, a very cool vehicle, and 
they both have many features in common (wheels, an engine, the 
ability to transport you between places, to name a few features for 
example). However, the usefulness and usability are optimized for 
totally different situations.
(Replace with full screen background image) 
Ultimate UX 
As UX professionals it is our responsibility to deliver the best possible 
user experience within the project constraints. 
By assigning a senior UX designer to lead as early as possible in 
the insights and planning phase, we ensure that UX is part of the 
planning and estimation and that the whole/full project of the app or 
mobile website has an optimized UX strategy.
Based on project specific aspects, the UX design lead will select 
a set of ideal UX activities and design deliverables. They then 
appropriately balance that against the project constraints, weighing 
in factors such as budget, time available, delivery deadlines, 
project life span, resource availability, information availability, related 
projects, access to tools and legal documentation, etc.
(Replace with full screen background image) 
UX is NOT a step in the process... 
...it is in everything we do. UX is more than anything a project 
philosophy, not just a set of tools, methods and deliverables. With 
a holistic approach of this type, UX will permeate all the steps of a 
project from planning through production to quality assurance. 
The key principle for a UX project is to ensure that we involve the 
users in the process. The beauty of this is that there is always some 
value that can be added, regardless of the project constraints. The 
trick is to work out how to make best use of your time.
(Replace with full screen background image) 
Something that looks great but is difficult to use is exemplary of great UI and poor UX. While something very 
usable that looks terrible is exemplary of great UX and poor UI 
UI complements the UX 
UX Design is a more analytical and technical field and UI 
complements the UX with look and feel and interactivity of a solution. 
In analogical terms, UI design produces a solutions’ skin. Both, UX 
and UI are crucial to a product and work closely together. 
The content is not only for viewing, but also to interact with, so UI 
Designers should also consider animations, transitions, gestures and 
device ergonomics in order to communicate the best possible way 
for users to access this content.
(Replace with full screen background image) 
In the screens above you can see examples for both, poor UI versus 
good UI solutions. In the first example the user’s experience when 
interacting with the interface will be affected by small type sizes and 
unclear call to action. In the second example the text is more legible 
due to choosing a proper type size for mobile devices. It’s also more 
clear for the user what is the main action expected from him by 
differentiating chromatically the buttons and guiding him to perform a 
specific task, in this case buying a product.
(Replace with full screen background image) 
6. USABILITY TESTING 
1. PLANNING & 
IDEATION 
2. UX/UI DESIGN 3. DEVELOPMENT 4. QA 5. MEASURE & 
ENHANCE 
Our Project Philosophy 
THE USER EXPERIENCE PROCESS
(Replace with full screen background image) 
MINI STANDARD FULL 
Level of UI customization 
Minimal UI Customization Minimal adaption of the native UI 
components. 
Moderate/Standard UI Customization A few selected components, 
animations or transitions will require the use of non-native solutions. 
Full UI Customization A large part of the UI design will need non-native 
components and/or a substantial amount of customization.
(Replace with full screen background image) 
SINGLE FOCUS TYPICAL FOCUS COMPLEX CONCEPT 
App Concept 
Single Focus Concept One main focus such as Notes or Reminders. 
Typical Concept One main purpose, but also a few more or less 
loosely related features. 
Complex Concept Complex apps that will need to accommodate 
complex information structures or multiple elaborate task sequences.
(Replace with full screen background image) 
The Production Team 
Ideally we want to work in small, agile cross-functional production 
teams starting from the very beginning of a project. This sets the 
scene for creative collaboration, fast turnover of ideas and allows 
skills from different knowledge areas to cross-pollinate. This in 
turn increases the general understanding of the product as well as 
guaranteeing all quality aspects. Many of the UX activities presented 
in the following pages should preferably involve all members of the 
production team, in addition to the client, when applicable.
(Replace with full screen background image) 
Scoping & Design 
All projects must have a dedicated scoping & design phase. During 
this planning phase it is all about understanding what we have been 
asked to do and working out the best combination of activities 
that will give us the outcome we need- within the time, budgetary 
and resource constraints of the project. The goal for this phase is 
to have a clear scope and design direction approved by the client, 
and an unambiguous roadmap for the production team to start the 
development.
A solid UX/UI work will 
result in… 
1. Better products. 
2. Cheaper to fix problems. 
3. Less risk. 
4. Better ability to deliver to deadline and avoid scope creep. 
5. Deeper insights. 
6. Products that are easy to use make more money. 
7. User-led projects can get products to market more quickly. 
8. Ease of use is a common customer requirement.
UX/UI 
Terminology 
Activities & Deliverables
(Replace with full screen background image) 
1. Stakeholder Interviews 
Prior to scoping and design most projects have a data gathering 
phase to understand the user, requirements and objectives. This 
phase includes stakeholder interviews and research but also other 
data gathering. E.g. usage data and demographics from an existing 
website or app. Hold individual talks with key stakeholders to 
understand the business requirements. This structured way to gain 
insights into the reasoning behind the project will result in invaluable 
findings.
(Replace with full screen background image) 
2. Expert Reviews 
Deeper evaluation of an application or website to indentify usability 
issues. It includes an evaluation of the efficiency of the flows and an 
assessment of the best practices in navigation, layout, behaviour, 
interface and others attributes.
(Replace with full screen background image) 
3. Requirements Workshop 
Gather key stakeholders together for a group discussion around the 
project brief and conduct group exercises designed to gain a deeper 
understanding of the project. Often the important insights come from 
the conversation itself, rather than the output of the exercise. 
A successful requirements workshop leads to a shared 
understanding of the project.
(Replace with full screen background image) 
4. Competitor Benchmarking 
A structured way of evaluating competitor products to determine 
their strengths and weaknesses and opportunities to innovate with 
your own product. 
The results may be presented as a spreadsheet checklist, a more 
detailed analysis or as annotated screenshots.
...to create and edit my profile. 
...to enter my account details. 
(Replace with full screen ...to store background my credit card image) 
information. 
...to select my current location. 
AS A USER I WANT... 
...to select my favorite locations. 5. User Stories 
User stories are short narrative texts that describe an interaction 
between the user and the app focusing on the value a user gains 
from the app. It also provides enough detail to make a reasonably 
low risk estimate of how long the story will take to implement. The 
user stories will benefit from being accompanied by an additional list 
of requirements and acceptance tests (according to a classic agile 
software development approach).
LAUNCH 101. SplashScreen 
ICON 
Background image 
(Replace with full screen background image) 
Brand Logo 
6. App Map & Information Architecture 
Presented as a high-level hierarchical diagram representing the 
information hierarchy within the app. This document is focused on 
what screens the app will contain and how the different screens are 
linked together by labeled arrows and boxes. 
201. Login Screen 
Remember password checkbox 
Access to Login 
Access to Remember Password 
Access to Skip 
301. Home Screen 
Shows images and information 
Swipe left to access to News 
Access to Search 
Access to Calendar 
After remember password 
First time
(Replace with full screen background image) 
Listen 
Events 
Radio 
Discover 
Label 
s 
Settings 
28 
Radio 
Smart Radio 
House 
Drum & Base 
Live Radio 
Techno 
Chill Out 
House 
Song Name 
Artist 
PURCHASE 
7. Wireframes 
Wireframes are schematic blueprints that represent an app as a 
skeletal framework. They show navigation structures, representative 
or dummy content, calls to action, dummy imagery, form elements 
and advert placement and they usually lack typographic style, color, 
and final imagery. This allows us to explore the content, navigation, 
and interactions separately from visual content.
Radio 
Smart Radio 
Live Radio 
(Replace with full screen background image) 
Listen 
Events 
Radio 
Discover 
Label 
s 
Settings 
28 
House 
Drum & Base 
8. Wireframe flow chart 
Techno 
Chill Out 
The Wireframe flow chart is a document containing interconnected 
wireframes. It describes at a high level of detail the main paths the 
user can take when interacting and navigating through the app.The 
wireframe flow chart should also cover the main user stories. 
House 
Song Name 
Artist 
PURCHASE 
Purchase Process 
Artist Name 
Album 
Description goes here. 
Full Name 
Card Number 
Expiration 
Month Year 
CVC 
Credit Debit 
$$$ BUY NOW
(Replace with full screen background image) 
9. Mood Board 
A mood board is a type of poster design that may consist of images, 
fonts and samples of objects in a free composition of any kind. 
When a client wants to create a new look & feel for a specific mobile 
solution (or no brand guidelines exists), a mood board is used to 
facilitate the communication between the project team and the client 
on what the graphical direction will be.
(Replace with full screen background image) 
10. Visual Design Mockups 
The visual design concept for the app will be presented in 3-5 high 
fidelity screen mockups representing the look and feel of the artwork 
of the final product. The mockups are likely to contain placeholder 
content instead of the real data and images; placeholder photos 
will later be replaced. The visual design concept captured in a few 
selected key screens will later be applied to all other screens of the 
app.
(Replace with full screen background image) 
11. Prototyping 
Low Fidelity Prototyping A technique where we quickly mockup 
ideas in an interactive form that brings them to life to elicit feedback. 
It could be a paper or digital format based on rough sketches or 
wireframes. 
High Fidelity Prototype Interactive tappable mockups presenting the 
main screens and main functionality of the app without real data.
(Replace with full screen background image) 
12. Graphical Assets 
The implementation of the app will require graphical assets to be 
extracted from the final design mockups. These graphical assets 
then need to be further adapted to match different screen resolutions 
depending on which platform(s) the app(s) will target. The amount 
of effort required to extract these graphical assets depends on the 
visual design of the app; some visual element can be implemented 
directly in code, while others need to be provided as image files.
(Replace with full screen background image) 
13. Design Implementation Guidelines 
This document serves as a guide for developers during the 
development phase when design specifications are needed for a 
pixel perfect implementation. 
These annotated screen representations specify measurements, 
positioning of elements, typographical information, colors etc. 
The implementation guidelines are always provided to the developers 
in all projects.
(Replace with full screen background image) 
14. Usability Testing 
The measured observation of users’ behavior when using your 
application. It will be an integral part of the UX process and doesn’t 
end at launch. With this process, the UX lead can explore concepts, 
terminology, navigation, content, page layout and functionality. 
Testing Materials Low Fidelity Prototyping, High Fidelity Prototyping 
and Real App.
(Replace with full screen background image) 
Types of Usability Testing 
Guerrilla Usability Testing Informal user involvement when little or no 
budget exists. 
Lab Usability Testing User involvement in a controlled environment. 
Contextual Usability Testing User involvement in the right 
environment. 
Remote Usability Testing Online user involvement. 
GUERRILLA 
USABILITY TESTING 
LAB 
USABILITY TESTING 
CONTEXTUAL 
USABILITY TESTING 
REMOTE 
USABILITY TESTING
15. Analytics 
Analytics will likely require a non-trivial investment in time plus 
close collaboration with the QA Team. These must eventually be 
implemented for us to be able to offer premium UX services to our 
clients.
1. Stakeholder Interviews Individual talks to gain a deeper understanding of 
requirements as part of prior research. 
2. Expert Reviews 
3. Requirements Workshop Bring project players together for insights on 
project requirements. 
4. Competitor Benchmarking Evaluate competition for weaknesses and 
opportunities. 
5. User Stories Short narrations describing interaction between user and app. 
6. App Map & Information Architecture High-level diagram representing 
information hierarchy and organisation of the app screens. 
7. Wireframes Schematic blueprints representing the skeletal framework. 
8. Wireframes flow chart Detailed information of the app navigation. 
9. Mood Board Poster design with images and text to communicate design 
concepts. 
10. Visual Design Mockups 3-5 high fidelity mock-ups representing the look 
and feel of the final product. 
11. Prototyping Interactive hi- or low-fidelity mockups. 
12. Graphical Assets The visual elements of the app adapted for each screen 
resolution and platform. 
13. Design implementation guidelines Document used to ensure perfect 
implementation of the visual elements during development. 
14. User Testing Measured observation of the users’ behaviour when engaging 
with the app. 
15. Types of Usability Testing Guerilla, lab, controlled and remote. 
16. Analytics Data used to measure and optimize. 
Summary
Fighting for a world 
full of mobile solutions 
since 2005 
web www.goldengekko.com 
email info@goldengekko.com

More Related Content

What's hot

UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It WorksAciron Consulting
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESJeremy Robinson
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignJoan Lumanauw
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaRoshan Karunarathna
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience? Dotinum
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentationaayush_jain_87
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui designShweta Joshi
 
Why UX #FAILS (with notes)
Why UX #FAILS (with notes)Why UX #FAILS (with notes)
Why UX #FAILS (with notes)Chris Feix
 
What is UX, in 10 Slides
What is UX, in 10 SlidesWhat is UX, in 10 Slides
What is UX, in 10 SlidesJordan Julien
 

What's hot (20)

What is UX?
What is UX?What is UX?
What is UX?
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
UX design
UX designUX design
UX design
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui design
 
What is UX design?
What is UX design? What is UX design?
What is UX design?
 
Why UX #FAILS (with notes)
Why UX #FAILS (with notes)Why UX #FAILS (with notes)
Why UX #FAILS (with notes)
 
What is UX?
What is UX?What is UX?
What is UX?
 
What is UX, in 10 Slides
What is UX, in 10 SlidesWhat is UX, in 10 Slides
What is UX, in 10 Slides
 

Viewers also liked

UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
 
A (Brief) History of User Experience
A (Brief) History of User ExperienceA (Brief) History of User Experience
A (Brief) History of User ExperienceChris Pallé
 
UX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesUX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesThink 360 Studio
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths Evan Samek
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSFSara Cannon
 
Onopia - Business Model de Dashlane
Onopia - Business Model de DashlaneOnopia - Business Model de Dashlane
Onopia - Business Model de DashlaneOnopia
 
The Truth About Lead Capture Forms
The Truth About Lead Capture FormsThe Truth About Lead Capture Forms
The Truth About Lead Capture FormsDrift
 
My 3 Biggest Discoveries of the Past 20 Years
My 3 Biggest Discoveries of the Past 20 YearsMy 3 Biggest Discoveries of the Past 20 Years
My 3 Biggest Discoveries of the Past 20 YearsDrift
 
Mobile First to AI First
Mobile First to AI FirstMobile First to AI First
Mobile First to AI FirstLaFrenchMobile
 
The 3 Stages of Hypergrowth
The 3 Stages of HypergrowthThe 3 Stages of Hypergrowth
The 3 Stages of HypergrowthDrift
 
Comment créer un produit en mode startup Agile @Digicoop - Maxime Bouroumeau-...
Comment créer un produit en mode startup Agile @Digicoop - Maxime Bouroumeau-...Comment créer un produit en mode startup Agile @Digicoop - Maxime Bouroumeau-...
Comment créer un produit en mode startup Agile @Digicoop - Maxime Bouroumeau-...Agile En Seine
 
Explorez votre potentiel de réussite grâce au Startup Founder Canvas
Explorez votre potentiel de réussite grâce au Startup Founder CanvasExplorez votre potentiel de réussite grâce au Startup Founder Canvas
Explorez votre potentiel de réussite grâce au Startup Founder CanvasMarseille Innovation
 
Startup 101 : voyage au pays des merveilles
Startup 101 : voyage au pays des merveillesStartup 101 : voyage au pays des merveilles
Startup 101 : voyage au pays des merveillesWilly Braun
 
Comment s'adapter à la croissance d'une startup ? (ConFoo 2017 Montréal)
Comment s'adapter à la croissance d'une startup ? (ConFoo 2017 Montréal)Comment s'adapter à la croissance d'une startup ? (ConFoo 2017 Montréal)
Comment s'adapter à la croissance d'une startup ? (ConFoo 2017 Montréal)Lucien Boix
 
Financer votre projet de startup - Le financement de l'innovation par BPI France
Financer votre projet de startup - Le financement de l'innovation par BPI FranceFinancer votre projet de startup - Le financement de l'innovation par BPI France
Financer votre projet de startup - Le financement de l'innovation par BPI FranceLa French Tech Rennes St Malo
 
Lean Startup Day - Atelier - Ce que veulent vraiment vos clients - Les probl...
Lean Startup Day  - Atelier - Ce que veulent vraiment vos clients - Les probl...Lean Startup Day  - Atelier - Ce que veulent vraiment vos clients - Les probl...
Lean Startup Day - Atelier - Ce que veulent vraiment vos clients - Les probl...Pragmatic Giraffe
 
#1 Startups Seminar
#1 Startups Seminar#1 Startups Seminar
#1 Startups SeminarMarcel EBOA
 
Comment s'articule l'écosystème de l'innovation en France ?
Comment s'articule l'écosystème de l'innovation en France ?Comment s'articule l'écosystème de l'innovation en France ?
Comment s'articule l'écosystème de l'innovation en France ?Justine Fradin
 

Viewers also liked (20)

UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
A (Brief) History of User Experience
A (Brief) History of User ExperienceA (Brief) History of User Experience
A (Brief) History of User Experience
 
UX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesUX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny Quotes
 
How to Teach UX Design
How to Teach UX DesignHow to Teach UX Design
How to Teach UX Design
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSF
 
Onopia - Business Model de Dashlane
Onopia - Business Model de DashlaneOnopia - Business Model de Dashlane
Onopia - Business Model de Dashlane
 
The Truth About Lead Capture Forms
The Truth About Lead Capture FormsThe Truth About Lead Capture Forms
The Truth About Lead Capture Forms
 
My 3 Biggest Discoveries of the Past 20 Years
My 3 Biggest Discoveries of the Past 20 YearsMy 3 Biggest Discoveries of the Past 20 Years
My 3 Biggest Discoveries of the Past 20 Years
 
Mobile First to AI First
Mobile First to AI FirstMobile First to AI First
Mobile First to AI First
 
The 3 Stages of Hypergrowth
The 3 Stages of HypergrowthThe 3 Stages of Hypergrowth
The 3 Stages of Hypergrowth
 
Comment créer un produit en mode startup Agile @Digicoop - Maxime Bouroumeau-...
Comment créer un produit en mode startup Agile @Digicoop - Maxime Bouroumeau-...Comment créer un produit en mode startup Agile @Digicoop - Maxime Bouroumeau-...
Comment créer un produit en mode startup Agile @Digicoop - Maxime Bouroumeau-...
 
Explorez votre potentiel de réussite grâce au Startup Founder Canvas
Explorez votre potentiel de réussite grâce au Startup Founder CanvasExplorez votre potentiel de réussite grâce au Startup Founder Canvas
Explorez votre potentiel de réussite grâce au Startup Founder Canvas
 
Startup 101 : voyage au pays des merveilles
Startup 101 : voyage au pays des merveillesStartup 101 : voyage au pays des merveilles
Startup 101 : voyage au pays des merveilles
 
Comment s'adapter à la croissance d'une startup ? (ConFoo 2017 Montréal)
Comment s'adapter à la croissance d'une startup ? (ConFoo 2017 Montréal)Comment s'adapter à la croissance d'une startup ? (ConFoo 2017 Montréal)
Comment s'adapter à la croissance d'une startup ? (ConFoo 2017 Montréal)
 
Financer votre projet de startup - Le financement de l'innovation par BPI France
Financer votre projet de startup - Le financement de l'innovation par BPI FranceFinancer votre projet de startup - Le financement de l'innovation par BPI France
Financer votre projet de startup - Le financement de l'innovation par BPI France
 
Lean Startup Day - Atelier - Ce que veulent vraiment vos clients - Les probl...
Lean Startup Day  - Atelier - Ce que veulent vraiment vos clients - Les probl...Lean Startup Day  - Atelier - Ce que veulent vraiment vos clients - Les probl...
Lean Startup Day - Atelier - Ce que veulent vraiment vos clients - Les probl...
 
4CAD Startup
4CAD Startup4CAD Startup
4CAD Startup
 
#1 Startups Seminar
#1 Startups Seminar#1 Startups Seminar
#1 Startups Seminar
 
Comment s'articule l'écosystème de l'innovation en France ?
Comment s'articule l'écosystème de l'innovation en France ?Comment s'articule l'écosystème de l'innovation en France ?
Comment s'articule l'écosystème de l'innovation en France ?
 

Similar to UX & UI Design - Differentiate through design

UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designMoodLabs
 
Methodology, Metrics And Measures For Testing And...
Methodology, Metrics And Measures For Testing And...Methodology, Metrics And Measures For Testing And...
Methodology, Metrics And Measures For Testing And...Trina Jackson
 
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Michelle Reyes
 
Unified user experience for toshiba products
Unified user experience for toshiba productsUnified user experience for toshiba products
Unified user experience for toshiba productsFlavio Fabiani
 
Get to know about UI/UX designing
Get to know about UI/UX designingGet to know about UI/UX designing
Get to know about UI/UX designingMenusha Pathirana
 
Recent UX Success
Recent UX SuccessRecent UX Success
Recent UX SuccessLou Susi
 
Responsive & Organic Design
Responsive & Organic DesignResponsive & Organic Design
Responsive & Organic DesignMirco Pasqualini
 
UXBASIS – Getting UX integrated
UXBASIS – Getting UX integratedUXBASIS – Getting UX integrated
UXBASIS – Getting UX integratedJames Kelway
 
Cross-functional team collaboration between Agile development and UX design
Cross-functional team collaboration between Agile development and UX designCross-functional team collaboration between Agile development and UX design
Cross-functional team collaboration between Agile development and UX designDug Falby
 
Portfolio of Wenzhu Zou
Portfolio of Wenzhu ZouPortfolio of Wenzhu Zou
Portfolio of Wenzhu ZouWenzhu Zou
 
User Centered Design
User Centered DesignUser Centered Design
User Centered DesignShawn Calvert
 
Mobile App Screens Designing Proposal PowerPoint Presentation Slides
Mobile App Screens Designing Proposal PowerPoint Presentation SlidesMobile App Screens Designing Proposal PowerPoint Presentation Slides
Mobile App Screens Designing Proposal PowerPoint Presentation SlidesSlideTeam
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideBabajide Aroyewun
 
User Interface Design Proposal Powerpoint Presentation Slides
User Interface Design Proposal Powerpoint Presentation SlidesUser Interface Design Proposal Powerpoint Presentation Slides
User Interface Design Proposal Powerpoint Presentation SlidesSlideTeam
 
UX Process | Collaborating with Engineering
UX Process | Collaborating with EngineeringUX Process | Collaborating with Engineering
UX Process | Collaborating with Engineeringinitialsjz
 
A Study on User Experience
A Study on User ExperienceA Study on User Experience
A Study on User ExperienceIRJET Journal
 
Building for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UXBuilding for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UXqixingz
 
HoytUX Design Process 2016
HoytUX Design Process 2016HoytUX Design Process 2016
HoytUX Design Process 2016Rob Hoyt
 

Similar to UX & UI Design - Differentiate through design (20)

UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through design
 
Methodology, Metrics And Measures For Testing And...
Methodology, Metrics And Measures For Testing And...Methodology, Metrics And Measures For Testing And...
Methodology, Metrics And Measures For Testing And...
 
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI
 
Unified user experience for toshiba products
Unified user experience for toshiba productsUnified user experience for toshiba products
Unified user experience for toshiba products
 
SAYAN14_HCI PDF.pptx
SAYAN14_HCI PDF.pptxSAYAN14_HCI PDF.pptx
SAYAN14_HCI PDF.pptx
 
Get to know about UI/UX designing
Get to know about UI/UX designingGet to know about UI/UX designing
Get to know about UI/UX designing
 
Recent UX Success
Recent UX SuccessRecent UX Success
Recent UX Success
 
Responsive & Organic Design
Responsive & Organic DesignResponsive & Organic Design
Responsive & Organic Design
 
UXBASIS – Getting UX integrated
UXBASIS – Getting UX integratedUXBASIS – Getting UX integrated
UXBASIS – Getting UX integrated
 
Cross-functional team collaboration between Agile development and UX design
Cross-functional team collaboration between Agile development and UX designCross-functional team collaboration between Agile development and UX design
Cross-functional team collaboration between Agile development and UX design
 
Portfolio of Wenzhu Zou
Portfolio of Wenzhu ZouPortfolio of Wenzhu Zou
Portfolio of Wenzhu Zou
 
Best Practices in UX Design
Best Practices in UX DesignBest Practices in UX Design
Best Practices in UX Design
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
 
Mobile App Screens Designing Proposal PowerPoint Presentation Slides
Mobile App Screens Designing Proposal PowerPoint Presentation SlidesMobile App Screens Designing Proposal PowerPoint Presentation Slides
Mobile App Screens Designing Proposal PowerPoint Presentation Slides
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
 
User Interface Design Proposal Powerpoint Presentation Slides
User Interface Design Proposal Powerpoint Presentation SlidesUser Interface Design Proposal Powerpoint Presentation Slides
User Interface Design Proposal Powerpoint Presentation Slides
 
UX Process | Collaborating with Engineering
UX Process | Collaborating with EngineeringUX Process | Collaborating with Engineering
UX Process | Collaborating with Engineering
 
A Study on User Experience
A Study on User ExperienceA Study on User Experience
A Study on User Experience
 
Building for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UXBuilding for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UX
 
HoytUX Design Process 2016
HoytUX Design Process 2016HoytUX Design Process 2016
HoytUX Design Process 2016
 

More from DMI

CX Audit Workshop
CX Audit WorkshopCX Audit Workshop
CX Audit WorkshopDMI
 
7 Trends & Insights MWC 2017
7 Trends & Insights MWC 20177 Trends & Insights MWC 2017
7 Trends & Insights MWC 2017DMI
 
DMI 2017 Mobile Trends
DMI 2017 Mobile TrendsDMI 2017 Mobile Trends
DMI 2017 Mobile TrendsDMI
 
DMI – World Gaming Executive Summit
DMI – World Gaming Executive SummitDMI – World Gaming Executive Summit
DMI – World Gaming Executive SummitDMI
 
DMI – We Can See the Future
DMI – We Can See the FutureDMI – We Can See the Future
DMI – We Can See the FutureDMI
 
Top 10 Trends at MWC16
Top 10 Trends at MWC16Top 10 Trends at MWC16
Top 10 Trends at MWC16DMI
 
Top 10 Trends for Winners in Mobile 2016
Top 10 Trends for Winners in Mobile 2016Top 10 Trends for Winners in Mobile 2016
Top 10 Trends for Winners in Mobile 2016DMI
 
Don't Mobilize Your Business – Reinvent It
Don't Mobilize Your Business – Reinvent ItDon't Mobilize Your Business – Reinvent It
Don't Mobilize Your Business – Reinvent ItDMI
 
Innovation through Hackathons
Innovation through HackathonsInnovation through Hackathons
Innovation through HackathonsDMI
 
Cambodian Life - Living and Working in Phnom Penh
Cambodian Life - Living and Working in Phnom PenhCambodian Life - Living and Working in Phnom Penh
Cambodian Life - Living and Working in Phnom PenhDMI
 
Mobile Application Security by Design
Mobile Application Security by DesignMobile Application Security by Design
Mobile Application Security by DesignDMI
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile SolutionsDMI
 
MWC 2015 - A Recap of the Key Announcements, Highlights and Trends
MWC 2015 - A Recap of the Key Announcements, Highlights and TrendsMWC 2015 - A Recap of the Key Announcements, Highlights and Trends
MWC 2015 - A Recap of the Key Announcements, Highlights and TrendsDMI
 
Top 8 Mobile Finance Trends 2015
Top 8 Mobile Finance Trends 2015Top 8 Mobile Finance Trends 2015
Top 8 Mobile Finance Trends 2015DMI
 
Top 8 Enterprise Mobility Trends 2015
Top 8 Enterprise Mobility Trends 2015Top 8 Enterprise Mobility Trends 2015
Top 8 Enterprise Mobility Trends 2015DMI
 
Top 10 Mobile Trends 2015
Top 10 Mobile Trends 2015Top 10 Mobile Trends 2015
Top 10 Mobile Trends 2015DMI
 
Winning the mobile user in 2015
Winning the mobile user in 2015Winning the mobile user in 2015
Winning the mobile user in 2015DMI
 
Golden Gekko presentation Google I/O 2014
Golden Gekko presentation Google I/O 2014Golden Gekko presentation Google I/O 2014
Golden Gekko presentation Google I/O 2014DMI
 
Golden Gekko Review of iOS8- for users and developers
Golden Gekko Review of iOS8- for users and developersGolden Gekko Review of iOS8- for users and developers
Golden Gekko Review of iOS8- for users and developersDMI
 
User Testing- guiding the way to success
User Testing- guiding the way to successUser Testing- guiding the way to success
User Testing- guiding the way to successDMI
 

More from DMI (20)

CX Audit Workshop
CX Audit WorkshopCX Audit Workshop
CX Audit Workshop
 
7 Trends & Insights MWC 2017
7 Trends & Insights MWC 20177 Trends & Insights MWC 2017
7 Trends & Insights MWC 2017
 
DMI 2017 Mobile Trends
DMI 2017 Mobile TrendsDMI 2017 Mobile Trends
DMI 2017 Mobile Trends
 
DMI – World Gaming Executive Summit
DMI – World Gaming Executive SummitDMI – World Gaming Executive Summit
DMI – World Gaming Executive Summit
 
DMI – We Can See the Future
DMI – We Can See the FutureDMI – We Can See the Future
DMI – We Can See the Future
 
Top 10 Trends at MWC16
Top 10 Trends at MWC16Top 10 Trends at MWC16
Top 10 Trends at MWC16
 
Top 10 Trends for Winners in Mobile 2016
Top 10 Trends for Winners in Mobile 2016Top 10 Trends for Winners in Mobile 2016
Top 10 Trends for Winners in Mobile 2016
 
Don't Mobilize Your Business – Reinvent It
Don't Mobilize Your Business – Reinvent ItDon't Mobilize Your Business – Reinvent It
Don't Mobilize Your Business – Reinvent It
 
Innovation through Hackathons
Innovation through HackathonsInnovation through Hackathons
Innovation through Hackathons
 
Cambodian Life - Living and Working in Phnom Penh
Cambodian Life - Living and Working in Phnom PenhCambodian Life - Living and Working in Phnom Penh
Cambodian Life - Living and Working in Phnom Penh
 
Mobile Application Security by Design
Mobile Application Security by DesignMobile Application Security by Design
Mobile Application Security by Design
 
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
10 Design Trends 2015 - UX & UI Trends for Mobile Solutions
 
MWC 2015 - A Recap of the Key Announcements, Highlights and Trends
MWC 2015 - A Recap of the Key Announcements, Highlights and TrendsMWC 2015 - A Recap of the Key Announcements, Highlights and Trends
MWC 2015 - A Recap of the Key Announcements, Highlights and Trends
 
Top 8 Mobile Finance Trends 2015
Top 8 Mobile Finance Trends 2015Top 8 Mobile Finance Trends 2015
Top 8 Mobile Finance Trends 2015
 
Top 8 Enterprise Mobility Trends 2015
Top 8 Enterprise Mobility Trends 2015Top 8 Enterprise Mobility Trends 2015
Top 8 Enterprise Mobility Trends 2015
 
Top 10 Mobile Trends 2015
Top 10 Mobile Trends 2015Top 10 Mobile Trends 2015
Top 10 Mobile Trends 2015
 
Winning the mobile user in 2015
Winning the mobile user in 2015Winning the mobile user in 2015
Winning the mobile user in 2015
 
Golden Gekko presentation Google I/O 2014
Golden Gekko presentation Google I/O 2014Golden Gekko presentation Google I/O 2014
Golden Gekko presentation Google I/O 2014
 
Golden Gekko Review of iOS8- for users and developers
Golden Gekko Review of iOS8- for users and developersGolden Gekko Review of iOS8- for users and developers
Golden Gekko Review of iOS8- for users and developers
 
User Testing- guiding the way to success
User Testing- guiding the way to successUser Testing- guiding the way to success
User Testing- guiding the way to success
 

Recently uploaded

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 

Recently uploaded (18)

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 

UX & UI Design - Differentiate through design

  • 1. (Replace with full screen background image) UX & UI Design Differentiate through design
  • 2. (Replace with full screen background image) Why UX Matters With a UX focus we can build beautiful and desirable products, whether apps or mobile websites, differentiated by usefulness and usability. The Batmobile is an example of a product where the user experience is a crucial component. This durable vehicle has wheels, an engine and it can take you from point A to point B. But the thing is, if we at any certain point of the project only look at these features separately, we might as well end up with something completely different...
  • 3. (Replace with full screen background image) Design is problem solving To design is to plan and make something for a specific use or purpose – design is problem solving. With a UX mindset we design for a user in a context, not for separate features in a list. The VW Camper is indeed, like the Batmobile, a very cool vehicle, and they both have many features in common (wheels, an engine, the ability to transport you between places, to name a few features for example). However, the usefulness and usability are optimized for totally different situations.
  • 4. (Replace with full screen background image) Ultimate UX As UX professionals it is our responsibility to deliver the best possible user experience within the project constraints. By assigning a senior UX designer to lead as early as possible in the insights and planning phase, we ensure that UX is part of the planning and estimation and that the whole/full project of the app or mobile website has an optimized UX strategy.
  • 5. Based on project specific aspects, the UX design lead will select a set of ideal UX activities and design deliverables. They then appropriately balance that against the project constraints, weighing in factors such as budget, time available, delivery deadlines, project life span, resource availability, information availability, related projects, access to tools and legal documentation, etc.
  • 6. (Replace with full screen background image) UX is NOT a step in the process... ...it is in everything we do. UX is more than anything a project philosophy, not just a set of tools, methods and deliverables. With a holistic approach of this type, UX will permeate all the steps of a project from planning through production to quality assurance. The key principle for a UX project is to ensure that we involve the users in the process. The beauty of this is that there is always some value that can be added, regardless of the project constraints. The trick is to work out how to make best use of your time.
  • 7. (Replace with full screen background image) Something that looks great but is difficult to use is exemplary of great UI and poor UX. While something very usable that looks terrible is exemplary of great UX and poor UI UI complements the UX UX Design is a more analytical and technical field and UI complements the UX with look and feel and interactivity of a solution. In analogical terms, UI design produces a solutions’ skin. Both, UX and UI are crucial to a product and work closely together. The content is not only for viewing, but also to interact with, so UI Designers should also consider animations, transitions, gestures and device ergonomics in order to communicate the best possible way for users to access this content.
  • 8. (Replace with full screen background image) In the screens above you can see examples for both, poor UI versus good UI solutions. In the first example the user’s experience when interacting with the interface will be affected by small type sizes and unclear call to action. In the second example the text is more legible due to choosing a proper type size for mobile devices. It’s also more clear for the user what is the main action expected from him by differentiating chromatically the buttons and guiding him to perform a specific task, in this case buying a product.
  • 9. (Replace with full screen background image) 6. USABILITY TESTING 1. PLANNING & IDEATION 2. UX/UI DESIGN 3. DEVELOPMENT 4. QA 5. MEASURE & ENHANCE Our Project Philosophy THE USER EXPERIENCE PROCESS
  • 10. (Replace with full screen background image) MINI STANDARD FULL Level of UI customization Minimal UI Customization Minimal adaption of the native UI components. Moderate/Standard UI Customization A few selected components, animations or transitions will require the use of non-native solutions. Full UI Customization A large part of the UI design will need non-native components and/or a substantial amount of customization.
  • 11. (Replace with full screen background image) SINGLE FOCUS TYPICAL FOCUS COMPLEX CONCEPT App Concept Single Focus Concept One main focus such as Notes or Reminders. Typical Concept One main purpose, but also a few more or less loosely related features. Complex Concept Complex apps that will need to accommodate complex information structures or multiple elaborate task sequences.
  • 12. (Replace with full screen background image) The Production Team Ideally we want to work in small, agile cross-functional production teams starting from the very beginning of a project. This sets the scene for creative collaboration, fast turnover of ideas and allows skills from different knowledge areas to cross-pollinate. This in turn increases the general understanding of the product as well as guaranteeing all quality aspects. Many of the UX activities presented in the following pages should preferably involve all members of the production team, in addition to the client, when applicable.
  • 13. (Replace with full screen background image) Scoping & Design All projects must have a dedicated scoping & design phase. During this planning phase it is all about understanding what we have been asked to do and working out the best combination of activities that will give us the outcome we need- within the time, budgetary and resource constraints of the project. The goal for this phase is to have a clear scope and design direction approved by the client, and an unambiguous roadmap for the production team to start the development.
  • 14. A solid UX/UI work will result in… 1. Better products. 2. Cheaper to fix problems. 3. Less risk. 4. Better ability to deliver to deadline and avoid scope creep. 5. Deeper insights. 6. Products that are easy to use make more money. 7. User-led projects can get products to market more quickly. 8. Ease of use is a common customer requirement.
  • 16. (Replace with full screen background image) 1. Stakeholder Interviews Prior to scoping and design most projects have a data gathering phase to understand the user, requirements and objectives. This phase includes stakeholder interviews and research but also other data gathering. E.g. usage data and demographics from an existing website or app. Hold individual talks with key stakeholders to understand the business requirements. This structured way to gain insights into the reasoning behind the project will result in invaluable findings.
  • 17. (Replace with full screen background image) 2. Expert Reviews Deeper evaluation of an application or website to indentify usability issues. It includes an evaluation of the efficiency of the flows and an assessment of the best practices in navigation, layout, behaviour, interface and others attributes.
  • 18. (Replace with full screen background image) 3. Requirements Workshop Gather key stakeholders together for a group discussion around the project brief and conduct group exercises designed to gain a deeper understanding of the project. Often the important insights come from the conversation itself, rather than the output of the exercise. A successful requirements workshop leads to a shared understanding of the project.
  • 19. (Replace with full screen background image) 4. Competitor Benchmarking A structured way of evaluating competitor products to determine their strengths and weaknesses and opportunities to innovate with your own product. The results may be presented as a spreadsheet checklist, a more detailed analysis or as annotated screenshots.
  • 20. ...to create and edit my profile. ...to enter my account details. (Replace with full screen ...to store background my credit card image) information. ...to select my current location. AS A USER I WANT... ...to select my favorite locations. 5. User Stories User stories are short narrative texts that describe an interaction between the user and the app focusing on the value a user gains from the app. It also provides enough detail to make a reasonably low risk estimate of how long the story will take to implement. The user stories will benefit from being accompanied by an additional list of requirements and acceptance tests (according to a classic agile software development approach).
  • 21. LAUNCH 101. SplashScreen ICON Background image (Replace with full screen background image) Brand Logo 6. App Map & Information Architecture Presented as a high-level hierarchical diagram representing the information hierarchy within the app. This document is focused on what screens the app will contain and how the different screens are linked together by labeled arrows and boxes. 201. Login Screen Remember password checkbox Access to Login Access to Remember Password Access to Skip 301. Home Screen Shows images and information Swipe left to access to News Access to Search Access to Calendar After remember password First time
  • 22. (Replace with full screen background image) Listen Events Radio Discover Label s Settings 28 Radio Smart Radio House Drum & Base Live Radio Techno Chill Out House Song Name Artist PURCHASE 7. Wireframes Wireframes are schematic blueprints that represent an app as a skeletal framework. They show navigation structures, representative or dummy content, calls to action, dummy imagery, form elements and advert placement and they usually lack typographic style, color, and final imagery. This allows us to explore the content, navigation, and interactions separately from visual content.
  • 23. Radio Smart Radio Live Radio (Replace with full screen background image) Listen Events Radio Discover Label s Settings 28 House Drum & Base 8. Wireframe flow chart Techno Chill Out The Wireframe flow chart is a document containing interconnected wireframes. It describes at a high level of detail the main paths the user can take when interacting and navigating through the app.The wireframe flow chart should also cover the main user stories. House Song Name Artist PURCHASE Purchase Process Artist Name Album Description goes here. Full Name Card Number Expiration Month Year CVC Credit Debit $$$ BUY NOW
  • 24. (Replace with full screen background image) 9. Mood Board A mood board is a type of poster design that may consist of images, fonts and samples of objects in a free composition of any kind. When a client wants to create a new look & feel for a specific mobile solution (or no brand guidelines exists), a mood board is used to facilitate the communication between the project team and the client on what the graphical direction will be.
  • 25. (Replace with full screen background image) 10. Visual Design Mockups The visual design concept for the app will be presented in 3-5 high fidelity screen mockups representing the look and feel of the artwork of the final product. The mockups are likely to contain placeholder content instead of the real data and images; placeholder photos will later be replaced. The visual design concept captured in a few selected key screens will later be applied to all other screens of the app.
  • 26. (Replace with full screen background image) 11. Prototyping Low Fidelity Prototyping A technique where we quickly mockup ideas in an interactive form that brings them to life to elicit feedback. It could be a paper or digital format based on rough sketches or wireframes. High Fidelity Prototype Interactive tappable mockups presenting the main screens and main functionality of the app without real data.
  • 27. (Replace with full screen background image) 12. Graphical Assets The implementation of the app will require graphical assets to be extracted from the final design mockups. These graphical assets then need to be further adapted to match different screen resolutions depending on which platform(s) the app(s) will target. The amount of effort required to extract these graphical assets depends on the visual design of the app; some visual element can be implemented directly in code, while others need to be provided as image files.
  • 28. (Replace with full screen background image) 13. Design Implementation Guidelines This document serves as a guide for developers during the development phase when design specifications are needed for a pixel perfect implementation. These annotated screen representations specify measurements, positioning of elements, typographical information, colors etc. The implementation guidelines are always provided to the developers in all projects.
  • 29. (Replace with full screen background image) 14. Usability Testing The measured observation of users’ behavior when using your application. It will be an integral part of the UX process and doesn’t end at launch. With this process, the UX lead can explore concepts, terminology, navigation, content, page layout and functionality. Testing Materials Low Fidelity Prototyping, High Fidelity Prototyping and Real App.
  • 30. (Replace with full screen background image) Types of Usability Testing Guerrilla Usability Testing Informal user involvement when little or no budget exists. Lab Usability Testing User involvement in a controlled environment. Contextual Usability Testing User involvement in the right environment. Remote Usability Testing Online user involvement. GUERRILLA USABILITY TESTING LAB USABILITY TESTING CONTEXTUAL USABILITY TESTING REMOTE USABILITY TESTING
  • 31. 15. Analytics Analytics will likely require a non-trivial investment in time plus close collaboration with the QA Team. These must eventually be implemented for us to be able to offer premium UX services to our clients.
  • 32. 1. Stakeholder Interviews Individual talks to gain a deeper understanding of requirements as part of prior research. 2. Expert Reviews 3. Requirements Workshop Bring project players together for insights on project requirements. 4. Competitor Benchmarking Evaluate competition for weaknesses and opportunities. 5. User Stories Short narrations describing interaction between user and app. 6. App Map & Information Architecture High-level diagram representing information hierarchy and organisation of the app screens. 7. Wireframes Schematic blueprints representing the skeletal framework. 8. Wireframes flow chart Detailed information of the app navigation. 9. Mood Board Poster design with images and text to communicate design concepts. 10. Visual Design Mockups 3-5 high fidelity mock-ups representing the look and feel of the final product. 11. Prototyping Interactive hi- or low-fidelity mockups. 12. Graphical Assets The visual elements of the app adapted for each screen resolution and platform. 13. Design implementation guidelines Document used to ensure perfect implementation of the visual elements during development. 14. User Testing Measured observation of the users’ behaviour when engaging with the app. 15. Types of Usability Testing Guerilla, lab, controlled and remote. 16. Analytics Data used to measure and optimize. Summary
  • 33. Fighting for a world full of mobile solutions since 2005 web www.goldengekko.com email info@goldengekko.com