Tanzu Observability UX Design crashes the annual hackathon (and wins!)


The Tanzu Observability Hackathon is an annual opportunity for employees to take a week out of their regular work schedule to inspire product innovation. Like most hackathons, participants compete for fame and swag. While the hackathon is usually dominated by engineering, some UX designers entered this year. We wanted swag!

Our project idea was to design a mobile app – something Tanzu Observability lacks. Our elite team of volunteers included two designers, a product manager and a technical writer. With no engineers on the team, we weren’t able to build a fully functional mobile app. Our goal was to flesh out the idea enough to communicate our vision and (hopefully!) win the competition.

We had a great team and a rough idea of ​​what we wanted to create, but we also had challenges and concerns. First, our team members were in multiple time zones (spanning a 10 hour difference), so we needed to be able to work asynchronously. Second, we weren’t sure how a no-code, design-focused project would fare in the competition. Could it compete with working prototypes? Would the judges even be interested? Finally, the hackathon only lasts four days. We weren’t sure we had enough time to realize our vision.

Define a process

The first order of business was to establish how we could coordinate and collaborate, given our differences in time zones. With just one hour-long daily meeting to coordinate our efforts, we would have to be extremely efficient. The goal of our kick-off meeting was to determine what we wanted our final product to be. Then we made some basic assumptions, established a clear scope and goals, and specified the milestones we would need to get to the finish line on time.

We agreed that we wanted to build a prototype of our ideal mobile experience, which we would present in the form of a presentation. With that outcome in mind, we crafted a plan for our asynchronous collaboration and got to work.

Day One: Targeting Personas and Establishing Our Goals

We knew we were designing for our typical Tanzu Observability personas – platform and application operators who needed to be free from their workstations without fear of missing costly critical events. We needed to figure out what they would need from a mobile app.

Going into the hackathon, our ideas of what this mobile experience would look like were vague. We needed to establish a clear set of shared goals, based on our knowledge of our target personalities. We pooled our product knowledge and thought about how we could deliver functionality through a mobile-friendly form factor.

We agreed on a set of seven goals:

  1. A seamless login experience
  2. Fingertip access to dashboards and charts
  3. The ability to perform basic operations for alerts
  4. Proactively provide exception notification
  5. Push notifications
  6. Quick and easy access to support information
  7. A custom topology for information, optimized for mobile

With those goals in place, we were ready to start solving day two.

Figure 1. A screenshot of our Miro board that we used for planning and ideation

Day 2: Consider the details

The objective of day 2 was to define the specifications of our prototype, to go from the general to the specific. We started with the use cases that we felt were the most important. Because we were offering observability consumption through the smaller lens of a mobile device form factor, we knew we had to avoid complicated interactions. So we focused on providing critical data in a simple format that could be digested at a glance. Then we translated these use cases into functionality for our proposed application. From there, we hypothesized that the workflows would support the features, which helped us figure out what features we would need to enable those workflows.

By this point, we had come to a good understanding of what we wanted our mobile app to do, but weren’t sure how to organize it all. Taking what we learned earlier today, we tried to put ourselves in the user’s shoes with a goal-centric approach to workflow mapping. This involved visualizing the sequences and relationships between features and building the information architecture.

At the end of the day, we knew exactly what we would need to model our prototype on day three.

Figure 2. A screenshot of our Miro workboard with our entire thought process and project breakdown
Figure 2. A screenshot of our Miro workboard with our entire thought process and project breakdown

Day 3: Shift into high gear

It’s time to design! We had to bring the ideas we were working on to life. We only had a few hours to create a visualization and present a realistic experience, so we decided to approach it as a pair design exercise – two people working together on specific features, views, or functionality – but in our case, we were both actively contributing to each other’s work in the same Figma file.

We started with a central home screen that built on our design system and was similar to the design of the desktop product. This would ensure that the interface would look familiar to our users. From there, we broke the UI down into workflows and started fleshing it out. We spent all day on a Zoom call with a constant feedback loop – commenting on each other’s work, sharing improvements, adopting ideas and defining common patterns. Before starting each new view, we check in with each other and have a quick chat about how to shape the experience.

Once we’ve completed a view, we discuss which components might be reusable and then where we can reuse them. It was a surprisingly smooth and efficient process. Coordination came naturally, even though we only had a few days to work in the problematic space. Our work was so efficient that we didn’t even need the whole day to complete more than 50 views and integrate them into a prototype – even adding cool animations – so we would be ready to discuss during our meeting of daily synchronization.

Figure 3. A screenshot of Figma with our mockups and components for the final prototype
Figure 3. A screenshot of Figma with our mockups and components for the final prototype
Figure 4. A UI showcase for Tanzu Observability Mobile
Figure 4. A UI showcase for Tanzu Observability Mobile

Fourth day: Return home

It was our last day of work, so it was time to prepare our final presentation, which would take the form of a five-minute video. We put a lot of effort into making sure that we presented the story in a compelling way, with a really clear and crisp message.

We worked together to refine our pitch. We wanted it to generate excitement for the judges, as well as to communicate the value proposition.

This was the final pitch:

Mobile devices have become a staple of the modern workplace. Mobile access to Tanzu Observability is limited to the responsive browser version only, unlike many of our competitors who have dedicated cross-platform mobile solutions. There is room to improve the product by creating a dedicated enterprise-grade mobile app that has a mobile-centric experience and allows our customers to observe, triage, and receive real-time alerts “on the go!”

Animated GIF of the final prototype
Figure 5. Part of the Tanzu Observability mobile prototype video

Drum roll please…

We won the first prize of the hackathon! We were very surprised because there were a lot of amazing projects (some of which actually worked, unlike ours which was just a presentation).

I believe we succeeded for the following reasons:

  1. Maintain a laser focus on building results
  2. Adopting a clear and aligned process that helped us refine our ideas
  3. Deliver a compelling story with a clear message
  4. Have a good team spirit and collaboration

In the end, it was a valuable experience, not only because we won, but also because it helped us achieve all that we could achieve with effective teamwork. We have also approached some of our cross-functional partners. But the most important thing is that we have the swag!

Figure 6. The Tanzu Observability Mobile team: Margarita, Payal, Boiana and Martin

Source link


Comments are closed.