Vialytics WebApp
UX ResearchUX DesignUI DesignQualitative InterviewScreendesignWorkshop Facilitation(Proto) Persona Design SprintWireframing

Vialytics WebApp

vialytics
2020
Vialytics Website

About this project

Vialytics is a rather young startup dedicated to improving the way towns and municipalities keep track of damages to the streets and plan the their repairs by the use of artificial intelligence. They developed an app that takes pictures of the streets while driving and a corresponding software that anaylises the pictures and visualizes the information gained by this analysation in an understandable and user-friendly manner.

They tasked me with helping them with the redesign of their first version of the WebApp. The WebApp is the place were the users view and analyse the results of the street mappings.

The vialytics website
The vialytics website

Kick-off Workshop: Alignment and planning

As normally with my project kick-off workshops, I used this opportunity I had with the team (CEOs, devs, customer success) to get alignment on where we stand, what we know, and where we want to go. Therefor I facilitated the team through I couple of different exercises during a one day workshop:

  • We collected positive and negative attributes of the current version
  • We created a user journey map to which we attached the most voted on attributes
  • We talked about our goal(s) and possible obstacles
  • And we finally created persona hypotheses that helped us decide whether we needed to do user research, what question to answer and which methods to use.
Results of the kick-off workshop
Results of the kick-off workshop

User Research

The kick-off workshop showed us, that there are a lot of assumptions around our target audience that are not based on actual user data and that the team was rather uncertain about but that were deemed important for the success of the redesign. That is why we decided to get certainty around these assumptions. We already created some research questions out of these assumptions during the workshop. I decided to conduct interviews with the current users at their workplace. These weren't contextual inquiries, since we did not focus on observing them during their work, but we still had the opportunity to be shown how they use the system and observe the context of use.

When I was about to start working on the interview guide, my client contacted me with an intriguing question: "Is it possible that our team does some of the interviews?". You need to know that they did not have UX researchers or UX designers in their team. Nevertheless, I loved this idea and proposed that I would give the customer success team (who we thought would be suited best for taking on this task) a short introduction into how to conduct interviews and have them watch me during the first session. After the session I took some time appart for a debrief with the team and to highlight some important bits about the interview we just experienced together. By doing this, my client would not only be able to save some money – because of course it is more expensive to have me do the research rather then do it themselves – they would also have the benefit of adding valuable skills to their customer success team and a much deeper connection to the research results.

Let me add a little note here: This was a very positive experience for all of us! The client is still doing user interviews quite regularly and is still learning a lot about them. Many of the insights they gained during these interviews found their way into the app. I am so happy we took this approach!

The dashobard of the redesigned WebApp
The dashobard of the redesigned WebApp

Concept Workshop: Research findings, opportunities and ideation

After the team finsihed up conducting and analyzing the interviews, we all came together for another workshop. First I facilitated a quick and fun warm up exercise. Then we reviewd the user journey map from the first workshop and I asked one team member to quickly walk us all through their interview findings. While listening to the results, the rest of the team wrote down "How Might Wes" on sticky notes. These were then voted on and attached to the according place on the journey map. A perfect way to get the team started in thinking towards a solution without already having a specific one in mind. It is a great exercise to help the team uncover opportunities and it perfectly leads over to ideation phase. For that I took some hints from the Google Design Sprints: We researched and presented innovative solutions to gain inspiration from and then moved on to several sketching exercises resulting in one wirefrmed solution per participant, ending up the workshop with presenting them to each other.

Results of the ideation workshop
Results of the ideation workshop

Wireframing

After the workshop I asked the team to go through the different solutions we sketched out and come up with one single solution to proceed with. This again was an expermiment for me because I would normally immediatly sit down myself and sketch out the solution. But in this case that approach felt more productive. After the team finsihed up their wireframes, we sat down together to review them. I had some feedback and we made some changes together. I took the result of this as an input for sketching out some additional wireframes – most of which just being alterations to the proposed solution.

Results of the ideation workshop
Results of the ideation workshop

UI Design & Pattern Library

Now it was time to move on to high fidelity Screendesign. I designed a lot of screens and a couple of versions. The reason for the iterations during this phase was that we recognized that some of the interactions we planned didn't work the way we imagined. They just didn't feel right and we were very certain that if we would proceed as planned, our users would struggle with the app. We gained a lot of knowledge regarding our users, one of them being that most of them struggled finding rather hidden functionalities. We knew that we needed to make the options and interactions very obvious and easy to find and use. I finished up this project by handing over a large set of screens covering almost the whole WebApp and a small pattern library.

It was a huge pleasure to work with the team at Vialytics and I want to thank them for the trust and the great time we had together working on this project!

Overview over the vialytics application

vialytics app