Brainstorming & Ideation

You have a spark of an idea, but feel it's lacking something. You can't quite put your finger on it, but would love someone to help bounce ideas off.

I can help you flesh out your idea to make your app complete.

Brainstorming is a group activity where the goal is to come up with as many ideas as possible. No idea is a bad idea at this stage, you can think as crazy as you like! Bouncing ideas around and building upon other people's thoughts is an important part of the collaborative approach to yield the best results.

While it's great to be imaginative, we'll still keep the overall goal in focus.

Once all the ideas are out in the open, we can hone in on the best ones and refine what really hits the mark.

If you've already conquered this stage, you might want to consider Wireframing.

Wireframing

You know what you want your app to do, and you may have a few ideas on how you'll achieve it, but you really need to visualise the layout and the critical workflows

I can help you structure your app at a high level with wireframing.

Wireframing is a crucial step in the design process. It involves creating a simplified, skeletal representation of your app to outline its structure and functionality. A wireframe serves as a blueprint, focusing on layout, content placement, and navigation without delving into visual design elements like colours, typography, or detailed graphics.

It might not look as exciting as the real thing, but this stage serves a critical purpose in focusing on the flow and functionality of the product.

Wireframes can be created from sketches on a piece or paper, using dedicated software like Balsamiq, or UI centric tools like Sketch or Figma. The objective here is to iterate rapidly without getting bogged down on the UI details.

If you already have wireframes or a mockup of your app, you might be ready to build a prototype.

Prototyping

You have a plan for an app, now you need a way to validate and test it before committing to development.

I can help you with creating a custom prototype that bridges the gap between idea and product.

Prototyping is the process of creating an early, functional model of a product to test and refine its design before full-scale development. A prototype is an interactive simulation that closely resembles the final product's look and feel.

The main purpose of prototyping is to validate ideas, gather feedback, and identify potential issues early in the design process. Prototypes allow designers, stakeholders, and users to interact with the product's interface, experience its user flow, and understand its core functionalities. This hands-on testing is invaluable for discovering usability issues, improving user experience, and ensuring that the design meets user needs and business objectives.

I like to code prototypes. This gives us an advantage to be able to test things like field inputs, form validation, complex workflows, stored states driven by user inputted data. These are some of the incredibly important things to test and validate which are not available using lower fidelity methods such as Figma prototyping.

10 reasons why coded prototypes are better

10 reasons why coded prototypes are better

Prototyping is essential in the software design and development process because it allows teams to visualise and test ideas before committing to full-scale production.

By creating interactive models of a product, designers can experiment with features, user flows, and interactions, gathering valuable feedback from users and stakeholders early on. This helps identify usability issues, refine concepts, and ensure that the final product aligns with user needs and business goals. Prototyping also reduces costly revisions during development, streamlining the process and improving collaboration between designers, developers, and stakeholders. Ultimately, it leads to a more polished and user-friendly product.

Here, we like to code our prototypes as we feel there are some significant advantages of other methods. Below are 10 reasons why we think coded prototypes are better.

1. Interactivity and Realism

Coded prototypes can fully replicate the interactivity and behavior of the final product, including complex animations, dynamic content, and responsive design. This level of realism helps stakeholders and users experience the product as it will function in the real world.

2. Performance Testing

Coded prototypes allow for testing how the product performs across different devices and platforms, providing insights into potential load times, responsiveness, and overall user experience under real-world conditions.

3. Accurate User Feedback

Because coded prototypes behave more like the final product, user testing provides more accurate feedback on usability, navigation, and functionality, leading to better-informed design decisions.

4. Validation of Technical Feasibility

Building a coded prototype helps in assessing the technical feasibility of the design. It can help identify potential workflow issues early in the process.

5. Direct Transition to Development

Coded prototypes can serve as a foundation for the final product, reducing the gap between design and development. This streamlines the handoff process, minimising misinterpretations and rework.

6. Custom Interactions

Unlike some UI design software applications, where interactions are limited to predefined animations and transitions, coded prototypes allow for the creation of custom interactions and user flows tailored to the specific needs of the project.

7. Responsive Design

Coded prototypes can dynamically adapt to different screen sizes and orientations, providing a true test of responsive design that’s closer to the final product's behaviour.

8. Use of Real Data

Coded prototypes can leverage real data, allowing for testing of wider content scenarios. This provides a more accurate representation of how the product will work with actual data.

9. Scalability

For complex projects with multiple interactive elements, coded prototypes can handle more intricate scenarios that might be difficult or impossible to replicate in Figma or similar software.

10. Better Testing

Coded prototypes can leverage browser based testing tools for things like session replays, heatmaps and event tracking.

While there may be a time and a place for lower fidelity prototypes, if you want to make the most out of a prototype and you have the opportunity to have it coded, then coded prototypes are definitely the way to go.

User Testing

Your prototype is looking fantastic and now you need to validate and iterate to make it perfect.

I can help with user testing, providing tools and guidance.

User testing is essential for creating a successful product because it provides direct insights into how real users interact with the design. By observing users as they navigate the product and perform assigned tasks, we can identify usability issues, areas of confusion, and potential barriers to achieving key objectives. This feedback is invaluable for improving the user experience and ensuring that the product meets user needs.

As my prototypes are browser based, they allow us to use production level tools for analytics, heat maps, session replays and feedback reporting.

Workflow Refinement

Some of your app's workflows feel a bit clunky or take more clicks than you would like.

I can help optimise your workflows by taking a holistic approach to the task at hand.

Workflow refinement is the process of improving the efficiency and effectiveness of a sequence of tasks within a workflow. It involves analysing existing processes and identifying redundancies and inefficiencies, and then implementing changes to streamline the process.

Workflow refinement can be performed at multiple stages during design process, including at wireframing, prototype development and user testing.

Design Systems

You love your app and you want it to always look great, regardless of who will be designing for it in the future.

I can help with producing a design system which can guide any future design work.

Design systems are a set of standards, guidelines and reusable components to ensure consistency and efficiency in both design and development. It acts as a single source of truth and helps maintain a unified visual language for your product.

Design systems include:

• UI Components
  Reusable elements like buttons, forms, icons, and navigation menus that are standardised in appearance and behaviour. These components ensure a consistent user experience and reduce the time spent on recreating common features.

• Design Guidelines
  Rules and best practices that govern how components should be used, including typography, colour schemes, spacing, and layouts. These guidelines help maintain visual coherence and accessibility across different platforms and devices.

• Interaction Patterns
  Predefined ways in which users interact with the software, ensuring that similar tasks are handled consistently across different parts of the application.

Design systems can form a comprehensive part of the development handover documentation.

Feasibility Review

Your app has a couple of neat tricks, but you're unsure if they would be too expensive to implement or even possible!

I can help determine how tricky a feature will be to implement or if you are dreaming of the impossible.

A feasibility review of software design is an evaluation process that assesses whether a proposed software solution is practical and achievable within the constraints of time, budget, technology, and resources. The goal of the review is to identify potential risks, limitations, and challenges early in the design process, ensuring that the project is viable and aligned with business objectives. It helps stakeholders make informed decisions about whether to proceed with the design, modify it, or explore alternative solutions.

I have been working alongside engineering teams for decades, and keep up to date with the latest advances in technology. I am well placed to provide an unbiased and impartial opinion on what you can achieve.

Documentation

You're happy with your prototype and you want to get started with development.

I can help by giving your engineering team the design specifications they need to build it right.

Design systems are great for high level direction and ensuring future features are aligned, but when it comes to building something specific, it's easier to be working off a set of blueprints with exact specifications.

As I build prototypes in code, it means I'm talking a similar language with your engineering team. If they need to know the padding of an element, they can just inspect it with their browsers developer tools. For the parts which can't be coded, I can supply instructions on how the item should be implemented.

With a combination of design systems, coded prototypes and implementation instructions, your engineering team will know exactly how your app should work.

Contact

Tell me about your project.