UX - A Practical Approach and Tools used
UX - A practical approach and TOOLS / TECHNIQUES
https://www.toptal.com/designers/ux/10-common-ux-deliverables

In UX you choose a design problem and dive into it, you do research to get better understanding of who your users are and what they need? You do research, you apply you design and prototyping skills by covering user needs. You use evaluation methods like user testing, one on interviews, surveys or heuristic evaluations to access and improve the design and at the end you will produce the prototype which covers user needs and behavior.

Steps are : 
Collect business goals > Identify users and their needs (who,what,how and why) > Ideation and sketching > Prototyping – Low and high fidelity > User Testing > Heuristic evaluation – to narrow down best possible solution

Practical approach in detail : 

1. Collect Business goals and objectives
This is a fundamental step. For a UX professional it all starts with an understanding of the product vision, i.e. the reason for the product’s existence from a business perspective. Written in simple terms, the statement should include the problem being addressed, the proposed solution, and a general description of the target market. It should also describe the delivery platforms and touch lightly upon the technical means by which the product will be delivered.

It need not be longer than one page, but should describe the core of the What, Why and How. Here is an example: “The Fantastic App Co. has identified a gap in gift-giving applications on mobile platforms for the Millennial market (iOS and Android). A large number of Millennials have trouble remembering special dates, identifying the best gift, then finding and buying those gifts. Our solution is designed to alleviate that stress. Employing anticipatory design and the latest AI technologies the App delivers a useful and almost magical user experience.”

2. RESEARCH / DISCOVERY 

 a.Conduct consumer research:
Who is the app’s target audience?
What are their interests, needs, habits and lifestyles?
Why do they need an app like yours?

b. Conduct market research / Competitive Analysis
     Useful site URL : https://www.toptal.com/designers/ux/10-common-ux-deliverables

Analyse competitor’s apps. If you want to design an app for iPhone, for example, and you have a competitor with apps for both platforms, you can look at both designs for Android and iPhone.
Find effective and ineffective UX design solutions and patterns that have been used to implement those apps.
Analyse your competitor’s apps’ audience – who they are, what they need, and why they’re using those apps.

For anyone starting to design a new product, it’s vital to make sure it’s a good market fit. Crucially, as part of a UX strategy the product must also have a compelling competitive advantage and a UX that is superior to others in the marketplace.

Competitive analysis means: “Identifying your competitors and evaluating their strategies to determine their strengths and weaknesses relative to those of your own product or service.”

One of a UX designer’s initial tasks is to research what products or services the target customers are currently using to solve the problem. Is there an equivalent product or service out there? Is there an alternative solution people are using that’s good enough but not perfect? A Band-Aid—a vitamin but not a painkiller? How can better UX make a difference?

A component of user experience research, a competitive analysis report identifies the top five competitors and examines what it is they are doing right, as well as what they’re doing wrong. This step will help set a design direction where clear goals are defined and the elements to be focused on spelled out.


c. Conduct Survey
Let's validate quickly within a week of time—what % of our hypotheses are true by conducting a survey. Narrow down the primary age group, what they really do on WhatsApp, how much time they spend on, what are some of the features they use on daily basis, and what do they expect as the outcome to leverage their current experience. Since we're following agile having a very strict deadline, it's better to test existing designs...

d. Conduct stakeholder interviews: 
Ask your stakeholders for references, find out what they like and don’t like about competing apps, and ask what they would like to see in their ideal app. Make use of briefs, questionnaires, and moodboards.
Elicit your stakeholders’ business goals.

e. Contextual Inquiry (One on One Interview)
After receiving a good amount of insights via survey, we need to observe how user perform some of the tasks specifically at their workplace. This can help us to understand their mental models, how they post & manage properties, how technically good they are when it comes to technology, and to understand their behaviors & motivations.  Choose the users to interview and prepare task for them to test.

f. Heuristics Evaluation - current designs 
We can’t just proceed with the designs and launch without even knowing how many real estate brokers are going to use this app, and why? After getting the survey results, and talking with our product team and customers, we decided to conduct an expert review (heuristics) to evaluate our existing designs, which can help us to identify some of the usability issues first. 

The heuristics evaluation report can be captured using Airtable by following 10 heuristic principles.
Useful link - https://www.toptal.com/designers/usability/usability-analysis-how-to-run-a-heuristic-evaluation

Tools can be used 
AIRTABLE
- https://airtable.com/shr1oKn5HVdYr6gO9/tblZN3iS4kd9Iuixf/viwxbPncwwzGUm7v6


Based on the results, we can have a discussion with product team and present out findings in front of  leadership team or to the customer...

Here the Research part gets over and as the result of your research, you need to create “personas” or descriptions of imaginary users of your future app. You need to define their goals and needs and write user stories based on their goals and needs. User stories are short scenarios that describe how users will interact with your app.
Use all the findings above to create personas, user stories, empathy maps and story boards. 



3. EXPLORATION 


a. PERSONA 
Tools to create persona - persona template –  super simple to create.

A user persona is a character that represents a potential user of your website or app. In user centered-design, personas help the design team to target their designs around users.
 In user research, UXers will gather data related to the goals and frustrations of their potential users. Then, they create personas to put that data into context.

There is usually more than one type of user who will interact with your website or app, and creating personas helps to scope out the range of users. See an example of a persona here.

Create Persona based on the insights we gathered during our discovery stage; primary age group, motivation, frustrations, computer literacy level, social media, and based on their primary tasks. 

All the information collected during research phase is put into context in a user persona template – which is super simple to create. Remember, designers can only respond to their users’ needs once they know what those needs are.



b. EMPATHY MAP


c. DESIGN USE CASE - Design for the most common use case. As you know we’re going to design our product that should fulfill our primary persona than all users. In order solve our users' goals, we will be defining and prioritizing the most critical user flows along with rest of our flows to match our primary persona. We’re going call these important or critical user flows as red routes as identified by Dr. Travis as he pointed the analogy of the red route lanes could also be used for websites and mobile applications. 

We make sure we combine all user goals of our primary persona and break them into a series of user stories. Later, we'll try to match the user stories with our business requirements without forgetting its feasibilities, which is really an important factor for shipping. 

d. USER STORIES - User Story Map

A user story is a short statement or abstract that identifies the user and their need/goal. It determines who the user is, what they need and why they need it. There is usually one user story per user persona. 

For example: “As a UX Manager, John oversees all the design projects, including assets creation and prototyping efforts, at the design consultancy where he works. He needs easy access to a design tool that allows him to centralize UI libraries so that multiple designers to work simultaneously on a prototype.”

Benefits to your design process

User stories help to document practical information about users, such as the different needs and motivations for accessing a website or app. They also help the development team estimate a roadmap needed to deliver the end product.

How to write a user story
It’s super simple to write a user story. Codesqueeze has it down pat:
“As a [role], I want [feature] because [reason].”
For example: “As UX Manager, John wants centralized assets management so that his designers are in sync.”


We combined all user stories and stacked them as activities from red routes, broke them into tasks, and a series of user stories respectively. Original agile storyboard can be  created and managed using Jira that was linked up with Trello boards to add, modify and track stories as we worked along with our development team. 



4. INFORMATION ARCHITECTURE / NAVIGATION

Nothing like having a round of whiteboard sessions to churn out ideas, data, card sort, user flows, messages, information, user journeys, problems, and so on as quickly as possible, and with the help of our core product and engineering team. Also involve sales and marketing managers to be present during the whiteboard sessions in order to get feedback as quickly as possible. 

a. Design Sitemap
The sitemap could help us to think out loud by keeping the structure as simple as possible from both implementation and usage standpoints. With the help of sitemap, we could think of our mobile app's structure overhaul. 

b. User Flow
To save time, we can create rough sketches or wireframes having their unique numbers for reference and can create all the flows using Lucidchart.



5. DESIGN 

A. Create Wireframes using tools -  Illustrator / Photoshop / Axure and Balsamic.

B. Sketches - Sketch or photoshop

C. Style Guide - Create style guide of color swatches, fonts, icons, forms elements, messages, empty state, search design etc and share it with development team. You can also decide themes for your APP at this time.

D. Prototyping - You can use wireframes or actual screenshots depends upon the time you have to create interactive prototypes.

Tools for website interactive prototypes -  Create screenshots of all your wireframes or sketches and Use Invision tool for interactions

Tools for mobile Apps - Facebook's Origami, Sketch - those assets can be shared with engineering team with the help of Zeplin. Zeplin is really great as it converts all units from PX into DP for android development, and same thing for iOS as well by converting PX into PS. Also, Slack helps  to communicate, share, and collaborate ideas across all channels of ii5.  

Share your prototype with end users for testing. (use can also use Axure for creating interactions and sharing it with the team) 

After your prototype has been tested and approved, start working on your visual design:
Find an appropriate visual style using information from your research (design brief, moodboards, references).

Don’t forget about developers: use Zeplin or Avocode for sharing specifications and assets.


                    ---------------------------------------------------------------------------

Other Approach 

We split the sprint work into different phases where the whole team, not just developers, contribute to the feature development:

Step #1: Research (I do this in advance of the sprint)
I meet with the product owner, product manager, developer and a member of the customer team to review competitive research and direct user feedback we have received. We all rely heavily on an amazing tool called Productboard, which we highly recommend for organizing and prioritizing feedback from your users.

Step #2: Brainstorm (Again, done in advance of the sprint)
Based on the research and user feedback, we write down user stories, which summarizes who the user is and what the requirements are for the feature, and agreeing upon acceptance criteria, conditions that must need to be satisfied by the end-users. Acceptance criteria also plays an important role as written-down agreement on what need to be done for the team. The key role of the designer during this phase is to keep everyone focus on the right topic away from too much ideation.

Step #3: Sketch (Ideally, this is done ahead of the sprint as well)
Now this is the time for me to login to InVision and get to work. I love their new feature, Freehand; a simple solution for my site-mapping need. Once the sitemap successfully reflects all acceptance criteria, I move to Sketch for wireframing and high-fidelity design. I involve the product owner for each design stage to ensure we’re on the same page and I haven’t missed anything. Remember: a designer’s job is not just about working with color and pixels. It’s also to communicate product vision to the team.

Step #4: Develop
Developers are always involved in planning phases, therefore making this transition easier and faster. But, make sure you sit in the same room and go through the prototype as many times as needed to be on the same page. If there are disagreement or outstanding concerns that need further discussion, bring out the acceptance criteria and iterate with product owner.

Step #5: Test
The sprint isn’t complete without going through a complete checklist of test items. Are the buttons working? Does the screen redirect correctly? Acceptance criteria comes in again to play an important role here. Test each AC items. Everything has to work the way it was discussed. Be friends with developer and copywriter. They worked hard on the feature, too, so be mindful of that. (Don’t be a mean cat.)
Are there new findings that need to be fixed? But, they aren’t on the list of acceptance criteria? Don’t panic. Quickly discuss the scope of the fix and decide whether to address it now or later.

Step #6: Learn
This is where I haven’t successfully bought everyone in. Scrum can be rigid, especially on 2-week sprint cycle, so I struggle to find time to fit in data analysis, to user test and to explore feature enhancements.
As you can see, we do the research, brainstorming, and sketching at least one sprint ahead of time. We decided to take this approach to help the developers more accurately estimate the time needed to complete their work. It’s therefore my job to work with the product owner to get the feature sprint-ready for them, so they could dive right into it at the start of their 2-week sprint.

Step #7: Validate the processes with the whole team as frequently as possible. Keep the topic open for discussion at all times.

Giving feedback is fun.
Step #8: Keep record of feedback and be open-minded

Step #9: Be ready to adapt



              ------------------------------------------------------------------------------------------------------




Reference websites........

UX DOCUMENTS / TEMPLATES TO USE
http://www.uxforthemasses.com/resources/example-ux-docs/

https://www.justinmind.com/blog/best-free-app-design-resources-templates-tools-and-inspiration/

very very good site for checklists + documents & UX Design Methods & Deliverable
https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d
https://www.cxpartners.co.uk/our-thinking/big_list_of_ux_kpis_and_metrics/
https://www.toptal.com/designers/ux/10-common-ux-deliverables


Webinars on UX Strategy + Research + Agile + Lean UX + Collaborators + Design teams + UX Processes ..
https://www.uxpin.com/studio/webinars

Good site for Designers (UX)
https://www.toptal.com/designers/ux/10-common-ux-deliverables
https://www.toptal.com/designers/blog?page=2&vertical=designers

a. The 10 UX Deliverables Top Designers Use
https://www.toptal.com/designers/ux/10-common-ux-deliverables

b. eCommerce UX – Essential Design Strategies and Principles
https://www.toptal.com/designers/e-commerce/ecommerce-ux-design-principles

c.The 10 UX Deliverables Top Designers Use
https://www.toptal.com/designers/ux/10-common-ux-deliverables

d.eCommerce UX for the Mobile Experience
https://www.toptal.com/designers/ux/ecommerce-ux-mobile-experience



             -------------------------------------------------------------------------------------------------------



FOLLOW UX CHECKLIST 
reference from https://stayintech.com/UX-process-checklist
                        http://boxesandarrows.com/a-stakeholder-interview-checklist/

                        UX Matrics / KPI checklist
                       https://www.cxpartners.co.uk/our-thinking/big_list_of_ux_kpis_and_metrics/

Research
Define your target users.
What type of users are you designing for? You will need to know this when
recruiting users for research.

Choose your research methods.
What type of methods are suitable depends on how many people you want to involve in the research, how will you compensate them, what equipment you need, and what you want to learn.

Evaluate the current system.
In some cases it is useful to evaluate the strengths and weaknesses of the current system with e.g.a heuristic review.

User and stakeholder interviews.
Decide how you want to conduct the interviews, e.g. remotely or in-person? One-to-one is best, but this largely depends on your target users' availability and location.

Contextual interviews / Contextual inquiry
interviews are conducted in-person in the user's workspace, giving you the chance to observe their ongoing work.

Online surveys. - use surveymonkey
Good for gathering quantitative data from a large number of people.

Card sorting - use Trello
Users sort topics into meaningful groups, with the use of cards.
Useful for structuring content on large sites.

Usability testing.
Useful for evaluating how the existing solution should be improved. Can be done remotely or preferably one-to-one. Facilitator observes the users' behavior when using the site or application.

Interpret your findings.
Preferably analyze the interviews, surveys and other data in a small team, rather than alone, to get more insights and multiple perspectives.

Design & Test
Create personas.
While the use of
is often debated by experts, it might be useful for your team and client for empathizing with their users.

Storyboarding.
Create
in which the user uses the website or application to accomplish specific tasks. Useful for planning and visualizing features.

Prioritazion.
Facilitate prioritization of requirements. Useful for defining which features are important to the business, and which to the user. Also technical feasibility and resources need to be kept in mind.

Task flows and site maps.
Useful for identifying how the user will navigate through different sections of the site. Task flows illustrates the path your user takes to accomplish a task.

Useful for a simple visualization of the proposed structure of the user interface.

Useful for testing and validating your proposed functionality, before development.

Usability testing.
Can be done remotely or preferably in-person. Testing with
lets you find most of the major usability issues.

Compare different versions of the website to each other to determine which one performs better.

(Key Performance Indicators).
Analyze analytics for e.g. page views, conversion rates, and bounce rates. Also, keep track of social media impressions, revenue, churn rate, active users, amount of customer calls, etc.

Iterate.
UX design is not just a step in the development process. Iterate.



                --------------------------------------------------------------------------------------------------

Quick tool guide : 

- USER FLOW - Lucidchart.
- USER STORY - roadmap / Craft
- HEURISTIC - airtable
- CARD SORTING - trello
- WIREFRAMING - Axure / Adobe XD / Invision
- PROTOTYPING - Axure / Adobe XD / Invision


100 + Tools available 

A/B or Split Testing

Accessibility Testing

Design Prototyping

Evaluating Design

Evaluating Information Architecture


Heatmaps, Mouse-tracking or Synthetic Eye-tracking



In-application annotation & user tutorials


Live Chat with Users

Mobile App Testing Tools

Presentations

Process Aids

Remote Research
Ninjafeedback - amazing tool to get feedback from your friends for the designs you created... 

Research Notetaking

Screen Capture

Sketching & Visual Thinking


Surveying Users


Usability Testing


Web Analytics


Wireframing & Diagramming



UX TERMS / TOOLS USED
UX Strategy, UX Analytics/Metrics, Collaborators

1. UX Strategy 
Resource : Useful Website for 
https://uxdesign.cc/ux-user-research-and-user-testing-tools-2d339d379dc7


2. UX Analytics and tools used
Resource : Useful website link UX analytics + KPIs : 
https://www.cxpartners.co.uk/our-thinking/big_list_of_ux_kpis_and_metrics/

UX Tools for Analytics and Metrics


How do you track how users are interacting with your product? How do you then analyze that behavior and organize the insights that will inform your design decisions?
The list below shows some of our favorite tools for Analytics and Metrics, including some interesting solutions for A/B testing and for quantifying user interactions.

Our Favorite Analytics and Metrics Tools:

Crazy Egg /  HOT JAR 
 One of the simplest and most affordable heatmap tools we’ve ever heard of.

Good Data 
 Cloud-based B.I. solution that can provide useful reports combining multiple data sources.

KISSmetrics 
 A great analytics tool to create funnels and reports based on customer behavior in your website. Easy to set up and use.

Mix Panel 
 Analytics tool to measure engagement and customer retention. UI is great and they offer free plans.
Additional Tools:





3. Collaborators to share tasks with in small team

Our Favorite Tools for Random Daily Tasks:

Redpen.io 
 Drag and drop a jpg and quickly send a link to other designers to get comments and feedback.

Iceber.gs 
 Create and organize your personal library of references and ideas. The browser-based (and flat) Evernote.

Asana 
 A communication and task management tool for small teams that need to collaborate seamlessly.

Codepen.io 
 Quick and streamlined notepad tool for designers who like to play with HTML, CSS and JS.
Additional Tools:
UX Archive
Compare mobile user flows divided by category.
Google Drive
Docs, spreadsheets and presentations. No more MS Office.
Makesets
Create a collaborative list of links organized by theme.
QuickCast.io
Quickly record your screen and share a video.
Patterntap
UI references to inspire your creativity.
Trello
Project management for agile development and the cool kids.
Prezi 
A different way of presenting your work. Use with caution.
MozBar
Browser extension to check the status of your site’s SEO.



     ----------------------------------------------------------------------------------------------------------------





Useful links


Video Lecture on  

1. ROI Financial models - 
https://www.uxpin.com/studio/webinars/calculating-ux-roi-financial-models/

2. Scaling Ux Organisation - 
https://www.uxpin.com/studio/webinars/scaling-ux-organizations/
and blog : https://blog.routific.com/designing-process-in-a-growing-startup-191088bc64a2

3. All video lecture on Design Leadership
https://www.uxpin.com/studio/webinar-category/design-leadership/



EDX Courses Link

1. UX Design Process - 
https://courses.edx.org/courses/course-v1:MichiganX+UX509x+2T2017/courseware/93a7a1e5852f4854b77e4150c4271f95/07b39bfd479c4dc78569b73903b4234d/?child=first

2. User Needs - 
https://courses.edx.org/courses/course-v1:MichiganX+UX2+3T2016/courseware/858a815b44bd45248d418862b016955f/bb6d762684834f87890bf7041b583cf2/?activate_block_id=block-v1%3AMichiganX%2BUX2%2B3T2016%2Btype%40sequential%2Bblock%40bb6d762684834f87890bf7041b583cf2

3. User Testing - 
https://courses.edx.org/courses/course-v1:MichiganX+UX504x+1T2017/course/#block-v1:MichiganX+UX504x+1T2017+type@chapter+block@f72caefa4a214f2fa7a29251e891c6ba




1. Create Mobile APP from scratch
https://medium.freecodecamp.org/designing-beautiful-mobile-apps-from-scratch-1a3441ebd604?ref=uxdesignweekly

2. UX Process in startup companies
https://blog.routific.com/designing-process-in-a-growing-startup-191088bc64a2

3. How LEAN UX can help startups
https://www.crazyegg.com/blog/lean-ux-design-for-startups/

4. Top 10 UX Deliverable 
https://www.toptal.com/designers/ux/10-common-ux-deliverables

5. Tools used in day to day life of UX Designer
https://www.springboard.com/blog/ux-41-ux-tools-resources/

6. Google Analytics
https://conversionxl.com/blog/google-analytics-setup-101/

7. Free Google Analytics courses

8. How to get Maximum ROI from UX Learning
https://www.interaction-design.org/literature/article/how-do-i-get-the-maximum-roi-from-my-ux-learning-experiences

http://uxmovement.com/thinking/how-to-turn-user-research-into-usable-data/





















UX - A Practical Approach and Tools used
164
3,944
8
Published:

UX - A Practical Approach and Tools used

164
3,944
8
Published: