
PROCESS
1.
I begin by researching interfaces for similar products, looking at how other popular software handles similar problems. I take notes about what feels satisfying, what's frustrating, what's concise, what's confusing and what's clear. Then, I create user personas based on our target audience, and consider how these layouts might feel to each of our users.
3.
From my many thumbnails, I choose 2-4 interfaces to present to the team. I present the interfaces to the team leads. We have a lively discussion, where they can discuss problems they see based on their expertise, and I can use my own to discuss how to solve those problems while retaining good usability. By the end of the meeting, we should have a whiteboard sketch of the interfaces we all agree on. I snap a photo, then get back to my desk to create the wireframes.
5.
I deliver the finished wireframe to the team for review. If we have a separate UI artist, I'll send them individual images of my wireframes, making sure the layouts are pixel-perfect on all resolutions and platforms.
Then, I work closely with art and engineering, checking in often to make sure the art is reflecting the usability. If I'm creating the art myself, I work from my wireframes, adjusting the layout based on my art, animation and design know-how.
2.
With our personas in mind, I create rough flow-charts and dozens of thumbnails, experimenting with different layouts and use-cases. If I'm not sure how something will feel, or I think communicating the usability to others will be confusing, I'll make a prototype or animation of the interface. This way, I can also do holistic use-tests of these features with folks in the office.
4.
Next I create full flow charts and wireframes, keeping in mind discussions from our meeting. I create separate pages for each state, or create a sidebar for the states, with labels and descriptions of usability and feedback. If possible, I make buttons and menus interactive, reflecting the expected usability as closely as possible. This is also where I flesh out every variable state and edge-case. I send it to the team for final checks before moving forward with art.
6.
Throughout the process, I am iterating on the design. From paper to final art, I check the design with both involved and neutral team-members to "diet user test" while still in development. Then, once it can be shown to real testers, I work with the team to determine what we most need to learn or validate. I run a tight ship while user-testing--I had to train multiple people, from interns to producers, how to properly test a product without biasing the testers.