Timeline
Sept 2023 - present
Role
Role
Lead Designer
Software
Software
Figma + Adobe Illustrator + Adobe After Effects
OVERVIEW
College planning made simple
College education and college advising should be accessible to all. Not all students can afford pricey admissions advisors, which puts people of lower socioeconomic backgrounds and people from traditionally underprivileged communities at a huge disadvantage. Mapt aims to close the gap by offering everything a family needs to feel empowered for higher education, all in one convenient mobile app.
Mapt’s goal isn’t just to help students get into college; we want to help them get into the right college to help them thrive, take control of their own world, and experience life to its fullest.
Core Problems
Since we want to help entire families through the college planning process, our app has a unique challenge of appealing to both students and parents, who have their own pain points.
Students are concerned with making the right choices
The transition from high school to college is a huge period of transition, filled with life-altering choices. Whether it be picking the right college, picking the right major, or choosing their extracurriculars, students want to know how to set themselves up for their ideal future.
Parents want to balance encouragement and pressure
Parents want to balance encouragement and pressure
It can be hard to both keep a close eye on a student’s progress and not have the student feel pressured or monitored. Parents want to tee their students up for success while giving them the space they need to grow into their own selves.
Laying the Brand Foundation
I was brought onto the team during a period of huge transition - the app was rebranding itself from Undecided to Mapt, and needed a fresh look. With my previous brand experience, I set out to create a new identity for the company.
Creating a fresh identity
As lead designer, I was tasked with not only creating a logo, but renaming the company! During the ideation process, I drafted dozens of sketches. Most of them are “stream-of-consciousness” style - if I had an idea, I’d grab the nearest pen and paper to jot it down, and worry about being tidy later. Next came refinement - I took my best ideas and brought them to the digital world, slowly distilling my concepts down to the best ideas. Mapt is an educational app, but I wanted to go beyond the standard book or graduation cap motifs. I explored themes of ascending, growth, wayfinding, and more.
The final logo is a combination of a star and leaves, which emphasizes the key principles of Mapt - our goal is to have students is grow into a stars, and we will be your north star in finding your future.
Establishing the basics
What’s a design system without the foundation - colors, typography, and more? Beyond that, what’s a team without their core principles?
I worked closely with the founding members to set the stage for our future design choices, as well as what principles guide us through our decisions.
Illustration system
We planned to include a variety of visuals, from thumbnails to cover images. I created a shape language that would allow for easy scalability without sacrificing whimsy. Our characters are based on simple shapes that grow in complexity as a user grows, with different shape language for both students and parents.
These rules allow for students to see themselves in the characters in an abstract sense, and allow for an endless combination of designs - including our mascot character, Deci!
Shaping the App Experience
Working in close, real-time collaboration with our developers, we launched an overall rebrand and overhaul of our current features based on user feedback.
Each new feature redesign would begin with a brainstorm with the team, where we would discuss how to create the best version of the app based on analytics and feedback. Then, it would be passed off to me, where I’d map out flows and shape the UI.
Each new feature redesign would begin with a brainstorm with the team, where we would discuss how to create the best version of the app based on analytics and feedback. Then, it would be passed off to me, where I’d map out flows and shape the UI.
Problem - How can we create a guided roadmap that is engaging and suited to students wherever they are in the planning process?
The Roadmap feature is meant to give students a step-by-step guide on how to plan for college. It is broken down by year, with tasks from freshman to sophomore year. However, we found that in user testing, users who are past freshman year wouldn’t look at the tasks in previous years, missing out on important tasks that should be completed.
The Roadmap feature is meant to give students a step-by-step guide on how to plan for college. It is broken down by year, with tasks from freshman to sophomore year. However, we found that in user testing, users who are past freshman year wouldn’t look at the tasks in previous years, missing out on important tasks that should be completed.
This told us that the Roadmap was too tied to time, and that students would hone in on what they should do during their current year instead of the big picture. Also, many of the tasks like “set up a meeting with your school counselor” or “create a brag sheet” would bring students away from the app, and wouldn’t give any guidance or motivation on how to actually do it.
Solution - Restructure the tasks to be based around subject, and celebrate milestones
We decided to change from a checklist-esque Roadmap to a reward based Milestone system. In this design, tasks are based on subject, so that whether a student is freshman or a senior, they will get all the tasks done. The number of tasks has also been cut down, so that students will have clearer priorities instead of being bombarded with all tasks at once. Tasks are also more linked to in-app actions, like completing courses or chatting with our advisors, which keeps users engaged and learning about the college process all within the app.
Once completed, the milestones on the homescreen would automatically repopulate with the next step, so that the next step forward is always clear. Users would also be free to reorder their Milestones in case they'd like to focus on a different subject first.
We also integrated a badge system that would celebrate a student’s progress each time they completed a Milestone - some of these tasks were big deals, and deserved to be rewarded! This also provided gamification which would motivate students to see the process through to the end.
Problem - Users aren’t engaging with discovery content
Mapt features a wide range of content that parents and students alike can learn from, with topics like mental health, financial planning, opportunities other than college, and more.
We also offer different content types, such as crash courses, assessments, journals, and tips. However, our analytics showed that users were only engaging with the few pieces of featured content, and not exploring much else.
Solution - Reorganize content with card-based illustrations
To increase engagement, we removed potential roadblocks of having to tap into subjects or searching individual pieces of content. This meant all content was directly in front of a user, one tap away instead of nested inside a topic. If a user felt confused on where to start, they could always fall back on the featured content for a quick selection.
I also created graphics for each piece of our learning content, using our color system and shape language to craft unique illustrations. Each subject also has its own color palette with a primary and secondary color, to increase scalability and consistency.
Small Team, Big Opportunities
As a small startup, I had the opportunity to get my hands on a variety of projects and use my skills beyond the app design. This meant working closely with all members of the team, from developers to writers. I had a hand in making videos, copywriting, and even a bit of code, which all made for fun experiments that tested the limits of my skills.
Marketing
I designed several static advertisements that were pushed to users across Instagram, Facebook, and more.
I also created the first draft of our app store screenshots, which had thousands of views across the Google Play and Apple App Store.
Animations
Using Adobe After Effects, I animated a series of videos that would be run as advertisements such as our rebrand announcement, as well as animations that would show in the app.
Takeaways
After working a corporate position, it was a huge change in perspective to jump to a small, fast-paced startup. I learned a ton about the product management pipeline, with a few lessons in particular jumping out to me:
- To stay open and flexible to new things in order to learn all I can
- To stay open and flexible to new things in order to learn all I can
- Rapid ideation is key to get the best possible product to market, as fast as possible
- Things are always a work in progress - anything that is designed is always subject to reworking and improvements
I’ve had an amazing time working on such a wide variety of things, as well as working on a product with a mission I truly believe in. If you’d like to see more of Mapt, visit our website and give it a try yourself!
I’ve had an amazing time working on such a wide variety of things, as well as working on a product with a mission I truly believe in. If you’d like to see more of Mapt, visit our website and give it a try yourself!
Want to chat more about this project? Shoot me an email at kellyjincreative@gmail.com!
