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.
Home
Product – Single
FAQs
Contact
Home Page – 4
The Blacklist
The Whitelist
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.
Related projects
