The Brief
A common diagram used within the world of project management is the sunray roadmap tool. However despite its regular use there has been little development in how they are created, with most being created using Powerpoint or Visio. The idea of Konexis is to address this gap, and to develop a product that could allow for an easy and more effective way to create these vital diagrams. My task was to conduct research and interviews with people involved with sunray roadmaps, before distilling the research, creating wireframes and prototypes, and finally working with the developers to make the product a reality.
Goal:
Challenges:
To design and develop a roadmap builder app.
Due to the nature of the product there are many logic problems to consider.
Feeling impatient? Skip to the good part
Creating a Tool for Corporate
Visualisation
Imagining and developing an innovative roadmap diagram builder product aimed at revolutionising the way data is visualised.
1
Background
Background
Konvergent is a company that since it's beginnings has dealt in the world of architecture and project management. To deal with the demand for interactive diagrams, particularly sunray roadmaps, the design team was set up to utilise prototyping tools including XD and Figma to create these. However the goal became to develop a tool that could provide a better solution.
In November 2022 the project finally got the green light under the name "Konexis". Things kicked off with a dive into the current marketplace of existing tools in the project management space.
Competitor Research
Tool 1: Visio
-
A diagramming tool part of the Microsoft 365 suite.
-
Contains a range of diagram templates (including swimlane roadmap).
-
allows for excel and csv import, however this is not an intuitive feature.
-
Somewhat limited with design capabilities.
Tool 2: LucidChart
-
A strong selling point is its collaborative feature, making it a useful choice for larger companies.
-
More than 1000 diagram templates available.
-
Integration with a range of apps (including excel).
-
Allows for data importation via google sheets and csv files.
Tool 3: Roadmunk *
-
Marketed as a roadmap builder tool. However specifically for swimlane.
-
Ability to create multiple views from a single set of data. These views can be shared as a link or image.
-
Contains preset templates (all in the swimlane/timeline format).
-
Integration ability with Jira.
* Determined to be a main competitor
Interviews
Concurrent to researching tools, we also conducted a series of interviews with:
Designers
The creators of the final sunray
roadmaps at Konvergent.
Consultants
Generally project managers and architects, who lay out the data and structure of the roadmaps.
Clients (Stakeholders)
Ultimately who a roadmap will
be aimed at.
These 3 groups were identified as users and/or viewers of sunray roadmaps. Some points brought up during these initial interviews included:
-
Designers feel out of the loop a lot of the time, due to their lack of subject knowledge.
-
Designers often face pressure for the final output due to being brought in at the very end of a project.
-
Designers get the feeling that the client tends to view the design step as being excessive to requirements.
-
Consultants often feel as if they lack power to 'force' the client, they are only able to advise on choices the client should make.
-
Consultants feel as if they constantly have to prove themselves on a project.
An interview with a previous client was organised. From his experience creating a roadmap with Konvergent, some points raised were:
-
He receives praise from others about the roadmap that was created.
-
Really likes being able to provide updates via spreadsheet.
-
Would like a 'lite' version to hide some elements, allowing the roadmap to be shared more widely.
-
Would like to make updates 'on the fly' instead of via Konvergent every quarter.
2
Standup Sessions
Standup Sessions
With members of the design team, and representatives of the consulting team (with one representing the client) a series of standup sessions were organised to bring together the different viewpoints of the 3 main user types.
This included defining the personas for each, and understanding what is required of the tool by all parties.
Design User Journey
-
At this level the client has very little involvement in the creation of roadmaps.
-
A perceived gain for the consultants is the ability to have more control over a project, rather than issuing changes after sending the roadmap to the designer.
-
One issue noted was the potential removal of the designer from this process. Or at least taking on more of a consulting role.
High Level User Journey
-
(looking at the greater stages of the roadmap creation and delivery process).
-
currently the client's only interaction with the roadmap is at the end, viewing it via a prototype link.
-
The consultant has a go-between role, interacting with the client and the designer.
-
The designer often feels rushed, only getting the required data within the very last weeks of a roadmap project.
Personas
As the Consultant, Joe has the responsibility of collecting data from 'the Client', mapping out the roadmap, and briefing in 'the designer' to elevate these designs.
As Enterprise Architect, Joe is responsible for client relations, sales, and the deliverables that are agreed upon with the clients.
The Consultant
Name: Joe
Age: 46
Location: London, UK
Occupation: Solution Architect
Sector: Consultancy
Experience: 20 years
Popular Tools:
Miro
Visio
LucidChart
Powerpoint
As the Client, Stephen has the responsibility of sourcing an enterprise architecture consultancy, providing relevant data, reviewing the deliverables and presenting the plans to stakeholders in the business.
As COO, Stephen has the responsibility of planning, directing and overseeing the company's operational goals, policies and initiatives.
The Client
Name: Stephen
Age: 42
Location: London, UK
Occupation: COO
Sector: Energy Supplier
Experience: 18
Popular Tools:
Powerpoint
Excel
As the Designer, Ashley has the responsibility of taking the roadmap made by the consultant and converting them into user accessible, user-friendly designs that aesthetically pleasing.
As Enterprise Architect, Ashley is responsible for the company's creative direction and visual design deliverables for internal and external projects.
The Designer
Name: Ashley
Age: 27
Location: London, UK
Occupation: Visual Designer
Sector: Design / Consultancy
Experience: 7 years
Popular Tools:
XD
Miro
Logic Flow
A key focus of the product development was establishing how the various functions and screens within the tool would fit together. We created extensive user flows to understand how the user could navigate the tool to achieve a range of tasks.
3
Design and Develop
Design and Development
As the process of defining the product's logic continued, work also began on wireframing and low fidelity prototypes.
Below are two low fidelity concepts that were prototyped. These followed the flow of the above diagram but with minimal differences to ascertain what UI was most effective. They were then tested with two groups of consultants at Konvergent to gather insights.
Version 1
This version revolved around a changing sidebar on the righthand side, which acted as the focus for the majority of functions within the roadmap.
Version 2
This version had the sidebar on the left, and employed a 'tab' system to allow the user to distinguish and go between functions easily.
In the end user testing was positive with both designs, with the overall logic flow being easy to navigate. From insights gathered in this testing a hybrid high fidelity version was prototyped and then shared with the developers.
MVP 1
After months of development, more logic discussions and additional UI requirements, MVP 1 was released. The first version was rolled out to a major retail brand, who helped with funding. This would provide the initial test group for MVP 1.
Below are clips of the different views of the tool.
Builder View, Preview and Publish
If the user is to create or edit a roadmap, they are brought into the builder view. This allows them to add and edit points, filters, dependencies and permissions.
The user is also able to preview their work and to publish their document with a shareable link.
Defining the logic further
As development progressed multiple discussions were held between our team and the developers to further iron out the logic of some features, particularly assigning permissions and uploading data. This required creating extensive user flows and testing how these features could work without creating conflict between users. Once these decisions were agreed upon additional UI was designed and sent to the developers.
Dashboard
Upon logging in, the user enters the dashboard where the can access previous roadmap projects, create a new one, manage their account, and access other such setting features.
Screens
In addition to the above videos, the gallery below shows some of the main screens laid out.
(Dashboard, Main builder view, Filter applied, Initiative popup, Swimlane view, Preview)
User Testing
As of creating this case study user testing is scheduled for the commencement of the next phase.
As the initial version of the tool has been onboarded by a client, session are to be arranged with these users to understand how they interact with the product and to observe any issues with the logic.
Following on from the scheduled user tests, the next steps will see the development of MVP 2, which aims to incorporate features such as data linking, enhanced dependencies, and the reskinning of the tool based on clients branding.
Following on from this will be more regular user testing and bug fixes.