Design Process

Competitive research helps us pinpoint competitors’ strengths and weaknesses. Usually, we pick 5 -7 of the most appealing direct competitors and evaluate their solutions. We also take note of the terminology they use to make sure our solution utilises industry-standard language and naming conventions.

But we don’t stop there and expand our research to products that are not directly related to the project. After all, the end user experience is much more diverse and not limited to a single product. During the research phase we may look at things like navigation, on-boarding experience, most common workflows and design patterns, types of visualisations used, etc. As a result, we create a final takeaways document that contains the main findings and is used throughout the project as a handbook to guide and support our design decisions.

Once the main research phase is complete, we use all of the collected data (in this case) to revise the information architecture for the existing website to better fit the users’ needs and workflows. It is usually created in the form of a mind map that gives a bird’s eye view of the system and shows relationships between its parts. By visualising overall project structure it is easier to understand the scope and define feature priorities.

We identify series of user actions or system states that the user needs to go through to achieve a meaningful goal. We create it in a design-specification format that combines screen layout designs with a flowchart-like representation of user and system interactions broken down into simple scenarios. The main goal of this document is to provide developers with a detailed description of all possible user flows, including edge cases, errors, and various states.

Wireframes are essentially the skeletal framework of a website or app. We design wireframes to solidify the project requirements and define main layouts, UX workflows and content. Wireframes allow us to quickly iterate on ideas, capture feedback from stakeholders and end users. This is when we nail down the UX - overall layout and navigation. Once we agree on a certain solution we switch to high fidelity visual design.

As we finalise the workflows, we start working on the visual side of the project. We’ll use the existing brand guidelines and create a set of visual design concepts accompanied by mood boards to illustrate our vision for the future style of the product

Once we agree on the direction we move to the production phase — applying the styling to all required pages, and creating all necessary specifications so developers could start working on their side of the project. Also, we design for the responsive views for each page.

We create interactive prototypes as a part of the visual design process. They help us identify weak spots in our designs, iterate on designs internally, validate assumptions, and test hypotheses. More often than not, we use simple tools like InVision.

As a part of the production phase we also will find examples or create short video clips showing the main UI interactions and animations that add delightful moments to the user experience and guide users along the way.

Based on the illustration style we finalise in the visual design phase, we create required iconography and illustrations. These compressed SVGs are then used by developers as a guide to implement these into the final product.

Design system is a set of design-specification document that serve as a powerful toolkit. Style guide will set ground rules for typography, colours, responsive behaviour, products photos and visualisations style. Design system helps maintain design and experience consistency of the product, and is used as building blocks to create new pages and add new functionality.

For design specification, we use InVision Inspect - a versatile interactive tool that provides developers with a convenient way of getting what they need when they need it. Besides sizes and margins, InVision provides code snippets, allows quick exporting of assets to PNG or SVG formats, has a commenting system to support communication between development and design teams, and is easy to maintain throughout the project.

When it comes to development, it’s always important to make sure that the design is implemented as intended. Often times developers willingly or unwillingly ignore small things that may not seem like a big deal, but these small discrepancies between the design and implementation have a snowball effect that may eventually drastically affect the final user experience.

After everything is delivered, we continue our partnership by providing design support for monitoring the development to make sure everything is implemented properly, acting as an in-house design team and providing constant design updates.

At the end of the project, we provide all final deliverables via shared Google Drive or Dropbox folder. We also transfer to clients ownership of all created projects in InVision.