If you can't describe what you are doing as a process, you don't know what you're doing.
- W. Edwards Deming
When approaching any design project, I always implement a tried and tested process for ensuring I maintain the highest standard of quality possible, while also ensuring that I set myself up for success in future projects I may undertake. This is that process.
Scope of work
Before any design work is undertaken. I initially create a scope of work - or in other cases - receive a brief. In this stage it is imperative to clearly define the following: What it is I'm doing/being asked to do. What are the checkpoints for feedback and consideration throughout the process? What are my actionable tasks and whether or not there are internal tasks that I may rely on colleagues for in order to successfully complete the scope of work within the expected timeframe.
I find it’s good to use a whiteboard session to lay out what tasks need to be completed and in what order. Once tasks are defined and agreed upon, I then move over to a Kanban system like Trello. This transparent process allows me to manage both my own workload and to assist others in theirs.
brainstorming
Initial thoughts based on the brief: I use brainstorming to solve specific problems, make connections between problems and solutions, develop new ideas and amass information. Brainstorming is unrestrained and spontaneous.
research
During the early stages of a design project, it is important to look into the area in which you will be designing. I often research what competitors are offering [if there are any]. I then base my solutions/designs to be above and beyond what my competitors offer in terms of functionality and usability.
It’s not just good enough to solve a problem, more often than not it's necessary to research into areas that do not have solutions for the problem you are trying to solve. Further ranging research allows me to preemptively create problems to solve. This is a vital part of remaining current.
“There is nothing in a caterpillar that tells you it's going to be a butterfly.”
- Buckminster Fuller
user flows
User flows are a critical part of determining what UI you will have to start sketching and implementing. For user flows I use the ‘jobs to be done’ methodology. This methodology can go a long way in shortening the steps it takes for your user to achieve success on your product.
Once I have a feel for what tasks my user will have to do, I can then start the process of incorporating these tasks into low level sketches of the UI.
Low Fidelity Sketching
Probably my favourite part of the process of designing a new UI is the low fidelity sketching. The main reason for this is that low fidelity sketching is usually the part in the process where I start to develop my design template.
In low fidelity sketching it’s possible to quickly insert functionality and cross check your button placement to see if you are achieving the easiest flow for your users' ‘job to be done’.
high Fidelity mockups
Once I have completed the process of sketching my initial UI and determining the functionality, button placement and call to actions, I can then start to create high fidelity mockups.
The functionality of my high fidelity mockup will be to set the start of my design template. I can easily manage and manipulate this template using a design tool such as Sketch.
In High Fidelity mockups it is important to remember basic principles of design such as; hierarchy, chunking, consistency, constraint, the expectation effect, feedback loops and progressive disclosure. Also we must keep in mind that at the beginning of this stage we should make allowances for cross-browser and cross -platform functionality.
iteration
A necessary part of any design process is iteration. I find iteration is best approached by having conversations and meetings with fellow team members or sometimes using just a willing ear :)
By iterating through a mockup, I usually produce multiple concepts based on my initial design template. Doing this allows me to mockup several different options for design decisions to be made. I can further test my concepts in this step by using a prototype tool like InVision. InVision allows me to test interactions, flows and allowances for the expectation effect.
Implementation
The tool I use for implementation is Zeplin. Zeplin allows me to provide a front end developer with a detailed document of HTML & CSS commands. During this step I can work with the developer to communicate user flows and show them desired interaction effects.
I always endeavour to cut the development time for a front end engineer by using existing UI library elements and by not having many ‘bespoke’ designs. By doing this, it allows both myself and the front end engineer time to refine and test the UI before a soft rollout.
full rollout
It is good practise to have a staging server for deploying and testing designs before a new build or a push to production. Working with back end engineers, I like to take into consideration their time frame for making builds and how my design process can work with that.
In preparation for a full roll out, I prepare customer success material. This can come in the form of a tutorial or on-boarding flow for new users, IM messages and notifications about the new features to existing users and the writing of FAQ & troubleshooting documentation.
In addition to this preparation, I also produce video of the new UI feature for supporting marketing and sales strategies.
Documentation
When documenting a design project it is important to catalog every component; style guide, img source & rationale into one single file structure, this cataloging will act as the single point of reference for subsequent design projects.