My Product Design Experience
|
With five years of experience in product design, I began my journey in this field at Maps.com in 2013. My role involved working on Maps101, an online educational platform, and Enjoy, a customizable app for small towns to create personalized restaurant and hotel guides.
Recognizing the potential of Maps101—despite its outdated and cluttered design—I chose to prioritize its redevelopment. This decision was driven by its strong return on investment (ROI) prospects and significant growth potential. NOTE: The designs at the top of this page are very old and created when I was still new to design. To see more current work, scroll to the bottom. Maps101 is an educational platform focused on providing K-12 resources primarily in geography and social studies. It offers a vast library of digital maps, lesson plans, and multimedia content that teachers can use to engage students in topics such as history, earth sciences, and current events. Accessible online, Maps101’s resources include interactive maps, articles, videos, and activities designed to enhance critical thinking and understanding of global connections and issues.
|
My first step in product design is to clearly define the objective.
|
For Maps101, this goal was to increase subscriptions by enhancing the product's value. To achieve this, I began by assessing its current state through a comprehensive product audit. I meticulously reviewed the platform, capturing screenshots and noting initial impressions.
Next, I consulted with Lynne, our customer service representative, who had valuable insights into user feedback and pain points. I can't truly improve a product if I don't know what our users are experiencing. I also engaged with the cartography, writing, editorial, and dev teams to understand both the product’s direction and the feasibility of potential improvements. Knowing the dev team’s workload, I prioritized understanding their pipeline to set realistic expectations on changes and timelines. |
After all of that, I learned that the content in Maps101 was already top notch.
The original Maps101 landing page.
It was in need of A LOT of help. |
Through this process, I identified that Maps101 had excellent content—well-designed maps, thoughtfully researched articles, and high-quality podcasts.
However, the platform’s outdated appearance, disorganized navigation, and confusing user experience were major drawbacks. The landing page looked untrustworthy, and after the paywall, users encountered a cluttered layout with a cumbersome navigation system. Additionally, permissions were not differentiated between teachers and students, leading to issues like students having access to quiz answers. These insights guided the development of a more intuitive, trustworthy, and user-friendly experience for Maps101. |
And, then I messed up.
In my haste to start making improvements, I pushed through an initiative to clean up the landing page.
Left: Original Maps101 landing page. Right: "Improved" Maps101 landing page.
I was told by dev that we couldn't change anything structural to the site any time soon. And, they couldn't update the button styles either. Instead of hitting pause, and doing a bunch of other design work for Maps101 in prep for a major overhaul, I instead decided to move forward and was able to get them to ditch the green gradient background and upload a new header image. At first, this felt like progress, sweet, sweet progress. But, that quickly faded as the landing page was still an absolute mess. Before it was a mess but now, it was a disjointed mess with clashing colors and styles.
Although a bit cleaner, this landing page was NOTHING like what I wanted to push through. I wanted a slick, scrollable, high-quality landing page to address users pain points and show off all that Maps101 had to offer. This landing page was not it. Not even close.
The header, although an improvement, ended up being a design pattern that wasn't effective for the rest of the product. Hello, Dana, this is design 101! I should not have even dipped my toe into a redesign without first tackling the most important part:
Although a bit cleaner, this landing page was NOTHING like what I wanted to push through. I wanted a slick, scrollable, high-quality landing page to address users pain points and show off all that Maps101 had to offer. This landing page was not it. Not even close.
The header, although an improvement, ended up being a design pattern that wasn't effective for the rest of the product. Hello, Dana, this is design 101! I should not have even dipped my toe into a redesign without first tackling the most important part:
BRANDING!
|
When I dove into branding, I realized I wanted something COMPLETELY DIFFERENT than what I had pushed through on the landing page. And, I felt pretty crummy for wasting precious dev time.
All that effort and I still wasn't any closer to my goal of improving the products value. Design is full of lessons. It's part of the process.I ate my loss and decided to move forward by reworking the user experience design of the product itself by creating some wireframes for a redesigned experience using Axure.
I made rough wireframes for ways to organize information and rework the site navigation to present to stakeholders. My plan moving forward was to fully mockup the approved wireframes for user testing. I moved on to a new opportunity before this happened. |
Maps101 wireframe 1
|
Maps101 wireframe 2
|
|
The Enjoy app was a similar experience to working on Maps101. It was another existing product that needed a serious facelift and a little bit more thought about the user experience.
Just looking at the screens below it's easy to see this app needed help. The dated 90s gradient, odd layout for the home screen, and grey button styles that looked like dead buttons. It wasn't hard to see that this app needed a full overhaul. |
Original Enjoy Fremont
loading screen. |
Original Enjoy Fremont
home screen. |
Original Enjoy Fremont
dining filter screen. |
Original Enjoy Fremont
dining list screen. |
Original Enjoy Fremont
hotel listing screen. |
|
I knew I would run into similar roadblocks trying to upgrade this app as I ran into with the Maps101 project. So, I tried to keep the structure the same whenever I could. The homescreen was not one of those places. The buttons felt almost randomly placed. I made sure to address that while leaving the rest of the structure of the app intact.
I've noticed that same pattern over the years I've worked in product design.We're often faced with the hard choice of creating a Frankenstein product but actually getting something done or creating something better, something thoughtful, and something complete but risk it never seeing the light of day.
I've spent a lot of my design career trying to navigate that compromise. Before I show you the redesign, I'd like to point out that this work is old.I was green and I wouldn't create something that looks like this today. But, I made it and I felt at the time it was an improvement not only in appearance but in functionality as well.
I used a grey stroke on the afters to make it easier to see the after screen boundaries. But, that is purely for display purposes and was not part of the design. |
|
|
|
|
|
All of this product redesign had me itching to create a new product from the ground up.
|
By 2016, I wanted to know every step of the process. And, I knew I was missing that by only redesigning and giving facelifts to existing products. So, I signed up for a UX design course at General Assembly and began the process from rock bottom, ideation.
The class was extremely informative and a lot of fun. It guided me through:
I put a TON of work into my app during this process and dedicated an entire portfolio page to it all. Click on the button below to check it out. |
After I completed the UX Design course at General Assembly, I took on some product design work for TrackR, a bluetooth tracking device startup.
|
Although I wasn't allowed to make sweeping, much needed, UX changes to the app, I was able to add a new feature, design some custom icons, create loading animations, and fix the hamburger menu.
The first thing I noticed while using the TrackR app was the odd hamburger menu. Was this a new design trend I hadn't yet experienced? I was curious, so, I asked about it. No one knew why it was out of alignment. I quickly realized that it wasn't intentional. And, I knew I could make that one quick fix.
After that I moved on to adding the new feature of item settings so users could have control over the naming and details of each of their devices. 
|
Although I don't consider myself an illustrator, I did enjoy the challenge of designing custom icons for the app.
|
|
|
This sticker sheet was created by my manager at the time is from her Dribbble.
|
When I arrived at Procore, I experienced more of the same as I experienced at Maps.com. Their product, although high quality, was extremely dated in appearance. Thankfully, the design team I was assigned to was already in the redesign process and I began working on the Procore product redesign called Sequoia.
Sequoia was set to clean up and brighten the Procore platform as well as address usability issues with the nav. As a team we touched each and every page of the app, a huge endeavor. It was often joked that Procore was 21 apps in one. And, that really was the truth. It is a large app with a large design team supporting it. |
After six months of working on Sequoia, I transferred to the marketing department but, continued to work on product projects.
|
While on the marketing team at procore, alongside creating a plethora of marketing materials, I was tasked with creating a custom forum for Procore users and construction professionals called Jobsite.
Jobsite was set to be the forum for the construction industry. You could follow industry leaders, learn new skills, and become an important voice in the construction community yourself. I spent months in Sketch creating everything from onboarding to error states and everything in between. In the end, I had created an entire platform from the ground up for desktop and mobile. I passed all of my sketch screens to the dev team via Zeplin as industry standards like Figma were still in their infancy at the time. Check out my Jobsite work in my Procore portfolio piece by clicking the button below. 
|