MapZone

Pin your favorite spots and share your photos with friends! Let MapZone organize your notes as you plan your next travel.
Role
UX/UI Designer
Deliverables
Personas
Empathy Map
Competitive Analysis
Journey Map
Sketches
Storyboard
Paper Prototype
Wireframes
Low-Fidelity Prototype
User Testing Results
Branding
High-Fidelity Prototype
Specs
Length
3 weeks
Tools
Figma
Project Overview
One of the projects that the bootcamp I went to assigned me was to collaborate with someone who will act as my client to design a prototype for a website that would allow travel enthusiasts to log information on a map.  
Problem
I knew somebody who had an idea she wanted to pursue. When I approached her to take her on as my client, she told me how she wanted a user-friendly tool that would allow people to add unlimited layers to a map in which each layer consisted of pins that store metadata (i.e. address, city name, dates visited, notes, pictures, etc.). Together, we discussed how to develop her idea into a tangible product that would fit her needs.
Solution
The solution was simple: a desktop application with an interactive map that allows users to add pins and store a plurality of notes.
Target Audience
My client had already done her research (which saved me some time) on who she intended to cater this service towards. Here is the information she provided me:
  • Ambitious people who like to plan their travels
  • People who travel for work (i.e. geographical researchers, scientists)
  • Travel bloggers/influencers
Empathy map
After about an hour of getting to know my client and better understanding the limitations we have on her idea, I set out to begin my end of the work. To start, I put together an empathy map based on the user data I was provided and my own dive into the user’s mind.
Journey Map
If we take a look at the user’s journey, we can envision how to complete tasks in a simple way. The product serves as a tool to input information and so I wanted to keep that as the main goal to achieve in the final product.
Competitive Analysis
Google MyMaps is the primary competitor out there that functions similarly to what the client wants. It bears the minimum function for its purpose and has likable features, but limits users to how much information they can add. While it is a great tool and resource, my client saw this as an opportunity to improve upon it.
Solution Sketches
I started brainstorming some ideas by taking key points from the initial client interview and turning them into sketches. I had just learned the Crazy 8's method and wanted to try it out- 8 solution sketches in 8 minutes. This fun little exercise is not only creative but cultivates innovation which I liked. From there, I picked the one solution that best represented my client's idea.
Storyboard
Below is a storyboard I drafted illustrating a combination of the user journey and the drafted solution.
Paper  Prototype
Before designing the wireframes on Figma, I spent time creating a paper prototype. This activity was helpful in turning an idea into a tangible product to see how certain actions could be navigated. It was flexible for this project and I could adjust little things as I saw fit before recreating it digitally.
Wireframes
Now that I had a good framework to start from, I used the Figma program to design wireframes which became the building blocks of the first version of a lo-fi prototype.
Low-fidelity Prototype
User Testing
My goal was to see if the interface I designed was user-friendly and whether people would use this kind of product. In order to help push this service out for my client, I had to measure the success rate. So I conducted a screener survey to find some users to interview. The interview process then took place over Zoom where I asked users to perform three simple tasks:
  1. Add a pin
  2. Add notes under the newly added pin
  3. Share the map
Here is the positive feedback I received from users: 
  • Map was user-friendly and intuitive to navigate
  • Layout was clear and easy on the eyes
  • Tasks were not difficult to complete
When asked if they could see themselves using this product, the users agreed they would, however, 33% of the users said they would only see themselves using this product if they were planning a trip jointly with someone else. Although I was hoping there would be more interest, it seemed that the product would be most beneficial in an environment where multiple people are traveling together, according to this group of users.
I ended the usability test with some feedback questions and I also received some suggestions for improvement, such as:
1) When hovering over a pin, a thumbnail (i.e. picture of the city or surrounding streets) pops up along with the name label so that it provides a pictorial recognition of the area pinned.
2) Adding a filter button for all the pins so it helps users search for a desired pin easily.
3) Adding an icon library to customize pins in addition to color customization.
Branding
Before I presented my findings with the client, I wanted to provide a sample of a high-fidelity prototype with complete branding of colors. This extra step would help the client see how the finalized look may appear. Hues of teal and coral are popular when it comes to “travel” and “paradise”. So I played around with comfortable shades that gave the prototype a nice pop of color. I also wanted the typeface to be legible and so I went with the font Noto Sans which can be comfortably read at different font sizes.
High-fidelity prototype
Next steps
After presenting to my client the research, solution, and feedback from this project, I pushed the idea of implementing some of the suggestions that would enhance the user experience in the next round of development. This would allow opportunities to bring other elements in that may have never been thought of before, and a second round of usability test will tell us more about how favorable users perceive the iterations.
Conclusion
These 3 weeks were a great learning experience for me as it was my first collaboration with a client. I was able to dive into brainstorming methods and learn the sort of questions to ask during an interview with a client. The final product is only the beginning of what could be a continuation of exciting product development.
Takeaways from this project:
1) Nothing is perfect the first time.
I was pleasantly surprised with the feedback and suggestions from the usability test. Having a new set of eyes interpret my work is helpful because it allows room for improvement. As a young designer, I aspire to grow and take in tips on what can make a faulty product better. Finding better solutions from constructive criticism is a skill and I want to take that with me as I move forward with other projects in the future.
2) Consistency is important
As a designer, I find it easy to have so much creativity that I forget to go back to the basics and make sure I am not designing outside of the limitations I am given for a project. The client is priority and sometimes ideas may not align with what the client is looking for or the client may ask for things that are not possible within the realm of solutions. Being consistent with the MVP and making sure I can back my designs up by research is essential to creating successful wireframes and prototypes.
Next →
LinkedinEmail