Creating a good user-experience is all about process. A good UX process is flexible but smart, attuned to past experiences, aware of what succeeded and what didn’t, and, most importantly, is designed to bring out the best in people. My experience as a UX/Ui designer has enabled me to tighten and fine tune my process. Below are the 6 steps I follow:
Step 1: RESEARCH - Within the interactive design process, research helps establish the whos, whats, and wheres of a project. It is about about identifying the problem and exploring the parts that shape it. This is the detective work, the phase where a team asks questions like: What are the goals? Who are the users and what are their concerns? Who are the competitors? How do competitors address similar challenges? The results of the research help create a shared sense of purpose and a uniform vocabulary to help organize the team going forward.
Step 2: Sketching - Sketching is an essential part of my design process. The goal is to open up the conversation early and quickly block out a range of blue sky directions on either a dry erase wall or on paper and then loosely verify/develop those ideas with a team. The simplicity and informality of the process (no computers) opens up a space for people to collaborate. It also helps to bring up questions that could potentially go unanswered if it were left to one person working alone on a computer
Step 3: Wireframes & User-Flows - Wireframes and user-flows are where user-interfaces start to take shape. Here loose ideas from the sketching phase get wrangled into a uniform black and white architecture and an interconnected assortment of screens. The purpose is to present ideas to the clients in a neutral way, where the focus is on content and the user-experience, not the way it looks. Clients are then encouraged to comment and provide feedback. These comments help shape the direction going forward. My preference for wireframing technology is to use the software Sketch and Invision together, and, for more traditional approaches, the multi-purpose software Axure. I have also used Omnigraffle, the veteran industry standard.
Step 4: Prototyping - A prototype is, by definition, the likeness of an app without the labor of development. It is meant to be quick and is designed to be thrown away. This helps clarify the feel of an app by providing users with a simulated flow from one screen to the next. There are a host of tools available and plenty of arguments over what is and is not a prototype. The tools most often do one particular thing very well, but seldom achieve everything a user could hope for. Therefore, the questions that should go into selecting the right tool for the job are: What sort of fidelity does the prototype need? Should the journey be user-initiated or autoplay? Is it important to have a social component built in to communicate with a development team? Are nuanced animations going to play a significant role in the final product? In my experience, most are easy to learn and quick to implement. I like Proto.io, for complex projects with rudimentary animations. Pixate is also good; it has a better user-interface than Proto.io but, at this point, provides fewer options. Framer.js is good for nuanced micro-animations, and Invision is good for everyday verifying screen flows with tap states. I am also interested in experimenting more with Origami (Quartz Composer). For high-def auto play prototypes and informational videos, AfterEffects works great.
Step 5: User-Testing - Formal user-testing is one of the main reasons for creating prototypes. The goal is to get designs into the hands of users and then test to see how they respond. What distinguishes user-testing from customer research is that it removes the speculative aspect of designing. It turns a hypothetical user into an actual one. The benefit is that actual users come with a unique relationship to technology, and this relationship, when tested, can provide helpful and often humbling insights into how the general public will respond to the final product. It is important to remember that with a single user his/her behavior may reflect a unique quirk that is specific to the individual, but when there are patterns between users, meaning that two or more people stumble at the same place, this most likely represents a potential UX problem. The lesson is that it is better to fix problems early and avoid the unhappy discovery 4 months later after time, money, and energy have been invested. There are companies available that help with user-testing and provide heat maps, as well tools on the market, and of course DIY methods available to teams that are willing to get their hands dirty.
Step 6: Annotations - Written annotations help explain how user-interfaces work and help communicate complex interactions to developers and clients. Often they explain conditional situations that determine the shape of a user flow. It is very important part in quickening the development of a product and lessening the confusion that may come when handing over wireframes and design assets.