ROLE
Website Designer
DESIGN ACTIVITIES
TOOLS
Google Docs, Sketch, Slack, WordPress
YEAR
2017
Project overview.
EMAGIN is a growing tech company which develops software products for the water sector. Their product aims to improve the efficiency and sustainability of large water systems, thus helping preserve our most important resource: water. They developed a cutting-edge platform, pioneering in the field of AI applications for the water industry.
For this project I worked with EMAGIN to transform their website into a seamless experience where the visitors clearly understand the value of their product and the commitment they have to their customers. Ultimately aiming to increase sales and lead generation.
Challenges.
Having such an innovative product with cutting-edge tech proved to be a challenge when trying to explain the product to their customers. On one side, their customers are very knowledgeable in the water sector and processes in the industry. However, a knowledge gap exists when talking about EMAGIN’s core technology: Artificial Intelligence.
In order to create a seamless experience that drives the customer to believe and invest in EMAGIN’s product, they need to truly trust the company and understand that they do deliver on their promises. Improving the user flow and information architecture was the main focus during this project.
Understanding the company.
I started the project with a kickoff meeting with the team, to deeply understand their vision, goals for the project and the way they would measure its success. This resulted in defining the objective:
Create a website that conveys the legitimacy and trust-worthiness of the company, and clearly explains the benefits of their product to promote sales.
Some other insights I gathered from this meeting are: positioning and competitors, customer personas, existing challenges and ideas from the team. Obtaining this sort of feedback, from several team members, early in the project, provided me with a great starting point and better understanding of their expectations.
After the meeting, I researched their main competitors, and evaluate the language and flows in their websites. This allows me to create a design that correctly positions EMAGIN as a pioneer, tech company in the water sector, and makes them stand out from the crowd.
Learning from the customer.
One of the obstacles of this project was the limited access to customer data and feedback. Considering the early stage of their EMAGIN as a growing business, customers are relatively new and are still in the sales funnel, therefore we decided to reduce risk and concentrate on research for customer data.
After crafting several personas, I refined the most relevant one. This persona was mainly characterized for being an active, middle aged man who is comfortable with technology. With this profile, I research aspects of the design which could improve the experience of such persona such as legible fonts and element contrasts.
In addition, one interesting fact the team shared with me is that they get many new website visitors from conferences and conventions they attend. This means that many of their potential leads will try to access EMAGIN’s website on the phone. This making it really important that the site is fully responsive and provides an equally seamless experience on the go.
Further talks with the team helped me narrow down the language used by their customers and what information needs to be explained more in depth.
Defining the problem.
With the personas refined and a good idea of the company’s objective, i crafted the customer journey through the conversion process. Then, I defined the problem statement to be:
How may we help potential customers trust and understand EMAGIN’s product and company?
Information architecture.
Leveraging the research from the previous stages I started by defining and improving the website Information Architecture. I identified all important pieces of information, and allocated to logical groups of data.
One fact I learned from my research is that the more pages your visitor sees, the more trust they develop and the higher chances they convert, since they consider their time in your site as an investment they made, therefore converting is not such a big step.
Using this tip, I segmented the information and provided individual pages for the different components of their product to clearly explain them and allow the visitor to explore the site deeply and learn more and more about EMAGIN.
In addition, I put a lot of focus on creating a landing page that would make the customer curious about the product while answering all the questions that would usually pose as an obstacle in their way to converting.
Ideating the solution.
The next step was to put those information groupings into a design. I created wireframes and guides for content creations, as the customer participated in this process. The team provided me with feedback on the flows and design elements used in the wireframes, which helped me improve the design.
For the visual style and language of the site, I mixed the company branding, with new styles that clearly conveyed EMAGIN’s innovative and technological aspect. Some of these new aspects were:
1. Legible fonts that convey both traditionalism and innovation.
2. Use of vibrant colors and powerful, yet relevant, imagery that in an instant convey the value and applications of EMAGIN’s product.
3. Added modern-looking mockups of their product to promote trust.
With these new changes, i created mockups for the landing page and received constant feedback from the team through Slack.
Building the website.
Given the tight timeline for the project, I proceeded to implement the wireframed pages on WordPress, and then applied the approved style to the rest of the pages.
This process turned tricky as I always focus on creating impactful designs. However these must align with the company’s objective. Even though animations improved the experience and impact on the website, we limited the amount of these on each pages to maintain a low loading speed and performance.
Final product and takeaways.
The finished product consisted of an extensive set of landing pages, proving sporflight to each of their components, while providing trust indicators and clear conversion flows to their customers.
So far, the new design has significantly decreased their bounce rate by 47% and increasing page views from per visitor by over 200%.
The next step to improve the design even further, would be to start gathering usage data as well as customer feedback on the site to iterate on the design and understand its advantages and disadvantages from the customer perspective. This, I believe would definitely translate into a higher conversion rate.
You can check out the result at www.emagin.ca.
