.svg){kind=small}
FeatureMap ––
Manage your tasks, projects, teams, and more
%20(1).png)
.png)
FeatureMap is a story mapping software that provides unlimited virtual space to its users to build and share beautiful story maps and collaborate on their projects in a secure environment. FeatureMap brings you all relevant story mapping and communications features, such as: creating checklists, attaching documents, assigning tasks, leaving comments, exporting files, creating workspaces, inviting members, and empowering users so they can work on projects in the most efficient way.
We were approached by FeatureMap to help them design a new version of the platform and to introduce some new features and capabilities that would attract large clients, that is, large companies, and that would enable users to easily and systematically manage projects and employees. Because of the scope and complexity of the interactions available on the platform, we knew that there would be plenty of different UX scenarios in need of unified, clear, and functional solutions. Compactness and clarity were the two primary style attributes that we aimed for in this redesign.
This is a tool that is easy to learn and easy to use. It helps users organize ideas through real-time collaboration. FeatureMap points the entire team in the right direction, facilitates coordination, and generally makes working easier.
FeatureMap is thorough and detail-oriented. The priorities for users are transparency and clarity. The product is oriented towards a good user experience and efficiency.
FeatureMap provides a digital white board for flexible and real-time collaborative story mapping. It creates an unlimited virtual space where you can insert new cards anywhere and reorganize your workspace freely, enabling large team management. It also provides Jira integration.
Since FeatureMap aims to help its users work in the most efficient way possible, it was necessary to create an image that would enhance the overall experience on the platform in addition to building the complex UX. Now, FeatureMap is fun to use, and its appearance is reminiscent of a whiteboard and post-it notes. We decided to refresh it with bright and high-tech colors, stylized symbols and icons, a refined logo, and improved typography.
%20(1).png)
The new brand is clear and structured with pixel-perfect design. That's why we gave the logo more space to breathe and stylized its symbol. The existing colors of the logo were not conspicuous enough, and so it was lacking prominence. We changed its color to royal blue, which represents stability, honesty, and trustworthiness.
%20(1).png)
.png)
.png)
Colors are a very important item for this application's users and it was a real challenge to create the final palette. Given that many features on the platform have different characteristics (such as statuses), it was important to differentiate the primary brand colors from the colors for statuses, tags, and cards.
It was necessary to make the platform more interesting to use, livelier, and more modern. The three primary colors are royal blue, white, and Alice blue. This combination gave us exactly the result we wanted: purity and clarity.
To enrich the basic palette we used vibrant colors for cards, tags, and statuses. In this way, we came up with a modern, high-tech look, while at the same time keeping things neat and clean.
Primary
%20(1).png)
Secondary
.png)
The Inter font family is perfect for short paragraphs and elements (such as UI cards) which are an integral part of the Feature Map application. This typeface gives us simplicity and minimalism—exactly what we needed to complete the new brand. In addition, the Inter font family consists of 9 weights and 2528 different characters and also supports over 150 different languages, making it perfect for worldwide use.
.png)
.png)
.png)
Throughout the app we used solid fill icons, as they are easier to recognize and lead us to better task performance. In addition, we wanted a strong and stable structure and solid fill icons that would contribute to this goal. We only used outline icons for complex UI elements containing a lot of information. In these situations the icons are informative, inconspicuous, and do not divert attention from the main content.
.png)
This application is intended for managing large teams. It the name of making this task easier a variety of features were implemented, such as tags and permissions for every member. It was most important to build a strong and intuitive UX and flow that would allow easy use. Considering that FeatureMap was implementing the concept of a workspace into the platform for the first time, it was essential to study the client brief in great detail to understand the terminology and to analyze all of the possible scenarios that could be encountered while using the platform.
During this scope a new dashboard was created, as well as a page for managing member workspaces, guests, links, tags, and maps, as well as providing a multitude of multi-step flows.
The old dashboard was outdated. The new branding needed to be applied, the layout needed to be improved, and the workspace concept needed to be incorporated. Another goal was to create more space. Now, the dashboard is simple and elegant. All of the cards can be sorted by sections and they can be relocated, added, or erased at a later time. We also added the option to expand and collapse a section, which is especially important for larger teams, where there are many maps that need to be easy to see.
We created a simple sidebar to provide better visibility, easier access to favorite maps, and an effortless way to switch between workspaces and to edit profiles and settings.
We improved the look of the maps and enabled their settings to be changed with ease, directly from the dashboard, without the need to open up a map. We added options to easily change a map's color, to invite new members, to transfer ownership, and to rename it. Exiting from or erasing a map is now simple and accessible through one drop-down menu. For better recognizability and UX, we used solid icons for every available option.
.png)
.png)
One more very important change was adding group actions. Any of the maps on the dashboard can be selected and actions can be performed on them as a group, which greatly improves upon the previous design's UX and map management. This principle of group actions was also used for other elements, such as team members, tags, and links.
Considering that FeatureMap is intended for teams with many members, the concept of user permissions was implemented. Every user has their own set of permissions depending on their overall status (admin, regular member, or guest), as well as subscription status (enabled, limited, disabled, or suspended user). Finding a way to present this complex concept in a simple way was one of the biggest challenges. It was needed to go through all of the possible permissions-related scenarios and to study the user subscriptions in detail.
We wanted to achieve compactness so that the user could complete everything in one place, rather than needing to open up a myriad of windows and pages.
To start, we defined member categories in order to avoid confusion, as every category has a specified number of permissions and options for adjustment. We managed to achieve this by adding the regular, guest, and disabled member tabs. All of the categories also have their own sub-categories: general, tags, permissions, and so on.
A filter option was also implemented which enables the user to view only members with certain statuses (enabled, limited, or suspended). Each user's settings can be edited directly in the table and it is also possible to manage statuses as a group.
.png)
.png)
The next challenge in team member management was inviting the members to a map. Here, it was necessary to create a compact and effective flow with which users would be able to adjust all settings at the same time. In one step, the users can invite group members, assign tags by groups, and set statuses and permissions as needed.
The option to add members with a link is also available in this step. Additionally, permissions and tags can be assigned to every link. Even better is the fact that, in any moment, the links can be accessed on the Invitation links page, where the link and member access settings can be edited. The previous, multi-step flow was converted to a one-step, compact flow.
One more new feature that was added are tags. Tags are easily created and can be attributed to users and links. When designing the tags section, the goal was to make the flow as easy and effective as possible, so that users can create a new tag with just a few clicks and settings. Every tag can be completely customized, from the name and description all the way to the color, access level, and permissions.
.png)
.png)
.png)
All of the created maps can be seen on the maps page. Here, everything has been divided into two categories: active maps and erased maps. Thanks to this we can easily add new members to certain maps, see map information, or erase or restore a map at any moment.
.png)
FeatureMap was a complex and challenging project, but at the same time very interesting. We have created an improved version of the platform that is intended to attract large companies and teams, whose work will be greatly facilitated by the use of this tool.
For more information, you can visit the FeatureMap website, or you can find them on Twitter and Facebook.
.jpg)
%20(1).png)
.svg)
.svg)
.svg)
