It all begins understanding what the problem is that my design is to solve. I work directly with the product management teams to understand the project requirements in the form of user stories. "As a user I need this to do that". It's amazing to see the sentences and bullet points that make up a user story turn into a fully functional piece of an application.
To the right is a screen capture of an example user story.
Once the software requirements have been defined I then move into sketching. This really helps me to understand the problem in more detail. I often find more questions that need to be answered in this phase. I often collaborate and whiteboard directly with my team mates in this phase. Working together helps to solidify a shared understanding of the design concepts.
Notebook sketching of ux concepts.
White boarding and working on user story concepts with the product team.
Now the challenge is on, it's time to turning these ideas into something digital. Sometimes I create black and white wire frames, and user flows, and other architecture documents for further discussion. Most often I will dive right into to my design tool of choice and start cranking out a hybrid wire frame document that has visual styling to it.
Below are visual samples from the ATRIO pms and ATRIO spa applications, these applications are designed for windows tablet and desktop use.
Communication is key in the design process. Creating a well designed wire frame mockup works well for the product team and for usability testing, however the developers still need more detail. I try to communicate my design work do the developers as clearly as possible and answer any questions before the code work starts. My wire frame documentation also comes with developer notes so that everyone has a clear understanding of what each color, font, and spacing are.
Below are a few examples of developer specification sheets.
Lots of things have been created by this point. I find it important to keep a widget library as well as an up to date style guide. The style guide helps the development teams to get all of the details on all objects that they are to create. This helps to solve any questions that may come up and speed up the development time. See the below examples of style guides and reusable widgets.
Consistency also is key in design. Once an object is coded created, I will document that as a widget in my style library. These widgets can then easily be drag and drop to a new wire frame and re-used at a later date.
Now the real magic happens. The sentences and bullet points that were written to create the user story requirements are finally coming to life. Soon they will become part of a functional application. My design conversations don't end here. I now devote time to work with developers getting all of the details finalized so the software is ready to be released. This is a just high level over view of my design process, as you can see the communication and details make a huge impact on how my design is developed.