<-

Business Model Canvas Tool UI Concept, Design and Prototyping

UX Design

UI Design

Team Lead


In this project we conceptualized, designed, and prototyped the user interface for a new Business Model Canvas tool.

We elevated the information architecture and optimized user flows based on insights gathered from experience using existing software as well as prototyping our own designs.

As part of the final delivery, we proposed next steps for the development of a Minimum Viable Product (MVP), emphasizing ongoing refinement based on client feedback and consideration of technical constraints.

Project assignment

After discussing with the client, we identified four main points as the motivation for the project:

  1. The US-based Business Model Canvas tool our client had been using couldn't be used for teaching purposes in Finland due to legal (GDPR) limitations.
  2. A similar tool that could be used in education in their organisation doesn't exist.
  3. The tool our client had been using has usability issues they felt like shouldn't exist.

We were tasked with conceptualizing and prototyping the user interface for such business model canvas tool that could be developed further inside our clients organisation to meet the needs of their work.

Process

Recognizing Usability Issues

Recognizing usability issues with the client's current tool, we opted to delve directly into understanding their needs. By swiftly addressing these concerns in an initial prototype, we could begin testing with other potential users of the product.

Usability challenges faced by the client in using the existing tool that we recognized were:

  • Information architecture is confusing

    • In which folder, project, or team does each canvas belong?
    • What do teams and projects mean? In other words, the naming was confusing.
  • The flow for creating a new file is too complicated.

    • The user cannot start to fill out the canvas before naming it and choosing its location.
  • File management is difficult.

    • What if the user wants to change the location of the canvas after starting to work on it?
  • The service does not provide an easy way to create and review multiple versions of a canvas.

    • One main benefit of using a business model canvas (especially for a course instructor) is to iterate and to compare different versions over time.

Understanding the User

Before creating the first prototype we had to map the tool's possible user base:

  • Business course instructors
  • Individuals actively participating in the operations of Turbiini
  • Students functioning as entrepreneurs.

This understanding formed the foundation for our design approach, enabling us to conceptualize a tool that addresses the unique requirements of each user group. This would lead to design solutions that take every group into consideration.

Solutions

Simplifying the Information Architecture

In our effort to enhance user experience, we implemented the following improvements:

  • We narrowed down potential elements in the folder structure to either canvases or folders.
  • We opted not to use the "Team" or "Project" prefix for folders aiming to diminish the user's need to figure out a intended usage for each.
  • A new folder is simply titled "Untitled" providing flexibility for users to name it depending on their own needs or preferences.
  • Folders created by the user are visible in the "Your folders" view.
  • Folders shared with the user are visible in the "Shared to you" view.

Streamlined Flow for Creating a New Canvas

In our pursuit of optimizing the experience even more, we incorporated the following enhancements:

  • Users have the ability to create a new canvas or folder with just one click.
  • Any newly created canvas by the user is automatically transferred to the drafts folder.

These modifications address three distinct user scenarios:

  1. Users who prefer to begin filling the canvas right away and may choose to relocate it later.
  2. Users who want to rename their canvas immediately after creation.
  3. Users who need to relocate the canvas file right after its creation.

Tabs Feature for Canvas View

Following thorough benchmarking, we added a neat feature to our canvas view – tabs. This allows users to easily switch between different canvas versions within a single view. This proves particularly beneficial for different types of users – from those who prefer creating entirely new canvases for each project to users who stick to one canvas and utilize tabs to explore and develop multiple ideas. The tab windows feature not only streamlines the user interface but also caters to varied workflows.

The client was particularly keen on this feature, expressing a desire to address a gap in existing tools where the ability to compare different canvas versions was noticeably lacking.

Prototyping Insights and Next Steps

Throughout the prototyping phase, we not only validated our initial design decisions but also gathered insights that played a key role in refining and shaping our design choices. These insights also provided direction for the next steps to the client.

The user testing was carried out with a fairly low-fidelity approach, involving rapid modification of features and subsequent testing to validate the effectiveness of our design decisions in a iterative manner. The group of people involved in testing included anyone we could find quickly, such as colleagues, people in the office corridor or even spouses.

Insights

  • We discovered (and validated our assumptions) that different users navigate using different sections of the user interface.
  • Some users found dragging and dropping canvases or folders (to change their location) to be an intuitive and effective way of interacting with the interface.
  • For some users, using mouse right-click function to interact with various elements of the interface, such as opening a dropdown window, could be more intuitive.

Next Steps

  • The immediate focus should be on developing a Minimum Viable Product (MVP).
  • It's crucial not to extend design work too far without technical implementation. Proper implementation would provide valuable user data in a real-world environment and technical constraints could influence design decisions.
  • Further testing with the user groups (course instructors & students) would be essential.
  • Adding and testing the drag & drop functionality.
  • Implementing the right-click mouse function for list elements and left navigation elements.
  • Designing the profile feature.

Contact

Want to know more?

Check out my resume for more information, or ansioluettelo for the finnish folks.

Or you can find ways to contact and follow me below: