Process

The best way to ensure a successful product is to go through the correct process. The process I prefer is based in user-centered design, where the user is defined and their needs are made clear, the goals of the client are examined and itemized, and both are married to influence the final outcome throughout the process. This method helps to discover issues quickly, typically before development even begins. This saves time and money getting the product to market.

1. Meet with the stakeholder

placeholder
We can meet onsite or remote using video chat to discuss your project

Once a project is contracted, I meet with the stakeholder to assess their needs. In this meeting I:

  • Gather information on the intended product
  • Begin to define the primary and secondary audiences/users (based on assumption at this point)
  • Collect any existing materials and content that may need to be considered in the project
  • Set expectations for the first round of design

2. Perform research

placeholder
The entire team benefits from better understanding the user

I begin by researching and defining the user. It is important to the success of the project to have a full understanding of the needs of who the end product will need to satisfy. This may include creating surveys for or scheduling meeting with real users to define needs and understand pain points. From this research I can develop personas for a handful of target users to stand in for the user during development. Everyone included in a project benefits from better understanding the user.

3. Develop user flows & Information Architecture

placeholder
User flows discover questions and issues to resolve before anything is built and act as roadmaps for developers

Next I draft an overview of every path the user might take through the product from the current point of understanding. The first concept and following iterations are a fast and simple way to get a better understanding of what will needs to be built. This is also where the initial problems or questions arise and can be asked and resolved before a single line of code has been written. The user flow will also create a roadmap for development of the process. The user flow is iterated through the lifecycle of the product.

From the user flows we will undertand the:

  • Number of "pages" there will be in the product
  • Type of content will be needed for each page
  • What interactions will be needed to traverse the product
  • If/How we can componentize interactions and content

From what has been learned from the user flow iterations the information architecture can be developed. The IA, paired with the user flow will help the content developer collect and create content more easily. The IA also helps developers by creating a list of all the needed components, again, before any code has been written.

4. UI Ideation/Iteration

placeholder
Sketching is a fast and inexpensive way to develop ideas – Read more – 'Finding Ideas Through Sketching'

I start by creating paper and pencil (or tablet & stylus) sketches of different user interface design concepts. Depending on the scope of the project, these sketches can number in the dozens to the hundreds. From there, I narrow down the best concepts for the project based on the wants of the client and the needs of the user. These sketches are submitted to the client for review and feedback.

The fidelity of these sketches typically starts as wireframes. User testing can start with any level of fidelity. But starting testing with wireframes we can start to get user feedback on interactions and layout before any aesthetic decisions have been made. The act of creating the UI concepts as well as testing will help to find additional unseen issues or missing features as well as validate early successes in the product.

5. Style Guide

placeholder
This is the LonelyPlanet style guide as an example – I did not create this

Once the aesthetic transitions from low to high fidelity a style guide should be created. The style guide will be used to define colors/combinations, typography, scale, as well to help keep aesthetic design & interaction patterns consistent across the product. The style guide will also support development, since many patterns, once created, can be reused over again. Learn more about living style guides on Style Guide Driven Development.

6. User testing

placeholder
User testing can be done effectively anywhere and on a shoestring budget – Read more – 'User Testing from a Tradeshow Booth'

I prefer to do user testing as soon as there is something to test; as soon as the first UI wireframe is complete. Testing does not need to be complex, I can test users on non-interactive interfaces that are either printed or on a similar device to the intended product. However, simple interactive prototypes can be created by putting clickable areas over UI designs that navigate to the next page. If necessary, more complex prototypes can be created that are unrecognizable from a final, completed project. The level of fidelity typically progresses over the lifecycle of the project.

When user testing, I prefer a "shoestring" or "coffee shop" testing methodology, allowing faster feedback and iteration as well as keeping test costs low compared to formal testing. I once very successfully performed user testing in a trade show booth.

From the user testing results, quantitative (numbers) and qualitative (expressions) can be evaluated, reported, and used to either iterate through more UI concepts, or to validate that the product is ready to move into development.

7. Development

Once all of this is complete, the project is ready to move into development. This means creating:

  • Styles (CSS) based on the style guide
  • Components based on the user flow & IA
  • Layouts based on the UI
  • Developing interactions and animations
  • Keeping project documentation current

8. Product Launch

Once the project is complete and all parties involved are satisfied, the first version of the project is launched. Ideally, the launch will be followed up with another round of user testing to validate the success of the product.

Examples

Please visit my portfolio for examples of this process: