Problems

We welcomed new visitors with nothing but a login screen

The old Cabells site served primarily as the login portal for existing customers. There wasn’t much info for potential customers who wanted to learn about the products. This left a barrier between us and our audience, along with the overly technical wording throughout the site.

  • Visitors felt lost

  • Site was dated and inconsistent

  • Language was too technical

  • Features didn’t work (chat, payments)

Requirements

Showcasing our value to potential customers

We needed to split the website into two pieces—a place to market our product suite and another to use it. With a short deadline already set for upcoming product releases, the site had to be designed and built very quickly. Creativity would have to take a back seat.

Apart from planning the layout, user flow, and visual design, there was also the issue of page content. It’s common practice in the academic world to use overly complicated language, but I wanted to avoid this. Despite the academic industry being our target audience, we are still just providing a service. Our language should be simple to understand so customers could get what they need quickly.

We would have to refocus our text from what our tools did (features) to what problems they solved (benefits).

  • Improve user experience for visitors and potential customers

  • Create a new login process separate from the marketing site

  • Market new products in addition to Journalytics

  • Update style to match new branding

  • Add quote request and contact forms

  • Update our tech stack with modern front-end tools

solutions

Steps of the process

User research

In order to create the best user experience, I needed to know more about our customers. Because we had such a small company and no budget for comprehensive user research, I decided to interview our top leadership to create user personas based on their combined knowledge. These fictionalized personas included early career researchers, librarians, tenure committee members, and more. These were also grouped into those with purchasing power vs non-admin users.

User flows & wireframes

Next, I sketched onto paper the user flows for the site layout. These included product landing pages, contact and support, about pages, and more.

Digital wireframes and polished mockups in Adobe XD (a very early version!) followed. I decided to use very common page layouts to avoid any complications or delays during the front-end process.

Copywriting

Simplifying the language is easy in theory, but how do you describe the goal to other copywriters on your team? For a clear mental picture, I turned back to my Atomic Age rebranding inspiration. I remembered the old Walt Disney documentaries that would explain complex subjects in an approachable style. Those would act as our templates for how we would explain our products, metrics, and all other copy.

We did not have a dedicated content manager at the start, so I wrote most of the new content. This also helped to establish a unified tone for future team members to follow.

Once we brought on a new writer, I set up an editing process in Asana so we could collaborate going forward. We covered everything from taglines to value propositions, product descriptions, microcopy, and everything else you’d find on a standard marketing website.

Front-end technology

The old site was built on custom code and dated technology. From my research and experience, I recommended we use Angular and customize Bootstrap to take advantage of newer frameworks that did a lot of heavy lifting for us.

Insights

  • The customer support page would need more foundational fixes because we had very few pre-written answers and no technical writers

  • Pricing and contact flows had to be changed or removed because of preferences from execs and sales team

  • Content needed to come before design mockups in the future

  • Developing new and old products at the same time that you’re designing is difficult and feels like quicksand

Challenges

The two major problems we ran into were the lack of consistency and room for creative exploration. The website was built from the ground up while we were still rebranding. Everything was constantly changing and difficult to track. Because of the short deadlines, some of my more “ambitious” design ideas had to be scrapped or postponed.

Other challenges

  • Short deadlines led to a sparse site and very little creativity

  • Very few visual elements because of time restraint
  • New frontend technologies took a long time to learn

  • Limited website responsiveness for mobile devices

  • Copywriting was a huge undertaking

  • No real user research to work from

  • Team had to learn about differences between benefits, features, value props, etc.

  • Analytics was previously broken before so couldn’t compare new growth

  • No testing or QA process
  • As the new designer, hard to get past gatekeeping and distrust in my knowledge with anything not related to visual design

  • Without better planning, pipelines, and front-end expertise, engineers struggled to code anything beyond very simple pages

Impact

In the end, the new website was a big improvement and functioned as intended, but other projects quickly took priority so the website redesign was more of a stop-gap measure than anything.

The working site now brought in quote requests leading to new sales. We were able to reuse content and page layouts going forward. And after some initial pushback, the engineering team ended up enjoying the new tech stack. Finally, since this was a new approach for Cabells, the team was able to start thinking differently about content, language, and the full customer experience.

Old designNew design

Related projects