Workspace ONE Hub Services Branding
My Role: UX Lead, Interaction Designer Team: Virtual Designer, Content Writer Tools: Axure, Sketch, Zeplin Deliverables: Wireframes, Prototype, UX Review Document
Project Background
Workspace ONE Intelligent Hub is the app you use to register your device for access to resources within your organization. Click here to learn more about the product.
In this project, we want to make it easy for IT admins to apply corporate branding to Workspace ONE Intelligent Hub by configuring it on Workspace ONE Hub Services. Admins should be able to make branding changes, while seeing the web, desktop and mobile previews at the same time.
Challenge
- Dependency on mobile UX design.
Research Branding Examples
This is not the first time we offer branding ability to IT admins within our consoles. Before jumping in creating the design, I researched existing branding pages in other VMware consoles and studied their page layouts.
For inspirations, I also researched app branding examples online.
Information Architecture (IA) and Wireframing
After I reviewed requirements with the PM, I focused on figuring out the Information Architecture. The last thing I wanted to do is to dump all fields in a form on this page. I understood I needed to group fields into sections that make sense to our users - IT admins.
I met with the Mobile UX Designers and learned the visual structure of the previews. There are three sections from top to bottom: Navigation Bar, Content/Body, and Tab Bar (just for mobile). The tricky one is Company Logo, since it will appear in multiple pages. I decided to place it as its own section. Here is a draft wireframe based on this IA:
In Phase 2, we added a few more features to support the Web Browser preview. We made IA changes by grouping all logos into one section, and added a new section called Web Browser. Here is a wireframe based on the latest IA:
One difference between two wireframes above is the placement of Save and Cancel buttons. As the page got longer, I realized it’s important to continuously display those two buttons, so that admins can take actions any time. That’s when I decided to move both buttons to the top in a sticky bar.
Error States
Once all team members agreed on the IA and the general layout of screens, I discussed error states with PM and developers and figured out the best way to display these errors so that IT admins can easily recover from them. Here are error cases in Phase 1:
Visual Design (Done by Visual Designer)
I reviewed mockups created by the Visual Designer and provided feedback to him. When the Visual Designer was on vacation, I made visual tweaks based on the engineer’s feedback in Sketch, so that the engineer would not be blocked.
Content Strategy
Throughout the project, I worked closely with the Content Writer: I explained to him the context of the project, the layout, and interactions, which helped him a lot regarding writing the appropriate copy. Also, I suggested him creating a tooltip matrix which will help engineers see a list of organized tooltip messages. I was glad he took my advice and created one. Engineering was happy to find all tooltip messages in one place.
Design Validation
Due to time constraints, we didn’t have the luxury to conduct full-blown usability tests. Instead, I showed the design to a few internal IT administrators and gathered their feedback. I shared feedback I collected with PM and other team members. I made design tweaks accordingly.
Review Build UX
To maintain the design integrity, I asked engineers for credentials to see the build when it is ready. I set up a meeting to review the build with the Visual Designer - comparing the build UIs with mockups, while doublechecking the content on the UI. I created a UX Review document to point out differences between the build and the design. Also, we prioritized our recommendations into two categories: 1). Marked in red – highly recommended changes that will impact UX greatly. 2). Marked in orange – recommended changes. I shared the UX review document with engineering and PM. Here is a page in the UX Review document:
To keep track of our feedback, I worked with engineers to create corresponding bugs in JIRA.
Closing Thoughts
- It makes sense for new customers to configure branding on this page from scratch. But for existing customers, it’d be great if the system provides the option to migrate their current branding values, to avoid having IT admins setting up branding manually again.
- What if customers want to support more than one set of branding? How do we support multi-tenant use cases?