Cabells Website

Cabells Website

UI/UX • BRANDING • COPYWRITING

The old site had little direction and left visitors feeling lost. Cabells.com needed to showcase the value of the product suite for potential customers from first visit to requesting a quote.

  • rewrite value propositions and product descriptions to attract and inform new customers.

  • humanize the language to better connect with our users.

  • separate the customer search interface from the marketing pages to avoid confusion.

  • unify the look for every page to build brand consistency.

Old Website

The old Cabells website mainly served as the login portal for existing customers. There was little information for potential customers who wanted to learn about the products. This, along with the overly technical wording throughout the site, left a barrier between us and our audience. We first needed to split the website into two parts, a marketing site to discover 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. I decided to use common page layouts to avoid any complications or delays.

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 complicate the language. I knew, despite working within the academic field, that we were still providing a service. Our language should be simple to understand so customers could get what they needed quickly and easily. We needed to refocus of our text from what our tools did to what problems they solved.

Old website elements and page content

For direction on how the content should change, I turned back to my Atomic Age branding inspiration. I immediately thought of the 1950s Walt Disney documentaries that would explain complex subjects in simple and approachable ways. Those would act as my templates for how we would explain our products, metrics, and all other copy. We did not have a dedicated content manager at the time, so I wrote most of the new content myself. I also did this in order to establish a unified tone for future team members to follow.

In order to create the best user experience, I needed to know more about our customers. Because we had such a small company, I worked directly with the top leadership to create user personas. Next, I sketched onto paper the user flows for the site layout. Digital wireframes and polished mockups in Adobe XD followed. We partner with outside companies to provide additional services, so I also needed to incorporate external products and designs seamlessly into ours.

Wireframe page designs

UX process and UI elements for an upload screen

Final page mockups

Problems

The two problems I ran into were the lack of creative exploration and consistency. The website was built from the ground up while the rebranding was still going on so things were constantly changing and difficult to track. Because of the approaching deadlines, some of my more ambitious design ideas had to be scrapped or postponed. In the end, the 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. Next up on my todo list was the customer interface redesign.

Concepts for specialized ‘About’ pages

Related Projects

2019-08-17T20:50:03-06:00