The first step in redesigning Aryza’s main website was to look at all the different websites that they owned for the individual products. I quickly realized that they had multiple website’s that led to the same contact form or redirected them to a different webiste to request a demo.
I also ran a card sorting workshop through Zoom where the aim was to map out what sort of products belong where and for what clients. Although this chart may look simple, it was a tough workshop because what may seem obvious to internal Aryza employees is not for external people. So, it was key to ask the right questions. I always use color-coding as a method to organize all data as I find it easier to quickly see patterns and explain to others.
Now that I understood who their clients were and what Aryza was offering I was able to lay down the different types of clients that would come onto the site and map out their browsing and conversion patterns. At this point, it was key to understand that Aryza had 3 types of customer: the hunter who already knows exactly what they are looking for, the gatherer who is doing research and needs to be swayed, and the explorer who needs to be hand held through the experience.
In addition to the internal research, I did some market research to understand how other software providers were breaking down their services (in the financial industry and outside). It’s important to understand what others do so you don’t have to reinvent the wheel but also understand how the public is used to seeing certain types of information.
Based on the as-is audit, the market research, and the customer journeys it was clear that Aryza’s webiste needed to cater for different browsing experiences. The clients coming to Aryza’s website vary from knowing exactly what they want to needing to be hand held. That is why the sitemap needed to show specific solutions that customers might be looking for but also allow people to view solutions based on the industry that they belong in.
The new sitemap has different layers of navigation to funnel customers through the right channels. For example, customers could look for a product by going through the solutions tab or the industry tab.
When I was creating the wireframes it was really important to showcase the product videos because they are what allows customers to see the potential in the product. In addition, all products required different types and amount of information on their pages. So, the page templates were constructed out of ‘content blocks’ that could be turned on and off and still flow in a cohesive way. A new content block added to Aryza’s website was case studies where they could showcase success stories from clients to build credibility.
Throughout the whole wireframing process there was constant iteration based on client feedback and best practice UX. For example, in the wireframes below one can see the evolution of large cards (V1) to more condensed cards (V3) that are comparable side to side. This allows users to see at a glance what products are best for them without overwhelming them like in V2.
An interesting part of the project was how to push clients to contact someone in different mindsets. For example, if someone went onto the ‘Contact us’ page from the navigation they’d be able to see the contact form and the addresses of all the offices. Whereas if they clicked contact us in a product page it would be a pop up as to not to disturb their browsing.
Another addition to the contact pages that wasn’t there before was the ‘what type of products are you interested in?’. I found out that people would often get in touch with Aryza without specifying what they were interested in. So the conversations used to take longer as they had to be redirected to the correct person from a pooled email list. Now, if customers know exactly what products they want to talk about they get sent straight to the customer lead in the right department.
The rest of the design process was taken over the UI team at Lucky Beard. However, there was still a lot of collaboration for with UX to make sure that the functionality of the wireframes was carried over in design. The Aryza website has now launched and can be viewed at www.aryza.com In addition, if you want to see how an Aryza product was designed by me please click here.