Synthetix has been helping the world's most innovative companies deliver exceptional CX since 2001. The company range of products goes from scalable Knowledge based integration for multi-channel contact centre platforms to AI driven Chatbots, Live Chats and Web Self-Service FAQs solutions (SaaS).
The requirements behind the 2018 re-design of the Synthetix website were based around finding solutions to improve conversion rate and lower bouncing rate in order to help boost leads generation.
The biggest challenge was the available time to complete the project - about 2 months. Given the limited time, we knew we could not perform full research so we ensured that we made the most out of our resources. During the project I worked together with one more junior designer, and always also kept liaising with stakeholders, developers and marketing team during focus gruops and planning sessions - this was a great way to keep other departments involved and to get some helpful feedback.
We recruited 3 users with specific demographics amongst our clients and held interviews and usability testing on the old website. Users were observed while completing specific tasks, and all sessions were recorded. The insights we gathered during the research fase were then grouped into clusters. The Affinity Map reveled the following take aways:
Once we assessed existing pain points and carried out some competitor analysis, we started focusing on our users by defining primary Personas and evaluate their behaviours throughout different User journeys. Our goal for each persona was to combine the qualitative and quantitative data from the web analytics reports, usability testing and interview sessions into few representative users which we then shared with the rest of the team.
Keeping in mind that our website needed to target effectively a B2B market filled with competitors offering very similar products and services, we realised we needed to stand out by coming accros as clear and trusworthy as possible, a reliable partner to our clients. Our main strategy became to focus on transmitting the message that we work with our clients by helping create personalised integrations, build bespoke case studies and assist them all the way during the prosess.
We also needed to offer a flexible pricing methodology. Information about our products and services had to be clearer and easier to find - users needed to find answers promptly and be able to get in touch instantly.
Next challenge was to develop a Sitemap and an efficient User flow for the new website. I ran a workshop session with dev and marketing teams. The brainstorming generated various ideas which then were defined by the MoSCoW Technique. This process came very handy to figure out what pages and content had to be prioritised among others.
Then we decide to run also a Card Sorting session to better organise the IA of the new website. This helped the marketing team to start rewriting some of the content of the website and the developers to start figuring out in advance their side of the work.
The Sitemap was therefore decided based on the following considerations:
We must lead our visitors to get in touch with us through a free "Book your demo" request form. CTAs must be offered consistently and on every page. A proactive Live Chat system will have also to be implemented for lead generation purposes.
We should be able to present the company products and services as clear as possible, highlighting all the main features and advantages in terms of CX ehnancment and ROI. Also present clear pricing options.
We could showcase our extensive portfolio of clients as well as make it easy to find and read our articles and case studies in order to emphasises expertise and experience in the field.
We won't have multiple contact forms. One main contact form and the Live Chat will be the only mediums of contact available to our visitors.
This User Flow outlined the steps a user would have to take within our website in order to convert efficiently into a potential lead. From the chart is clear how easily a user could found his way to our Free Demo/Contact us form thanks to CTAs presented on all the main pages, or get in touch with us via Live Chat from every page.
With a better idea in mind about what we wanted to achieve, I was at this point ready to move onto sketches & wireframes designs for the new website. The early usability tests on paper prototype and on screen helped visualise and understand the best way to achieve our goals and how the new website was actually going to unfold in structure and main layouts.
These deliverables were also great for communicating the design vision and getting early feedback on user journeys. The wireframes went through a couple rounds of iterations as final content was developed.
The creation of a new corporate style guide came handy to define the company new branding strategy. The very same elements were then used to design the high-fidelity mockups. I have designed all the visuals of the new website including colour palettes, button style, input forms, iconography and selected all the imaginary used to deliver the final work.
We tested this High-fidelity prototype in house with staff members from outside the dev, design and marketing departments, asking them to complete a series of tasks so we could then measure the results, fix any issues and retest until ready to move on to developing the website.
The end result was a refreshing and modern looking website which ticked all the boxes in terms of understanding what Synthetix was about and how the company can help improve our clients' online customer service requirements.
In order to make the navigation of the new website as simple and meaningful as possible I have designed a navigation bar which offers comprehensive view of all pages and subpages by using consistent iconography and a short preview of the content of the pages followed by a "Read more" CTA.
The pricing page shows very clearly the available pricing plans. Integrated with a slick and proactive Live Chat solution, this was one of the most important pages of the website in order to drive visitors to get in touch and learn more about our offer and about how Synthetix can help their contact centres reduce inbound emails and calls, optimise agent productivity and provide a more cost-effective way to automate customer service, sales and support.
The new clients page also shows an impressive portfolio of clients with short descriptions of the work done for each of them. In order to facilitate visualisation and navigation of the page, we have decided to group our clients per "Industries". I opted for tabs on top of the page to make it easy to select and filter down clients' list.
Compared to the previous website, the new website showed sensible improvements already during the first 6 months of life: