.png)
NPS 4+/5
(ease of use)
App prototype to approve map content in newsrooms, real estate, municipalities, and more.
Play with the prototype
You have just finished a map design… and now what? How do you know whether the map you created is ready to be delivered?
Assume you are a content creator in a newsroom. Your manager asks you to create a map showing a news story. So, you decide to design a map that explains the news.
Map content creators talked in our support chat about their map creation approvals. Creators get approval from their managers, colleagues, or customers only at the end of the map creation process, and if they say “No”, the created maps were just a waste of time.
Therefore, after defining the user need of receiving approval during the map process creation, I started my user research. The takeaway from this research is that showing feedback within the same map-making platform helps creators stay more focused on their tasks while working remotely.
Solution 💡
I decided to challenge myself on this problem by creating an approval flow app. In this way, content creators can receive feedback during the map creation and approvals at the end of the process, all within the same app.
In the app I created, multiple users can preview, comment, give feedback, and eventually approve the map content. That ensures that the app covers all the usability requirements.
KPI Metrics Results 📈
Results have shown a score of 4+/5 on the Net Promoter Score (NPS), finding the app helpful and easy to use. To check the Figma prototype, click here.
Discovery
I started my design process from a user need, which is receiving feedback during the map creation process. To study this user need, I have begun my user research creating two personas, Jhon the NERD and Rose the NEWB, which reflects the typical users of the Mapcreator company.
Then, I interacted with people of a similar profile on LinkedIn and Instagram, and on UsabilityHub I did some surveys to gather insights about their map approval process. In this way, I was able to create the Empathy Map, which allowed me to narrow down what typical users say, do, might think, or feel.
Define
My user research has shown what the priorities in a map approval flow are. Comments, approvals, feedback, and notifications have proven to help get the map ready to be published. From the Empathy Map, it seemed that people in the map creation process were feeling anxious while waiting for approval.
From the research, I have gained helpful insights from users that told me that opening emails during the creation process that contain feedback made them lose focus. This insight pushed me to research this topic, and I have been able to find an interesting article in UX Collective about users being confused by the continuous change of context (here is the link). The article explains that by gathering feedback on external platforms, which could be more than one, users can lose focus in the process. Therefore, this article further validates the problem that graphical content, like maps in my case, can benefit from receiving feedback and being approved within the same platform.
Hypothesis 🤔
My hypothesis was: Can I design an approval flow app that shows both comments and maps within the same platform and make content creators more focused on a task?
Test 📝
I have decided to proceed with the project only if the app concept was rated higher than 4/5 in the NPS by asking users if they would have considered the app helpful.
From tasks flows
to UI Design 💪
For the UI Design, I started with competitor research by testing their products. That, along with the gained insights, has allowed me to create the final Content Creator Task Flow, which helped me with the Sketches, Wireframes, UI, and Interactive Prototypes.
UI Design Testing
and Interactive Prototypes 👩🏻💻
Here comes the part I have enjoyed the most. I have created and tested three types of prototypes: AddC1, AddC2, AddC3.
AddC1
I have designed AddC1 (in the image below) to be easy to understand, and I tested it to see if it was unbiased. The results have shown that 100% of the users could complete the task in 00:04 seconds. However, do you see a map in the last frame (4) below this text? I think not. Even though the results were positive, the prototype did not meet the core feature of displaying the map while reading the feedback simultaneously. So...
AddC2
I have created AddC2 (image below), developed according to the research of competitors' applications. AddC2 fulfills all the basic requirements. However, the test has shown that 90% of the users have completed the task in 00:10 seconds, and 10% could not complete it. That is why...
AddC3
I have eventually designed AddC3 (image below), a hybrid of the two experiences, made with the first two frames of AddC1, and the last three AddC2's frames. AddC3 fulfills all the basic requirements, with 100% of users able to complete the task in 00:04 seconds. That was a success!
UI Design updates 🆕
These tests gave me some insights that let me update the Content Creator Task Flow, Interactive Prototypes, and the full UI Design. Click here if you'd like to test it out.
Result and conclusion
The Mapcreator Approval app had a 4+/5 positive NPS on how useful this app is for map content creators. I have received positive feedback on the app's ease of use, with a 4+/5 score as well.
At the beginning of this project, I could never have imagined how important it was to display comments on the same platform where graphic content was created. User research, usability testing, comparison, and design helped me understand the why, how, and what of project development.
Next steps
Never stop learning 👩🏻🏫
As we have seen in the UI Design, there are other flows to test. The first one in line is the notification flow. Usability testing allowed me to gather some interesting insights, such as showing the time (the "manager's name" is typing), micro-interactions, customization of options, and even map filtering or a search bar to find a specially created map.
Another important insight I got is about the choice of colors for the map approval since the Mapcreator color (#ff5c5c) could be confused with an alert or error message.I am sure that further tests will help me to figure out whether these features are necessary or not.