Foreword
Project Overview
Kelly, the owner of small, legal-services provider Saponaro, Inc, needed my help; her company’s website was interconnected with marketing platform, Hubspot, but they weren’t actually using the service.
She needed me to transition them away from Hubspot so they could decrease their overhead and simplify their website.
Challenge
Untangle Kelly's website from an unused marketing platform, ensuring it stays fully-functional in the process.
Result
Used the Design Thinking framework to liberate Kelly's website, maintain full functionality, and improve her bottom line .
Chapter 1
Empathize with the User
The Interview
In order to properly address Kelly’s problem, I conducted a USER INTERVIEW with her so I could understand her needs.
To hone in on the specifics of her problem, I asked the following questions:
- What are you hoping to accomplish?
- Why? What are the business goals and motivations for fixing this problem.
-
What are the restrictions and parameters?
- Budget?
- Time-Frame?
- Platform Limitations?
- What else do I need to know about this project?
Why These Questions?
I ask these questions before starting a project for a couple reasons:
- First, I want to be on the same page as my clients and establish a relationship of of open communication and mutual respect.
- Secondly, I want to make sure I am not entering into problem-solving based on assumptions; a clearly-defined problem leads to an effective, targeted solution.
Chapter 2
Define the Problem
Needs Identified
Kelly’s needs became clear as a result of our conversation:
- She needed to downgrade her subscription to Hubspot without breaking her website.
- She needed this because the services were costly, but unused.
- She needed this done ASAP (within the month), to avoid any additional charges.
- She didn't want to get tied up in another ongoing cost in the process. (She had reached out to other design firms, but they wanted her to sign on for continuing services)
Researching Further
Through some investigative research, I discovered that several links to important content were being facilitated through the Hubspot platform. These links would no longer work if Saponaro, Inc. ended their subscription, creating a frustrating user-experience on their website.
Using GOOGLE SHEETS, I logged all of the changes that needed to be made: where each link was located, what image it used, and what content it linked to.
Problem Defined
The problem was clear: Hubspot adds extra code to their links in order to gather data about how users interact with them, but my client wasn't using that data! For Kelly, these extra lines of code weren’t returning on her investment.
Communication and Goal Setting
I communicated to Kelly what the project would entail and answered any questions she had for me. She expressed gratitude that I took the time to fully understand their problem, and we agreed upon a budget and time-frame for the job.
Now it was time to work on a solution.
Chapter 3
Ideate Solutions
The Hubspot content was embedded in the HTML of the website.
To solve Kelly's problem, I needed to replace it with new, simplified code that removed the unnecessary Hubspot functionality —decreasing Saponaro, Inc's overhead in the process.
Chapter 4
Create a Prototype
Using link and image tags, replacement links were created to mimic the appearance and functionality of the existing content. One by one, the Hubspot links were replaced with simplified HTML.
The new links used 75% less code, but provided the same essential functionality of the originals.
Chapter 5
Test It Out
Error Prevention
To safeguard against any unforeseen circumstances, I saved copies of the pages I would be editing and downloaded the existing Hubspot data for the CTA’s. While creating the new links, I tested them thoroughly to ensure they functioned properly and worked at all screen sizes.
Testing Goals:
- To ensure the link worked as intended and led to the correct page/content
- To compare how the new link displayed correctly at all screen-sizes, from mobile to desktop
- To test the link on various browsers and verify compatibility
Problems Identified (and Corrected)
HTML/CSS, JAVASCRIPT, and various plugins connected to a website can all affect the appearance of elements on the page. Sometimes, links would position themselves or resize themselves in ways I didn’t expect.
To correct this problem, I sought out the source code of the site, using GOOGLE CHROME'S DEVELOPER TOOLS to identify what was affecting the new content. Once I found the culprit, I wrote new code so the links displayed as they should.
When the links were ready, I ran them by Kelly to explain how they worked, allowing her to test them, and answering any questions she might have before I made the changes live.
Epilogue
What I Learned
Ultimately, the links were successfully updated and Saponaro, Inc. was grateful to save some money each month. Working with Kelly to solve her company’s problem was a joy, and I learned a lot in the process:
1.) Communication is key
My early conversations with Kelly were paramount in making this project a success. Through them I was not only able to identify the problem that needed to be addressed, but was able understand and empathize with the reasoning behind it. This created clarity and purpose for the job, and made it feel like we were in it together.
2.) Testing is important
Much of this work was repetative, and it would have been easy to assume that if the first updated link worked fine, the rest would too. But the tricky thing about web design is how elements can be affected by various outside sources, which can lead to inconsistencies from page to page.
Sometimes a link wouldn't work the way I thought it would. The design would get messed up by some back-end stylesheet and I needed to find a way to fix it.
By testing as I went I was able to catch those errors and make the necessary changes before it affected the end-user.
3.) People love it when you solve their problems
This may be an obvious lesson, but I was encouraged by the amount of gratitude Kelly expressed after I solved her company's problem.
I love to see that my work has brought something good to someone else's life, and it makes me excited to continue solving problems with DESIGN THINKING!