Aryza website restructure

Bringing the best customer experience to Aryza’s clients
*Please note that images and/or sensitive information may be blurred out due to confidentiality agreements

Project Context

Role
UX Designer
Team
2 UX Designers (including myself), UI Designers, Project Manager and Client Lead
project status
Completed
date
Summer 2020

Aryza provides whitelabel financial management software to their clients. I worked as part of a team where my role at Lucky Bear was to optimize Aryza’s webiste so different types of customers could find the most suitable product for themselved. I also worked closely with the Aryza stakeholders to understand their products and clients. The website involved analyzing the as-is, listening to internal problems/needs and create templates that worked with the different types of content available. Since I was already creating products for Aryza (view project here) and was in contact with the internal stakeholders I was taking lead in gathering the necessary information from them and relaying back to the team.

Customer insights & User research

1 - As-is anaylisis

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.

Customer journey of Aryza clients mapped out in Miro

2 - Further understanding

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.

Results of a card sorting exercise with Aryza employees in Miro

3 - Personas and customer journeys

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.

Persona and customer journey highlighting the needs of Aryza’s customers

4 - Market research

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.

Example showcasing another software company and how they do their navigation

Research outcomes

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 design process

1 - New sitemap

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.

Iterations of the Aryza sitemap made in Figma

2 - Wireframes & Templates

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.

Wireframes of Aryza’s website made using Figma for easy collaboration with UI
Current product page of Aryza’s website

Highlight

1 - Iterations

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.

Wireframes of Aryza’s website made using Figma for easy collaboration with UI.

2 - Responsive templates

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.

Wireframes of Aryza’s website made using Figma for easy collaboration with UI

Outcome

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.

Other projects