Netop is a software company with offices in Denmark, United States, Switzerland and Romania. They approached us to redesign the website for Live Guide, a secure chat solution custom tailored for their customers and packed with amazing features. A big problem however was their outdated website which was lacking in aesthetics as well as coherence in communicating its benefits.
Research & Analysis
When starting work on a project we try to make sure we have as many discussions as possible with our client so that we have a good enough chance to find relevant information that we can then use to make the right decisions. After many questions and pleasant discussions we were ready to create an outline of the project:
- Market & Competitors
- Specifications & Requirements
All about the audience
We split the audience into primary and secondary ones. To visually and structurally create a project that is successful we needed go beyond segments and try to understand the people that use or would benefit from Live Guide:
- Who exactly are the ones that make the decision to purchase?
- What is their specific need and how does the product first and foremost solve it?
- What is more important to them: features or ease of use? Security or good support?
- What is their business goal?
For each of the identified person we wrote down three fundamental aspects:
- Context — what is their current situation
- Behaviour — how are they doing searching for a solution
- Goal — what are they trying to ultimately achieve
Every bit of information about the decision makers helped us understand how to go about structuring content at a sitemap level and at a page level. It also helped in figuring out how to communicate visually through graphics, iconography and illustrations.
Once we had a good grasp of the profile of these customers, their problems, behaviour and choices, we could put together a sitemap and define the primary flow that we felt was appropriate for the users to follow in order to clearly inform and motivate them to inquire about Live Guide.
Sitemap and user flows
We started the UX phase by creating the sitemap and user flows. We raised questions in our attempt to create the easiest steps for the user, made decisions and adated the sitemap according to the findings. At the end of this phase, we knew the map of the website and how each user scenario would develop, according to what they want to achieve.
We then moved on to creating wireframes based on the sitemap, content structure and specifications from our client. The challenge here was to use all the findings in our research and discovery phases to structure pages in an engaging, hierarchical and easy to follow manner, while offering visitors enough information on what the product can do so that they make an informed decision. We didn’t move away from the wireframes until we were certain that they’re perfect and got the client’s approval.
In order to align the product benefits with the profile of the audience, project trust and make sure potential customers understand that Live Guide is a tool for communicating we decided to take a strong visual approach to how we convey messages on the website. We took the time to design an illustration based system with human figures as the foundation for each graphic.
The final design brought everything together. We chose the Tablet Gothic font family for its modern feel and confident construction, so we could project the same characteristics for the product. The color palette is vibrant and the illustrations/icons are courageous. We wanted to move away from flat design and use subtle gradients to give everything a dimensional feel. The illustrations are inviting and tell small stories.
The website is responsive and we made sure it displays really well on mobiles.
The mobile experience is pretty much the same as on desktop, that being a major objective of ours when designing responsive websites. There are small microinteractions that we couldn’t use, but given that the visuals are strong, that didn’t matter much. We designed a beautiful mobile menu which included a search bar and expanding submenu items.
We wrapped the project up by delivering the styleguide. This included guidelines and design elements for navigation, colors, typography, buttons, forms, dropdown menus and a lot more.