Sketching allows for the quick and easy exchange of ideas in a group setting. This is a time when the UX designer, project manager, and developers can explore outlandish ideas without sacrificing much time or effort. Sometimes the most innovative ideas can arise from group sketching.
Wireframing is an important step in the design process. Wireframes act as the blueprint for the design, connecting the IA to the visual design. They explain behaviors and flows — what goes where and how features interact with each other. A wireframe is helpful for all parties involved, and serves different purposes for different people. For designers, it explains the UI and contributes to the mockup process. For developers, it explains functionality and can assist with backend architecture. For clients/stakeholders, it provides reassurance that everything is being accounted for and the app is on track. Wireframes are typically grayscale or bluescale and, with the right tools, can be created relatively quickly.
Information Architecture is simply the structural design of shared information environments — the art and science of organizing and labelling. IA and wireframing go hand in hand. This is the point at which visual hierarchy is important and deciding the correct layout of content, copy, images, and icons is key.
Now that the exploration step is complete, the UX designer can take the notes, wireframes, and animations and begin creating style guides and high fidelity mockups to hand over to the developers.
Data Analysis is a key first step and one of the most important steps to assure that new features and/or redesigns are in sync with what users want and need. This step includes but is not limited to:
- Google Analytics to understand traffic, where users are coming from, and page load times.
- Heat mapping to learn about user habits and dead spots in the design.
- If user testing is in the budget, it’s a great way to setup a controlled group and discover user habits.
- Adding behavior based surveys to get users opinions on the usability of the current system.
- Record screencasts of real users using the current app with software like Appsee.
- Use of tools like Flurry to collect behavior based analytics.
There are a lot of ways to collect data, these are a few of my favorites. After collecting this data you will have a good foundation to build user stories and user flows off of.
User stories are the critical next phase in the preplanning step. The most important part of creating user stories is to create user personas. User personas include characteristics such as age, location, internet usage, title, and personal interests, among other things. One of the best ways to develop personas is through phone interviews with current users or through app profiles, if possible. After this information is gathered, the UX designer can begin creating user stories and use cases. These contextualize the user’s needs and find knowledge gaps that could be creating frustrations for end users. With this information the UX designer can begin creating user flows, which walk through tasks, step-by-step, to create an accurate understanding of how users will be using the app.
Now that the user data has been collected, the UX designer can begin creating user flows. This is really the first step in the design process. Once common workflows are mapped, red routes can be established. Every app has one or more red routes. These are the primary flows a user would take through the app to complete a task. These are important because they represent the primary focus of the app and should be prominent in the design. Note that although red routes are important, there is also a subset of tasks that need to be accounted for. Once the user flows are complete, they can be stacked together and joined with user stories to create real world user flows for different use cases. Taking account for all the users flows in a app can be a bit tedious but the more detail you account for in this phase the easier it will be to create your information architecture in the next.
With the preplanning step complete, the UX designer now has the necessary information to make educated decisions on design patterns.
Step Two: Exploration
Step two consists of: sketching, wireframing, information architecture, and prototyping. At this point, the UX designer uses the data collected from preplanning and begins to explore how users will interact with the app. This consists of identifying the layout, developing visual hierarchy, and deciding what belongs in each view. This is also a good point to start working with prototypes to build an understanding of how features will react and animate when users interact with the app.
Step Three: Design