Problems
We welcomed new visitors with nothing but a login screen
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.
- Users felt lost (mainly a login screen); very little marketing information
- Dated and inconsistent
- Language was too heavy and complicated
- Features didn’t work (chat, payments)
“Fusce sodales justo in ipsum efficitur, ut faucibus ligula gravida. Aliquam tincidunt nulla ac cursus eleifend duis blandit sodales.
Unhappy Customer
Requirements
Showcasing our value to potential customers
The old marketing 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.
- New website for attracting and inform potential customers
- Market new Predatory Reports in addition to Journalytics
- Use new branding
- New login process; separate the customer search interface from the marketing pages to avoid confusion
- Integrate newsletter signup
- Quote request and contact form
- Modernize our tech stack and methods
My Goals
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.
- rewrite value propositions and product descriptions to attract and inform new customers
- humanize the language to better connect with our users.
- unify the look for every page to build brand consistency
brighten up and modernize the look to fit new branding
process – user personas
Learning who our users were
The old marketing 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.
Insights
- Engineering team and technology had to be strong for any creative endeavors
- Support page would need more foundational fixes (nobody had answers)
- Pricing and contact had to be changed because of preference of execs and sales team (lead to issues with fake requests)
- Content before design layouts
- Difficult to develop new and old products the same time as you’re designing (quicksand)
Challenges
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.
- No time; settled on templates with little creativity
- Very few visual elements because of time restraint
- New frontend technologies to learn
- No responsiveness
- Had to do most of the copywriting myself
- No user research to work from
- Teach team about differences between benefits, features, value props, etc.
- Very sparse
- Analytics was broken before so couldn’t track growth
- No testing or QA process
As the new designer, hard to get past gatekeeping and trust in my knowledge outside of visuals
Impact
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.
- Working site that brought in new quote requests
- Able to reuse content and layouts later
- Engineering team enjoyed the new tech
- Team started thinking differently about content, language, and customer experience
Yoga takes you into the present moment. The only place where life exists.
Yoga takes you into the present moment. The only place where life exists.
Nam aliquet ante porta, gravida elit interdum, luctus porta sapien justo, at fringilla felis suscipit vestibulum. Donec sollicitudin molestie malesuada nulla quis lorem.
Amazing features
Beautiful, architect-designed renovations completed reliably from start to finish.
Nam tristique fringilla lectus vel rutrum. Mauris posuere sollicitudin risus, a efficitur velit elementum sit amet. Mauris suscipit.
Top quality
Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
Top quality
Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
No matter who you are, we’ve got what you need.
Nulla fermentum, purus in placerat mattis, ex ante bibendum ex, sed bibendum massa.
Accounting
Accounting
Accounting
Accounting
Accounting
Trust by leading organizations
“Fusce sodales justo in ipsum efficitur, ut faucibus ligula gravida. Aliquam tincidunt nulla ac cursus eleifend duis blandit sodales.
Richard Davidson
ThemeFusion Company
12x
Avada gives you the ability to build virtually any design style
Nam aliquet ante porta, gravida elit interdum, luctus porta sapien justo, at fringilla felis suscipit vestibulum volutpat metus. Praesent eu turpis ac mauris commodo.
Nulla porttitor accumsan.
Nam aliquet ante porta, gravida elit interdum, luctus porta sapien justo, at fringilla felis suscipit vestibulum.
- Nam aliquet ante porta, gravida elit interdum.
- Donec velit neque, auctor sit amet aliquam vel.
- Vestibulum ante ipsum primis in faucibus orci.
Design & Build Anything
Nam aliquet ante porta, gravida elit interdum, luctus porta sapien justo, at fringilla felis suscipit vestibulum.
Related projects
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