Phunware's Mobile-as-a-Service platform provides companies with the tools they need to succeed on mobile, including mobile analytics, alerts & notifications, content management, advertising, and location services. I helped design this platform from the ground up, including defining the styleguide and overall user experience, working with product managers to define product roadmaps, and building out the product design team.
MaaS General Nav
With a robust platform like MaaS, we needed to create a web interface that could handle related but different products, while leaving space for future products. We settled on the 3 main sections as seen above. The Product section would be home to the (at the time 3) products that Phunware offered. This section could grow to at least six or seven as more products came online. The Sub Nav section is where the main features of the product would live. This area could also grow, leaving room for even more options than the product section. The Content section is where the user would intertact with the UI the most. The Main Actions section provided a "sticky" nav area where the most important actions would live. Having the same framework for all of our products provided a consistent experience so that all of our products—including new ones—would feel familiar to our customers.
As we began creating this product, we discovered that our customers needed access to basic usage and demographic data. We designed a simple interface for customers to consume this information at a glance. The majority of our customers were interested in seeing a few key metrics: total number of users, time in app, and device demographic data.
Alerts & Notifications
This product was built on the idea that sending messages to mobile app users should be as easy as sending emails. We made sure our user flows were quick and easy to understand, so that our customers could painlessly send push notifications to all app users at once or to specific user groups. We even provided a way for our customers to send messages immediately or schedule messages to go out at a specific time. We made sure to track the analytic data so our customers could measure how well their push performed.
No mobile experience is complete without rich content. We built our mobile CMS to be infinitely flexible. This allowed us to meet every customer's needs, no matter how large or small the requirements were.
To do this, we built a system of flexible schemas and key-value pairs. The most commonly used elements were available out of the box. But, as soon as something custom needed to be built, we could simply edit the schema and the system was ready to go.
Phun Fact: We used this tool for every custom app we built
During my time at Phunware, the company acquired TapIt Mobile Advertising. To make the most of this, I began integrating their system into the Phunware MaaS platform. Tapit had a solid tech foundation, but it was time for a UX/UI update. So, I took their product features, simplified the UI, and merged it into a seamless experience inside the MaaS portal.
Phunware's location product sparked a whole new venue-based solution product. Through product planning and an acquisition, the location product managers and I came up with a solution that offered everything a venue needs to manage their location in a mobile app. The out of the box location product lets customers add maps, create points of interest, and lay the groundwork for way-finding & navigation inside their venue.
We started building the MaaS platform in 2012 when skeuomorphism was still popular—our button styles reflect our keeping in line with industry trends. As we created products for the platform, one of the most important things was consistency. This basic style guide served us well until our redesign in 2014, as it allowed each of our products to feel related despite their different purposes.
As the platform evolved, so did the Phunware brand and the MaaS UI. Our products became much more feature rich and styles needed to be cleaned up to give the simple visuals breathing room. Before I left Phunware, I was able to define this global UI update and ensure quality implementation of the first few product updates.
General Nav V2
Version two of the MaaS Platform needed to house a minimum of seven products, with more coming in the near future. Along with the UI cleanup, we decided on an overall UX update to how users interact with the MaaS platform as a whole. A global nav bar was added at the very top. This is where users can find their account information and notifications about global MaaS products. This is independent of any products they may subscribe to. As for the product and sub nav layers, we rolled them up into one column, whith an accoridan type navigation. This would allow us to kepe expanding this section as we added more products and features.
As part of the redesign, we focused on Analytics first. This was Phunware's oldest product and we had gathered a lot of our own analytics and feedback from customers on what they wanted to see. Since we were already changing how the product worked, we decided it was also a good time to implement the new UI.
I quickly mocked up this concept in HTML / CSS. This wasn't only about selling the idea of the large cells, but also to show how the overall UI V2 would behave in the real world. Notice how hover / active items seem to jump off the page a little (a la Android Material Design). Going from grayscale to color was a little extreme, but I wanted to see how people would react.