Impact Map is a mapping application designed to serve the communities in the region, with a focus on families, youth, and relevant organizations. It enables professionals and community members to easily access and contribute to real-time, comprehensive mapping resources. Aiming to cater to both individual and professional needs.
As the lead designer, I aimed to implement additional features and redesign the current map to enhance its usability, functionality, and adaptability to different users, including individuals seeking resources and decision-makers within organizations and governments.
web application redesign | smart waterloo region innovation lab
Impact Map
Enhancing usability to allow communities to map their impact and connect with their community.
overview
What is Impact Map?
Why a redesign?
Impact Map calls for a redesign for a number of reasons, the main reasons are that it is not optimized for all user types, not user friendly, and does not have all of the desired features Impact Map aims to have.
These were our main goals of the Impact Map redesign:
These were our main goals of the Impact Map redesign:
Integrate new features to improve
user experience and engagement,
ensuring user satisfaction
Improve user interface and
address usability issues of the current application
Incorporate user feedback
to address pain points experienced by
users of the current interface
Why mapping systems?
Individuals and organizations have the inability to layer maps from different sources and face barriers in accessing and using mapping platforms, either due to costs or the know-how required.
The existing Impact Map application is currently unusable as it is incomplete with Layers and Discover as the only features. These are the issues of the current map:
The existing Impact Map application is currently unusable as it is incomplete with Layers and Discover as the only features. These are the issues of the current map:
research
Limitations in cost and knowledge of mapping systems
A competitive analysis was conducted and identified pros and cons, as well as features, helping me understand what features and designs worked best with users. This was important to me as I was already familiar with mapping systems. It was essential to know what designs and features help beginner mappers!
I identified that current mapping applications are limiting users through costs and the expectations of users previous knowledge regarding the use of mapping systems and applications. Additionally, I was able to notice what Impact Map was currently lacking in features and design.
I identified that current mapping applications are limiting users through costs and the expectations of users previous knowledge regarding the use of mapping systems and applications. Additionally, I was able to notice what Impact Map was currently lacking in features and design.
ideation
Visualizing the user interactions and features
An information architecture map was created to visualize the user flow, interactions, and needed features. Organizing the number of features we wanted to include and add was beneficial as we moved forward with the application.
Sketching out the interface
My first tasks was figuring out what the navigation bar would look like. I went through many iterations before deciding on the final design.
I previously worked with maps for the City of Barrie and was familiar with the look of municipal maps which I referenced; however, I realized this wasn’t the best course of action. The design was cluttered and stiff, which was the opposite of what I was looking for as Impact Map was designed for youth and youth organizations. It was essential to make it easy to navigate while also being clean and friendly.
My last iteration was decided on after I spoke to another designer in the lab and the project manager. I was given feedback to scrap what I knew about municipal maps and to not limit myself. This was where I was able to find other sources of inspiration to create my last iteration!
I previously worked with maps for the City of Barrie and was familiar with the look of municipal maps which I referenced; however, I realized this wasn’t the best course of action. The design was cluttered and stiff, which was the opposite of what I was looking for as Impact Map was designed for youth and youth organizations. It was essential to make it easy to navigate while also being clean and friendly.
My last iteration was decided on after I spoke to another designer in the lab and the project manager. I was given feedback to scrap what I knew about municipal maps and to not limit myself. This was where I was able to find other sources of inspiration to create my last iteration!
product development
Implementing the decisions
With the main components and features settled, it was time to get into the details of the application. I created mid-fi wireframes to display the features and used this as an opportunity to visualize and decide on the best user flows.
Establishing a style guide
To ensure a seamless visual experience throughout the application, I created branding guidelines. The objective was to strike a balance between playfulness and cleanliness.
The deliberate choice of these colours and fonts serves a dual purpose: to convey a sense of youthfulness that resonates with our target audience and to enhance the mapping experience.
The deliberate choice of these colours and fonts serves a dual purpose: to convey a sense of youthfulness that resonates with our target audience and to enhance the mapping experience.
iterations
Testing with potential users
We did two user testing sessions at the lab and gained valuable feedback! One session with elementary students and another with high school youth and their teachers. These sessions helped me find gaps to fix within my design.
We went through what to change, what was good, and what was confusing about the application. Here is the consolidated feedback:
We went through what to change, what was good, and what was confusing about the application. Here is the consolidated feedback:
Many features and screens went through iterations as a result of feedback from my project manager, designers, and non-designers. This was where I was able to gain the opinions of a variety of people outside of my organization to help guide my designs.
Adding Layers
Discovering and finding information
final design
Features
Create an organization or personal account
User profile has two versions, Personal Profile and Organization Profile. In Profile, you're able to customize, view your blog posts, and access settings.
Personal accounts can request to be an Organizational account. Organizational accounts may add, edit, or delete members into their organization from Profile.
Personal accounts can request to be an Organizational account. Organizational accounts may add, edit, or delete members into their organization from Profile.
Add and create layers
The Add section allows you to import, create, and customize your layers! Users can import previously made map layers from other applications into Impact Map and filter the layer down to a specific field or customize it further in Impact Map.
Users can create their own layers or edit layers within Impact Map using the provided tools: Points, Lines, Polygons, Circles, and Text.
Users can create their own layers or edit layers within Impact Map using the provided tools: Points, Lines, Polygons, Circles, and Text.
Apply and view layers in your map
You can select multiple layers, search/filter for layers, create files for layer organization, edit layers, merge layers, and delete layers from your map.
There's also a tool to help find your active layers in specific cities, townships, and wards!
There's also a tool to help find your active layers in specific cities, townships, and wards!
Share layers to your friends, organization, or the community
The Share tab allow users to share their layers and map with other Impact Map users.
With a layer, you can share it through a link, short link, HTML, or download it into a file.
Organizations are able to publish layers within their organization or request to publish it to the public for it to be visible in all maps.
With a layer, you can share it through a link, short link, HTML, or download it into a file.
Organizations are able to publish layers within their organization or request to publish it to the public for it to be visible in all maps.
Provide feedback and updates on layers
Impact Map users are able to give real-time suggestions and updates to layers through the Comment tool.
With the Comment tool, Impact Map admins are able to crowdsource information and updates from the community, providing more accurate information!
With the Comment tool, Impact Map admins are able to crowdsource information and updates from the community, providing more accurate information!
Discover resources around you
Find resources and activities such as clinics, programs, workshops, etc. using the Discover and Info tools. You'll be able to find resources with over a 5-minute radius of your location!
Organizations and the Region can use this to know what resources we are missing and need to add in certain areas.
Interact with the community
You can connect with others in the community through Blogs! Discover layers others have created ranging from art installations to restaurants.
Have a layer you want to share? You can easily share it with the community by creating your own blog post.
Have a layer you want to share? You can easily share it with the community by creating your own blog post.
Reflection
🚀 Streamlining with design systems
Looking back, tinkering with components and styles marked a pivotal moment in my design approach. In future projects, I would prioritize their application earlier to make the prototyping and wire-framing process more efficient. Managing diverse typography, necessitated by distinct screen sizes and layouts, highlighted the importance of organization—whether it be in typography, colours, or components.
👥 Feedback fuels design
The journey also highlighted the critical role of feedback and usability testing throughout the design process, emphasizing the iterative nature of design. This collaborative approach seeking insights from both internal colleagues and external collaborators, spanning varied perspectives, whether design-focused or not, helped validate and refine my design and ensure it clicked with users. Looking back, creating opportunities to gain feedback from a wider user group would have been beneficial as I was limited to certain groups we had access to.
🤔 Balance feedback with vision
One big lesson? Feedback is essential, but not all of it is applicable. It's about knowing what advice suits your project best. While external perspectives are crucial, the ability to selectively apply feedback ensures the integrity of the design vision. In hindsight, a deeper dive into user testing would have provided more insights into user needs and challenges, further enhancing the application's user experience.