case study

Redesigning Optoro’s website to enhance usability, back-end control, and product positioning

As Optoro’s product and offering have continued to evolve, so have its positioning and target audience. With each shift comes the desire for a visual change to help indicate an altered direction. 

Optoro’s product offering changed in early 2020 and I led a lightweight refresh of the website to support the go-to-market for the new product partnership. However, there were major limitations due to the outdated WordPress back-end and extreme time constraints (16 days total).

Over the next two years, I came to discover that the back end of our WordPress site had become a whack-a-mole of issues — I would try to make an edit to something and it would break 5 other things elsewhere. Creating a new page or implementing any kind of layout shift required a developer, which (of course) costs money.

In early 2022, the request for a refreshed website came from leadership — but this time I had more time to work with and MUCH more know-how. I hadn’t been satisfied with the design in 2020 due to the time constraints, my lack of WordPress experience, and still being in the midst of exploring the updated visual identity, so I was delighted to have the executive buy-in to take on the website for a second time.

With more time, a rock-solid content partner, a deeper understanding of WordPress (thanks to our outstanding development agency), and a clearer vision for the brand, I knew that I could solve the most immediate needs while setting us up for future flexibility and control.

I approached this site rebuild with two primary questions:

  1. How might we communicate the company’s more refined positioning, with messaging, layout, and graphics?

  2. How might we build a site that we can actually control as the company continues to grow and change?

the before

2016

2020

the 8 year “glow-up”

my role & scope

I led the design and development processes and collaborated closely with the Director of Content on copy and structure.

Due to time constraints, we planned for a two-phase execution. For Phase 1, we had approximately 2 months (Feb-Mar) to launch an updated home page, 4 product pages, and 4 use case pages ahead of Shoptalk — one of the most popular annual retail conferences. 

Since Phase 2 would be the less business-critical pages (careers, blog posts, etc.), we planned it for June-August, giving us enough time to learn from Phase 1 and optimize effectively.

design (UX, UI, and graphics)

user testing

project management

wireframing

Using positioning documents from our Product Marketing team, I collaborated with the content director to create wireframes to map out the site content structure and layout. By doing this, we could work concurrently on our separate tasks with the same vision, allowing us to move as quickly as possible.

designing custom modules

Next, I needed to design the custom modules that would be developed into WordPress for us. Our site still used the very rigid theme-based back-end for WordPress, and to have more control over the site (and drastically reduce the need for development budget), we were making the change to the Gutenberg drag-and-drop system.

Designing the modules came first because they needed to be developed, then the pages would be built using the modules, and copy and graphics were added last. These became — and still are — the building blocks for our website.

I also took on learning Figma for this part of the process to address the friction I’d had with the development team 2 years prior. While it was a lot to take on at the time, it was absolutely the right decision — we dramatically reduced the rounds of edits (and frustration) by simply being able to use comments and share screenshots in a single place.

designing the visuals

The site we had from 2020, due to the limitations of that project, still looked quite dated and a bit amateur. I was excited for the opportunity to (finally) fully implement the refreshed brand. The most impactful changes were the graphic styles and the use of color.

First, using the 3-part circular solution graphic, I tied each part of the product back to the complete solution using color and small wayfinding elements. This treatment was also woven into pitch decks, one-pagers, and other sales enablement materials.

Second, I wanted to bring people onto the site. Buyers generally want to see what software looks like, but there is also a desire to understand it’s function in context. The three parts of Optoro’s product were focused on 3 different parts of the returns process, but also interacted with different users. 

Bringing in this new visual style challenged me to find interesting ways of illustrating our software at different levels of granularity — from a product level, then features. In testing and review, I learned that these visuals helped with product comprehension as well.

outcomes

200% increase in inbound demo requests MoM

16.3% increase in inbound-to-opportunity rate QoQ

23% increase in average time on product pages 

80% reduction in development budget

lessons learned

Over time, we’ve made some copy and graphic updates and added a new page or two. But in 2024, we refreshed the site again due to new positioning. We updated 4 existing pages and added another 4 net-new — I was able to build it all without developer support and completed the entire update in 2 weeks (a 75% reduction in time!). 

Now, a new page can be built and live within an hour. 

All in all, completing this work has set Optoro up for the future as the company continues to react to the changing landscape. Selfishly, it’s great to have control over the look and feel on top of being able to quickly adapt and make site adjustments when implementing new digital strategies.