Proprietary CMS Mobile Experience Design

preview of the Online Access app

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.


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.

The old UI design screenshot 1
The old UI design screenshot 2
The old UI design screenshot 3
The old UI design screenshot 4
The old UI design screenshot 5
The old UI design screenshot 6
The old UI design screenshot 7
The old UI design screenshot 8
The old UI design screenshot 9
The old UI design screenshot 10
The old UI design screenshot 11
The old UI design screenshot 12

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.


  • 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.


  • 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 unappealingLogo, 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.


Primary Colors

Using the existing Online Access styles, I added some notification, success, and danger colors.

purple color for the projectBlue color for the projectRed color for the projectOrange color for the projectGreen color for the project
Secondary Colors

Shadowed elements only needed slight changes.

Gray color for the projectSecondary Blue color for the project
Mode Colors

The common white and black needed to be consistent as well.

White color for the projectBlack color for the project




Top Heading
Section Heading
Body Text
Body Text12ptMedium
Sub Text
Sub Text8ptMedium
Button Text
Button Text12ptMedium


Android Components

There had to be additional padding, but the color should bleed under the android menu.

android menu design

iOS Components

The menu on apple can line up with the bottom of the screen.

apple menu design

Buttons should be round, and maintain primary, danger, success, or secondary color.

buttons design
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.

My Name
Enter Your Email Address
Menu Components

Should be able to be opened by clicking the menu button, or dragging up from the bottom.

pop-up menu design
main menu design




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.

The login page before design
The new login screen design

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.

The old home screen UI
The new homescreen UI design

The old menu UI
The new menu UI design


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.

The old contact screen UI
The new contact screen UI design

The old general UI
The new general UI design

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.


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.

New proposed UI design loading screen
New proposed UI design login screen
New proposed UI design home screen
New proposed UI design menu UI
New proposed UI design account screen
New proposed UI design account screen light mode
New proposed UI design notifications setting
New proposed UI design contact screen
New proposed UI design account info screen
New proposed UI design company info screen
New proposed UI design file manager screen
New proposed UI design file folder screen
New proposed UI design camera screen
New proposed UI design photo preview screen
New proposed UI design image file screen
New proposed UI design file setting UI
New proposed UI design forms screen
New proposed UI design individual form screen
New proposed UI design form submission preview screen
New proposed UI design form submission information UI


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.

← Portfolio