To demonstrate UX process approach I have chosen NTPEP. Though UX process varies according to application, scope, target audience and many other factors, but generally I practice following process.
“Before you can solve a problem, you have to understand a problem”.
First thing first principal, I thoroughly analyzed the existing NTPEP application, identified different usability issues, meetings with domain experts, did continuous sessions of heuristic evaluations and cognitive walk-through etc. Meetings with key stakeholders to get the fresh requirements incorporated into the system. As a general principal, understanding the problem and objectives should emphasis more than implementation and solutions.
After clear understanding of problems and objectives, research is considered to be the next step in user experience design by numerous specialists and industry best practices. There are two ways to conduct a research:
Search google for similar applications, competitor’s product, competitive analysis in-terms of features, marketing, customers and ease of use etc.
For NTPEP, there was no direct competitor was there, so I just conducted the informal competitive analysis to get some information that can help to design a better UX product.
Identify and think about your real users, who they are, where they are from?
Both researches have their own importance but later is more trustworthy and invaluable in UX processes.
In apropos to NTPEP application, my users were mainly from engineering background, different vendors and suppliers, contractors and manufacturers, lab people, AASHTO managers, state users and testing facilities managers etc.
After research and user identification, next step is to ascertain user personas. “Personas are fictional characters created to represent user types that might use the application or product in a similar way.”
Personas creation typically focuses on user behaviours and objectives. They are based on field research and real people.
For NTPEP, I have created different personas, based on age, gender, profession, job role, likes/dislikes etc.
After problem definition, an objective, user research and personas, the next step is to define user scenarios based on user personas. For that, it’s ideal to have all stakeholders like PM, QA, developers, designers, UX people to participate and define what every user tend to do.
In NTPEP, I had identified and bifurcated different user scenarios based on user personas like:
- View NTPEP as anonymous user
- Search applications as anonymous user
- Search products as anonymous user
- View and filter public historic data of manufacturers
- Signup process of manufacturer
- Application submission process of manufacturers
- Application submission of products
- Application submission of Audits
- Approve/reject application as AASHTO user
- Invoicing to manufacturer as AASHTO user
- Test results compilation as Testing facility
- User management as AASHTO user
- Library management as AASHTO user
- Events organization as AASHTO user
The purpose of all of this exercise is to divide the larger system into small and viable pieces based on user personas and objectives.
For big application with a lot of data and user scenarios like NTPEP, it is vital to combine all user scenarios in such a way that smooth flow for users from one point to another without refracting the user goals and scope. All this belongs to information architecture.
Sitemaps were introduced in larger websites long before UX methodologies and their intention is to prevent users to get lost. As NTPEP is role based applications with many user flows, it was necessary to build and maintain sitemaps.
All UX designer including myself love to do wireframes, the starting point where UX designers can show the graphical imprint of the product. Wireframe provides the skeletal structure of the product and combines elements in particular order to represent any task.
Wireframes are less time consuming and focused more on UX. They give fewer details about colours, font sizes, element’s sizes, position and their placement etc.
For more complex applications wireframes are recommended. In NTPEP, wireframes were made for all the basic and initial designs.
Mockups are designed on top of wireframes and represent visual aspect in more depth like fonts, colours, iconography and other UI patterns etc.
Mock-ups are primarily used to showcase the design more close to its final appearance. In NTPEP, for all the user scenarios and flows based on all different user roles, mock-ups are created using MS Visio.
Interactive prototypes and UI
Normally a prototype is an interactive deliverable with fake data that’s work exactly like original product. In NTPEP, I designed and built interactive prototypes using Twitter bootstrap. Defined style guidelines, common UI patterns for all required elements, colour and imagery assets etc.