Journalytics Marketing Website

The complete source for academic journal info, evaluation metrics, and submission details to guide researchers and institutions in getting the most impact from their research.

Stats

Roles

UI/UX Design, Editor-in-Chief, Project Management

Type

web

Year

2017-now

Tools

Adobe XD, Angular, Visual Studio Code

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.

Market Consulting

Online marketing to secure customer retention, leads, and sales.

Nam aliquet ante porta, gravida elit interdum, luctus porta sapien justo, at fringilla felis suscipit vestibulum.

Design & Build Anything

Nam aliquet ante porta, gravida elit interdum, luctus porta sapien justo, at fringilla felis suscipit vestibulum.

Cabells_Mockup_home Dell Latitude Wireless
GrayGray
Old designOld design

Maecenas volutpat ipsum sit amet risus varius pretium quis eget est. Vestibulum placerat blandit posuere. Sed dapibus dui quis pulvinar feugiat. Maecenas vel euismod est. Integer suscipit neque cursus, mattis lorem eget, vestibulum enim. Aliquam in erat ligula. Cras sit amet scelerisque libero, vitae mattis odio. Donec nec dignissim risus. Aliquam quis tristique eros. Nullam gravida magna vehicula felis pulvinar vulputate ac nec erat. Donec ornare fermentum massa sed dapibus. Proin orci erat, laoreet ut pulvinar vel, finibus at mi praesent malesuada dictum.

Nullam eleifend neque ac sapien scelerisque aliquam id sit amet ligula. Praesent quis sapien sit amet felis egestas auctor eget in neque. Donec in imperdiet quam, et dignissim lectus. Integer nec lacus efficitur, eleifend nisi nec, semper risus. Sed rutrum a neque ac hendrerit. Praesent consequat arcu euismod mattis mollis. Ut nunc ligula, ornare quis pharetra at, porta nec diam. Sed est quis mi fermentum dapibus. Cras augue urna, blandit vel urna eu, dictum volutpat nisi. Fusce in posuere massa.

Your Content Goes Here 70

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

Related Projects

2021-11-08T00:29:22-07:00
Go to Top