Proprietary CMS Mobile Experience Design
What’s the company?
Online Access is a company that provides web solutions for HVAC contractors, with various products and a base of website hosting.
Who is the customer?
HVAC contractors and their office staff are the customers. They need to have access to the website and web solutions that Online Access takes care of.
Background
For this project, our engineering team had created an app to manage a limited selection of our web application tools. I was given a few screenshots of the current user interface and was to create a new design for the UI using current branding. The app was already in development when I was brought on, so I leveraged my experience from creating the branding and design systems for Online Access to create a mockup of a new UI for the app and its existing tools.
Before the design
This app is still currently in development, and for this new design, I was given screenshots of the current design of the application. The screenshots were taken on an iPad but the design needed to be focused on mobile constraints, translatable between apple and android.
User Personas
Since this was an app developed based on an existing tool of Online Access’s, I took a look at the information of who our customers were, and who would be using this tool the most. Most customers can be sorted into two primary groups: Company Owners and Company Office Staff.
Online Access employees use the web dashboard much more than our customers due to the nature of our agency-style model, but this app was to be more focused for our customer’s use, in cases where they needed to interface with our platform or our team.
Company Owners
The individuals who run an HVAC business. They tend to be preoccupied with the business, whether they operate in the field or manage their employees from their office.
Needs:
- To upload images from their phones to the website
- Manage messages while on the go
Company Office Staff
The individual(s) who manage technicians, field calls, and manage communications for the business. They are more commonly the ones who handle details and communication with Online Access on behalf of the owner.
Needs:
- Images from the field for the website
- To manage contact forms and form submissions
The Online Access customers don’t usually have to deal with direct changes to the website, but they do receive emails from form submissions on their website and need to email in files to Online Access to be added to the website. These people tend to be in their mid-40s or later, and do not use web applications on a regular basis, especially when compared to Online Access’s customer support who usually uses the web dashboard on their behalf. With this in mind, the design would need:
- Larger buttons
- Clear interactions
- Accessible button locations
- Multiple interaction options
Problems & Solutions
The existing UI didn’t reflect the new branding of Online Access, nor were the tools or route of accessibility apparent. Other pain points and issues were thought about as follows.
Pain Points and Problems | Possible Solutions |
|---|---|
| Login screen lacked branding, overall visually unappealing | Logo, color, and design elements from current dashboard login screen could be integrated. |
| Menu is the primary navigation route, is not easily accessible from single-handed orientation. | Menu would be more obvious, and in the most accessible location for mobile. |
| Text buttons for interactions, not as obvious for at a glance interactions. | Visual icons could be used with text in tile format for more obvious interactions. |
| The app lacks clarity of who is logged in. | Personalization of the app and user name should be displayed. |
| No light or dark mode, unlike the existing web app. | Design should be equally legible in light or dark mode. |
| The additional step of opening the menu to navigate to other tools, especially while in a tool is tedious. | Menu interactions available in the menu or an existing menu bar for quicker navigation |
| Tools with multiple elements lack division between the groups of interactions, or where the next step will take them. | Sections in each tool will be grouped in a consistent format, broken up with headers. |
Design Approach
A lot of the content is available in a dynamic list format, I’ve seen some good solutions in the past, so I researched designs of existing apps that had a wide range of users, such as Twitter, TikTok, Tumblr, D&D Beyond, and more. I saw a common form of menu interactions and settings structure in my research that informed my design choices.
Colors
Primary Colors
Using the existing Online Access styles, I added some notification, success, and danger colors.
Secondary Colors
Shadowed elements only needed slight changes.
Mode Colors
The common white and black needed to be consistent as well.
Typography
Lato
abcdefghijklmnopqrstuvwxyz
0123456789!@#$%^&*()
Top Heading | ||
|---|---|---|
| Heading | 16pt | SemiBold |
Section Heading | ||
| Heading | 18pt | Bold |
Body Text | ||
| Body Text | 12pt | Medium |
Sub Text | ||
| Sub Text | 8pt | Medium |
Button Text | ||
| Button Text | 12pt | Medium |
Components
Android Components
There had to be additional padding, but the color should bleed under the android menu.
iOS Components
The menu on apple can line up with the bottom of the screen.
Buttons
Buttons should be round, and maintain primary, danger, success, or secondary color.
Input Components
The text inputs are to have their label as a placeholder, until focused on or have text input, where it will become the label.
Menu Components
Should be able to be opened by clicking the menu button, or dragging up from the bottom.
Icons
Comparison
Here are some discussions about some of the primary screens on the app. The objective was to make the app easier to navigate and maintain branding standards.
Before
After
Login Screen
The UI before was very basic and didn’t reflect the Online Access style.
In the new design, it matches the new branding and style for Online Access, incorporating the teal gradient and the hexagons. Important interactions like sign up for service, and forgot password are included. Also the option for biometrics is available, since it is a preferred sign in method for many users.
Home Screen
The UI before had lacked the branding from before, and also only had singular buttons for various tools. It was not easily operated at a glance.
The buttons were broken out into tiles. It was also designed to be accomodating for additional tools in the future. It used icons for visual hierarchy so that navigation could be used without having to read the text. But there is also text available if the icons are not implicit, and that provides context if or when needed.
Before
After
Before
After
Menu
The open menu blended in with the background too easily, and for the primary navigation method, it was in a harder-to-reach location for single-handed use.
The menu bar was brought to the bottom, with the main menu button in an easily accessible place, where a user could tap the button, or slide up to access an expanded menu. More popular navigation could be assigned to the additional spots in the bar for quicker navigation.
Contact Screen
The contact form before was simple enough, but other available contact methods were not given.
The form was formated to match other input method styling, and two different contact methods were given for the phone number.
Before
After
Before
After
Standard Pages
The navigation routes before, while clear, didn’t display new messages, or leave way for different message systems in the future.
The new layout communicated unread content in proper directories and could give more information about the subdirectories. This also gave room for future message types to be added.
Designs
Once the setup for the new layout for the app design was decided, the mock-up for the rest of the tools requested was created.
Wrap-up
While the project, unfortunately, is still in development, the changes proposed definitely made a more brand-specific impact on the user, and led to a cleaner experience. After proper user testing and feedback, we could learn more about what user interactions should have more focus on in this project.