UX Design Innovation and Accessibility

Tanzu Observability UX Design Crashes the Annual Hackathon (and Wins!)

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

Our project idea was to design a mobile application — something Tanzu Observability lacks. Our crack team of volunteers included two designers, one product manager, and one technical writer. With no engineers on the team, we were unable to create a fully-functional mobile application. Our goal was to flesh out the idea well 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 some 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 quite sure how a no-code, design-led project would fare in the competition. Could it compete with functional prototypes? Would the judges even be interested? Lastly, the hackathon lasts just four days. We weren’t sure it was enough time to realize our vision.

Defining a process

The first order of business was to establish how we could coordinate and collaborate, given our time-zone differences. With a single daily hour-long meeting to coordinate our efforts, we’d have to be extremely efficient. The focus for our kickoff meeting was to determine what we wanted our end product to be. Then we hammered out core assumptions, established a clear scope and objectives, and specified the milestones we’d 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’d showcase in the form of a presentation. With this outcome in mind, we made 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 freedom from their desktops without worrying that they’d miss costly critical events. We needed to figure out what they would need from a mobile application. 

Coming into the hackathon, our ideas about 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 personas. We pooled our product knowledge and brainstormed on how we could deliver functionality via a mobile-friendly form factor.

We agreed upon 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 notification of anomalies ​
  5. Push notifications  ​
  6. Easy, quick access to support information  
  7. A custom topology for information, optimized for mobile

Once these goals were in place, we were ready begin solutioning on day two. 

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

Day Two: Thinking through the details

The goal for day 2 was to define the specifications for our prototype — to go from the general to the specific. We began with the use cases we thought were most important. Because we were proposing the consumption of observability through the smaller lens of a mobile-device form factor, we knew we’d have to avoid complicated interactions. So we focused on delivering critical data in a simple format that could be digested at a glance. Next, we translated those use cases into capabilities for our proposed app. From there, we hypothesized workflows to support the capabilities, which helped us determine the features we’d need to enable those workflows.

At this point, we had arrived at a good understanding of what we wanted our mobile app to do, but we were not quite sure how to organize everything. Taking what we had learned earlier in the day, we tried to put ourselves in the user’s shoes with a goal-centric workflow-mapping approach. This involved visualizing sequences and relationships between the features and constructing the information architecture. 

By the end of the day, we knew exactly what we would need to mock up for our prototype on day three. 

Figure 2. A screenshot from our Miro work board with our entire thinking process and project breakdown
Figure 2. A screenshot from our Miro work board with our entire thinking process and project breakdown

Day Three: Shifting into high gear

Time to design! We needed to bring the ideas we’d been working on to life. We had only a few hours to come up with a visualization and showcase a realistic experience, so we decided to approach it as an exercise in pair design – two people working together on specific functionality, views, or features — but in our case we were both actively contributing to each other’s work in the same Figma file.

We began with a central home screen that leveraged 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 divided the UI into workflows and started to flesh it out. We spent the whole 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 would check in with each other and have a quick discussion about how to shape the experience.

Once we completed a view, we would discuss which components could be reusable and then where we could reuse them. It was a surprisingly smooth and effective process. Coordination came naturally, even though we only had a couple of days to work in the problem space. Our work was so effective that we didn’t even need the whole day to complete 50+ views and integrate them into a prototype — even adding some cool animations — so we would be ready to discuss at our daily sync meeting. 

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

Day Four: Driving it home

This was our last working day, so it was time to prepare our final presentation, which would be in the form of a five-minute video. We put a lot of effort into making sure that we were presenting the story in a compelling way, with a really clear, 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-day workplace. Mobile access to Tanzu Observability is limited to responsive browser version only, unlike many of our competitors who have dedicated multi-platform mobile solutions. There is scope to improve the product by creating an enterprise-grade dedicated mobile app that has an experience focused on mobile devices and allows our customers to observe, triage, and get alerts real-time “on the go!”

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

Drum roll, please…

We won the top prize in 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 were successful for the following reasons:

  1. Maintaining a laser focus on building for outcomes
  2. Adopting a clear and aligned process that helped us refine our ideas
  3. Delivering a compelling story with a clear message
  4. Having great team spirit and collaboration

In the end, it was a valuable experience — not just because we won, but because it helped us realize how much we could accomplish with effective teamwork. We also became closer with some of our cross-functional partners. But most importantly, we got the swag!

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


Leave a Reply

Your email address will not be published. Required fields are marked *