TIMELINE: Architecting a new platform
Designing a NEW platform from scratch in one year is hard work, but by driving design-level thinking methodologies, modern design principles, and guidelines, I was able to ship a platform that is modern, intuitive, and could be a game changer for the IT industry.
Dominic Pouzin – CTO
“Geoffrey is a very talented senior UX designer and would be a huge asset to any company, especially those with a focus on enterprise products. At BitTitan, Geoffrey helped our product UI evolve from “amateurish” to professional / on-par with top SaaS solutions. Geoffrey’s key strength is creation of new UX concepts and high-level look-and-feel experience for enterprise products.
THE CHALLENGE — OVERVIEW
The CEO made a business decision to leverage MigrationWiz (cash cow + partner base) and pivot the company to managed services. A lot of research went into understanding the new business direction. The plan was to leverage 3rd party OEM SaaS platforms to enrich and supplement the current offerings to be an IT SaaS leader. BitTitan’s flagship product MigrationWiz had six-plus years of technology behind it, including multiple types of cloud migrations. It would be too risky for the company to build on the current Migration platform (tech debt) to avoid any service disruptions. The decision was made to build a new platform using modern tech.
1. DISCOVERY: 10/2015 – BIG PICTURE WIREFRAME
After multiple discovery meetings, presentations, and feature requests, I designed the base platform UX/UI model the Dev team was going to build using the new ember.js framework. The wireframe below shows the high-level breakdown on how two platforms could co-exist until the legacy platform was phased out. The Vision was to support 100’s 3rd party SaaS (API-First) services/partners/webhooks integrated into a managed service platform.
2. ALPHA PLATFORM: 3/2016 – SSO/rBac
The system had to scale for new services while supporting hooks from MigrationWiz, DeploymentPro, Email Archive, and Data Encryption, Entity Management, plus additional features such as SSO (Rbac), App switching, Notifications, Task launcher, Purchasing, and most important onboard new 3rd party OEM SaaS solutions in a consistent intuitive way. This was the first proof of concept platform shipped with minimal features and to start collecting customer requests/feedback.
3. INTEGRATED FEATURES: 7/2016
Once the platform MVP framework was in place, it was time to start integrating services and onboarding new customer to the platform. The first step to getting external customer feedback.
4. NEW FEATURE — INTEGRATION
One challenge was designing in an old UI kit. I knew I had to modernize the platform to help BitTitan serve as a trusting SaaS application. collaborate in a shared vision to digitally transform the platform into something much more contemporary.
SYSTEMS LIBRARY— INTEGRATION
One challenge was designing in an old UI kit. I knew I had to modernize the platform to help BitTitan serve as a trusting SaaS application. I made it a company commitment to drive a modern UI Kit–the existing dark grey nav and overall site felt like a typical Seattle day to me. I always knew the future of the site would need to be something a little more modern.
5. BETA LAUNCH: 10/2016
This screen shows the first private customer beta launch. The dashboard was still very rough around the edges. The plan was to ship fast / fail fast and start dog fooding to get real customer feedback while shipping in two week sprints. This was an exciting time for the company, throughout my career this is the only fast paced highly efficient team I’ve been part of. The team collaboration fostered solutions for the greater company interests. Their motto: “Get Shit Done!”
6. PUBLIC LAUNCH: 4/2017
Once the new UI kit was implemented the platform started to come to life. The kit helped to speed up delivery time, since common controls and UI elements were all components. Among the improvements were: Service center, Activity feed, Subscription billing, Delivery Center, Cost reporting and around 20 new service solutions were implemented. I also made layout changes to simplify the experience by introducing the detail panels for fly-outs and inline accordions.
As the lead designer, I owned key platform features an once the UI Models (MVP) were in place I started handing off the designs to my peers for further refinement and design polish. Then I turned my attention to polishing the Dashboard, Delivery center, Entity management, Activity feed, subscription billing, and 3rd party OEM task workflows.
Entity MANAGEMENT – DEVICES AND USERS
Lead designer on one of the most important features for managed services is the ability to add entity’s in order to take advantage of the platform’s full capabilities. Once you add an entity (user or computer) new services will appear based on the scanned data.
LANDING PAGE — EMPTY STATE
If no users have been added, this page explains the different ways to add users to the platform. The platform can add users through GPO, Connectors, download Device Agent or install from email.
TASK LAUNCHER — MODAL DIALOG
After the selected method the task launcher modal dialog opens on the overview task (step 1) with descriptive guidance / Video with the steps in order for the process to be successful.
USERS — LIST VIEW
Once the system has been populated the user (IT) can perform services on that entity. View user details, View alerts, redeploy agent (heartbeat), Group users, and Filter alert types. To avoid having too many controls on the page, I added a contextual menu to do tertiary tasks to a profile.
USER DETAIL — PANEL
A user (IT) can quickly view hardware details and evaluate what actions to perform on a device, as well as see associated users assigned to that device. The customer feedback was great since they don’t have to drill down to another level to view all relevant data.
USER INSIGHTS — CHART VIEW
As a short-cut (Inventive), I added another chart panel to quickly see a how many consumers are running the heartbeat app (device agent), or other issues instead of drilling down to another page.
DEVICE AGENT — DEPLOYMENT
Device Management Agent (DMA) is the quickest and easiest way to automatically deploy and configure software applications on end users’ desktops and mobile devices without implementing complicated enterprise software. DMA helps companies of all sizes get up and running on new software applications quickly and makes it easy for an IT admin to remotely deploy and configure those applications without having to touch the device.
DEPLOYMENT PRO — BEFORE / AFTER
The original DeploymentPro agent looked like some type of malware, and the customer drop-off rate was high.
THE DESIGN CHALLENGE
DMA is a universal shell app (C++), I was tasked to redesign the client app and improve the user journey to be more intuitive and user friendly. Trying to push the design… but limited due to apps language created a lot of limitations when working with Dev 1:1.
I thought it would be a nice touch to add a little bit of eye-candy (.gif animation only supported) to let the user know the app is running during configuration process, since the process takes time to mirror the email profile on the cloud.
Results — The redesign improved customer satisfaction and the animation reduced the amount of users closing the app.
ACTIVITY FEED – Playbooks
To build a notification engine that dynamically generates relative information about a customer’s service, computers, users, events, suggestions, and reminders.
This agile process from MVP through Vision was executed flawlessly. And by introducing the detail panel, I simplified the experience by eliminating the need for the user to drill down to another page. Press had early access to the platform. View
1. DIAGRAM FLOW
I created this high-level user flow to align the user journey and UI model with the product goals.
2. CONCEPT ITERATIONS
Through whiteboard sessions the team was able to understand a holistic view which helped synthesize the product features.
3. MVP — LEARNING LESSONS
My original feed design was rough by necessity but flexible, allowing the team to focus on more important features. We had to ship with an MVP product, which basically was an amalgam of all individual feed types and events. This is agile thinking — recognizing you can’t expect to build everything, or we would never ship.
4. CUSTOMER FLOW
My process was designed to maximize communications with developers. I printed out a UI site map on a large format printer, then got the developers in a room to walk them through the user journey. This approach helps to speed up the development process, so everyone is on the same page.