comsysconnect-3
comsysconnect-portfolio

ComsysConnect

ComsysConnect is a cloud-based service offering customer service solution to businesses. I began redesigning their previous website by looking at the products and desired conversion. Turns out customers didn’t really understand what they were selling nor did they figure out which products were best for them. So before beginning the redesign I began thinking about the products.

They went from having more than seven products with all kinds of expansions to offering just four products. With the products defined I began thinking about the exposure and feeling each product had to convey. It turned out each product was complimentary so I provided a timeline view at the end of every product to show where its functionality wouild benefit the customer. To add some clarity between the products I provided each one with a unique theme color and icon.

From there I was able to design the “system” behind comsysconnect.com. A system is the way elements on pages are consistent and will be shown site-wide. It is also the underlining technology. I chose for an AngularJS application running Express, MongoDB and Node in the background. What this does is provide the end-user with a very smooth user experience thanks to client-side rendering and asyncronous loading.

One of the challenges with the technology stack I described above is indexing (SEO). Being a marketing website it is absolutely crucial to get indexing just right. So what I did was add a middleware to ExpressJS that provides a cache snapshot of each page when the user adds the following to the URL: ?_escaped_fragment_=. Wait, byt real users would never add this to their URLS.. so what is the point? Well turns out bots do add this affix to URLs when they detect a javascript website. So in the end Google/Bing/Yahoo can receive cached pages – reducing the load on the server from typical requests – while end users benefit from the rich page-to-page clientside rendering.

One of the design challenges that remained was to offer the product lineup and immediately inject the idea what the products are for and how each one compliments the other. I thought of a system that went from very abstract to technical. Each product has two tabs – features and summary. My features list is a long-scroll with blocks; each block tells the story of a typical problem and how Comsys’ products can solve these issues. Next summary is there to tell the bits and bolts running on the background. These are important for customers to decide whether the product is right for them. Think of the technical implementation of voicemail, recordings or the max number of agents the products can support. These are of course especially important for multinationals or power users.

  • Technology

  • AngularJS
  • CSS3
  • HTML5
  • ExpressJS
  • MongoDB
  • Launch

  • 2015
  • Visit

  • ComsysConnect