Mapify your Borough

UX/UI Responsive Web Case Study

Rocio Aguilar
Sep 1, 2018 · 8 min read

Mapify is a data analysis website tool with aims to make data available and transparent to the community. This has been my second real client project at Red Academy. I was part of a team with two of my classmates. We had 3 weeks for this project.

My team

Mapify is a new tech venture from the team behind Voist. Born out of Voist’s Mapify concept of consultation, Mapify is working on building a new platform and experience around consultation, engagement and data visualisation.

Mapify was active a few years ago working only in the Westminster borough. It was deactivated in 2015. Its aim was keeping data human-centred and transparent as possible available to all the community. They want to launch the tool again, targeting local residents, local business, developers and council for collecting and sharing their data.

When meeting the client, they expressed their concern about all the new laws about data protection and how many people feel unsafe to share certain data those days. They want to be trustable and understandable by their targeted users.

For our client, the tool has an important social impact, and we knew this was a key point for them. When talking of data analysis, is easy to forget that data is collecting and sharing by real people, with names and faces and lives. Mapify aims to connect people lives by sharing their data for improving their borough through local connections.

We concluded to create a responsive onboarding demo website that could engaged targeted users to collect and share their data for their borough improvement.

Business Goals

  • Industry recognised source of information for community network mapping
  • Point-of-contact for Councils to extract data analytics on community and social enterprise projects
  • Consultancy point-of-contact on understanding of social demographics of a community

Approach

We approached the project by following the standard UX process.

The research for this project was a bit different from my previous one. Mapify was active a few years ago, but unfortunately, even trying our best, it was impossible to reach out to any of the users from the first version. This made impossible to conduct any personal interview about the previous site. However, we made a survey which we launch to a broad group of people, trying to reach out to our four users group, local residents, local business, developers and councils.

Some of those questions were;

Are you interested in the social capital spending of your local community/ borough?

Is engaging with and improving your community area important to you?

Are you comfortable with your data being collected and transparent for community related projects?

Would you willingly sign up to a website that you know will collect and re­distribute your data for community centred decisions?

Are customer reviews important to you to build trust before signing up to a service provider?

With all the information I collected from the surveys and our stakeholders previous research, the Affinity Diagram was done.

By using this technique is very easy to identify the pain points and the key findings for improve the user experience in the future.

As last part of the research process, a comparative and competitive analysis with others app or website which offer similar services is vital.

They are many services online that offer data analysis, but most of them don’t have the social pursue Mapify does. The most similar to my client was Commonplace. One of our priorities with Mapify is to do data collecting a transparent process for their users. The use of videos and infographic would help to reach this out. Commonplace uses some infographics and demo videos, but not all their data source methodologies are transparent for their users.

Once the research is all done, it’s time to start planning.

In this project, I started this phase with a concept map. This allows me to have a bigger and clearer approach to our clients, their users, and some of their competitors’ features.

To better understand our users and keep on mind those users are real people is common to do a persona. Doing a persona allows you to use all the research results and synthesizing it in a fictional person. In this case, I was only able to do a proto-persona based on Dave Wybrow. Dave is the owner of the Cockpit Theatre, which was part of the previous project.

Our clients identify themselves as a storyteller’s, due to their social journalism background. It is very important for them to take this into Mapify, this visualization, and collaboration between all the participant in the borough. However, I knew it would be difficult to translate this idea to the ordinary user who is not familiarised with data sharing and collection.

I made a storyboard, using our persona Dave, to show the benefit an ordinary user could get through Mapify. This storyboard was created with the idea of becoming an animated infographic for the final site.

Scenario: Sarah who is a local resident within the Borough wants to find a local theatre where their theatre group can perform plays. They find Mapify online, search and come across a local theatre. They reach out for information and meet Dave (Theatre Manager). Dave is pleased to meet them and give them the opportunity to use the space. They are now running their local theatre meetup group in the Theatre.

Following the storyboard, I made an user flow. Taking Sarah and Dave’s theatre finding as inspiration, this user flow shows how to perform a specific task on Mapify.

Once all the ideas are consolidated, I was able to do a final sitemap. Only the on-boarding page had to be done, but we knew that everything must be accessible from there. We needed a very precise sitemap before to stat to the design phase. This is the main reason why a clear and organised sitemap is so important at this stage of the project.

With all the research and planning done, we were ready to move to the next phase.

We were also working in the brand identity and UI design.

We wanted to use infographic and iconography which would be easy for the ordinary people to understand and engage with.

We wanted to communicate the idea of sharing your data for improve and grow your community, in a way that everyone benefits from this action.

Colours must be selected carefully to transmit this message.

But before we could apply the style guide, I had to do a Low-Fidelity sketch for test around.

All the site must be represented on the on boarding page, and this must be responsive, so every sketch must to we done for web and mobile.

I first made a very basic pencil sketch to visualise the organisation and prioritisation of the different section and information I should include on the on boarding page.

Forms are an important part of this project, due to the amount of information users will must to input, so their design is something it was taking in consideration since the beginning of the designing process.

When I had a few Lo-Fi sketches done, I went to do some guerrilla testing, basically approaching everyone I have around and ask them to pursue a particular task. When watching them I also had the opportunity to do some contextual inquiry.

The task was;

1-Browse the on boarding page, read about Mapify and register.

2-You have now registered, you must now login.

2-Browse for the community partner page and read more about it.

At first, I made the sketches as a web resolution, after all those were done, I made the same in a mobile phone resolution.

All the sketches were also done for the mobile phone version. A Lo-Fi Marvel prototype can be tested here (some screens only)

With the Lo-Fi sketches done, it was time to move to the Mid-Fi ones, implementing all the iterations

Once all iterations were implemented, I was ready to deliver a Hi-Fidelity prototype.

This is the onboarding page, we tried to have a good balance between colours, infographic and the use of simple iconography, to show the users Mapify benefits and guide them through the tool use.

Final Desktop mockup

Onboarding

Sign In

Dashboard and Projects

FAQS

Final InVision Lo-FI prototype can be tested here

SUMMARY

This project brought a real new challenge for me. The term data collection and sharing is something not very popular those days. The project was made when all the GDPR (General Data Protection Regulation) was happening (May 2018). This means we had to be very careful about how we show Mapify to the users.

I made as a core of the project the social impact it would have on the behalf of the users and therefore in their communities. To make Mapify understandable and trustable for the users is fundamental, a tool easy and enjoyable to use. I think we did a good job communicating those ideas through our design.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade