The Design Marathon

Our Design Sprint and Relays help us create a user-validated and detailed product prototype. During the Marathon phase, we take these mockups and turn them into a real product.

Step 1: Alignment

The first step in the Design Marathon is to create alignment between the prototype created in the Design Relay and your team.

Experience Mapping

We create user journey maps to help your team understand what a user goes through when interacting with your product or service. Our service blueprints diagram how customers interact with each business unit in your organisation. These two items together create the experience map that we use throughout the Design Marathon to maintain clarity and alignment.

Organisation Alignment

We present the experience map to your organisation so that they understand the entire solution and what they need to deliver to make the product a success. Each area of the business discusses and aligns on their roles, which clarifies people’s responsibilities and invites discussion early on. These interactions often lead to tweaking the experience map based on team discussions.

We ensure team alignment and acceptance of the prototype before continuing any further design work. Once everyone is on board, work begins. For example, back-end engineering begins architectural work while marketing prepares the campaign for a new feature release.

Step 2: Planning

After reaching team alignment, the design team moves on to further refine the solution.

User Stories

We cut individual features of the solution from the prototype and create user stories for each. These scenarios are how actual users will interact with your product. These user stories start out at a high level but are later added to and polished.

Because many of our clients are new to user stories, we walk them through how a story progresses as well as the acceptance and rejection criteria.

Estimation

We take each story, estimate it and then prioritise them in the order in which they need to be completed. This gives the organisation complete visibility into timelines and helps engineering plan their sprints.

Step 3: Visual Direction

We now have a high-level prototype with alignment from all sides and a prioritised list of user stories. Our next step is to jump directly into adding the visual direction of the product. We spend the next two to two and a half weeks finalising the overall visual design. We add in your branding and create a balanced composition.

Our process is unlike other design firms because we establish a comprehensive visual design upfront instead of waiting until wireframing is complete. The advantage is that once we complete a screen it is ready for implementation, meaning engineering can start development while we continue designing other features. Our process does not require a final step where everything is tied together.

Step 4: Interaction Design

With the visual direction established and user stories defined, we now move on to designing the individual screens, from concept to the polishing touches. We break this into four steps.

Design System

We take the defined visual style and decide which components we need to support the product. We try to resolve the system to as few pieces as possible to make a user’s experience streamlined. We combine these components into a system that solves the immediate needs of the product but is also flexible enough to handle future requirements.

Information Architecture

Once we have a framework with the components we will use, we create a clean and predictable flow of information. We ensure conformance to the best practices and adherence to the human interface guidelines set by each platform.

While we provide the same capabilities on Android, iOS and the Web, the functionality may behave differently. We want users to be comfortable in their environment instead of forcing one solution on everyone.

Up until this point, we concentrated on the best-case scenarios of creating a great user experience. Now, we must tackle issues like dead ends and error messages. These what-if cases provide the customer with a safety net when something goes wrong. For instance, what happens when there is poor or no internet connectivity? Our designs ensure that your customers are not inconvenienced by this. Instead of displaying an error message like “Please try again when you have internet”, which blocks the user from proceeding, we create solutions to be offline first by storing information locally and sync the information when the connection is restored. Addressing these little details make an immense difference to users.

UX Writing

After finalising the information architecture, it is time to focus on the details of the wording that directs the user. We carefully craft the copy so that users easily anticipate what will happen next. Great copy makes the difference between an app that properly guides a user through the experience as opposed to leaving them confused.

Prototyping

Once we have designed, we often prototype the interactions to ensure that the solution flows smoothly. What might feel right conceptually may not work as well in implementation. Prototyping not only provides validation, but it also supplies engineering visuals on how the interactions should work.

We use various software programs at different levels of fidelity. For example, we might use Apple's Keynote for simple interactions but a tool like Framer when the interaction is complex and needs to be programmatically resolved. We can also deliver animation timings and curves to engineering in code, which saves the developers a lot of time and effort.

Step 5: Delivery

Once a design is finished, we publish it through a handover tool (like Zeplin) where engineering can download all assets, see CSS, and examine the visual details like style information. In this tool, engineering can add comments and ask for clarification. Once engineering is satisfied with the details, we mark the story as Accepted and move to the next one.

Step 6: Usability Testing

We conduct usability testing in much the same way as the user studies in the Design Relay. The difference is now we focus purely on usability and ensure that the execution of the solution solves the user’s pain points. We confirm that users understand and anticipate the flow of information between screens, the copy is solid and relatable, and the call to actions (CTAs) are well-understood and compelling.

After the Design Marathon

Beta

Once engineering completes development, they create a beta version and put it in the hands of a few thousand users. While we conducted user studies and usability testing, this is the first time that users interact with the complete solution in their natural environment. Because the product is now in the hands of substantially more users, we discover additional edge cases and learn more about how customers use the product.

This step is critical because actual customers confirm that the solution solves their problems and provides a positive experience. Without this affirmation, you could release a product that fails for your users, potentially tarnishing your company’s reputation.

Improvements

Based on what we learned from the beta, we make adjustments to the product. For instance, if we discover usability issues, such as unclear copy, poor engineering execution, bad animations, or an ineffective flow of information, we quickly address them.

However, if we determine that our solution fails for a broader audience, we go back to the drawing board and identify a different solution. Depending on the extent and scope of the issue, this might involve another Design Sprint or a Design Relay.