CleanPlay: A Journey Creating Their Brand, Website, & UI/UX For Android Tablet

December 2020

The Challenges and Objectives

CleanPlay is a sanitizing system that uses ozone to disinfect and kill bacteria and viruses without having to use heavy disinfecting and corroding chemicals. The developers and engineers of this product were working with a user interface (or human-machine interface) that they knew could be more user-friendly. Their vision and goals were that the user interface should be simple enough that it could be swapped out depending on the market it was sold to. They wanted the functionality to remain the same. We jumped on the task immediately so that we could have something in time for their first minimum viable product pitch, and a release for investors and target market. Since the product was so new it didn’t have branding of any kind, so it also needed a website and social media marketing.

Discovery Phase

During the first couple of meetings and emails, my goal was to understand and get a grasp of what I had to work with. I asked questions about their target market, competitors they admire, branding materials, what platforms would they be developing for, and many other questions. I also researched some of their competitors and gathered notes about the products they sold, the industries they were targeting, and the copy they were using throughout their resources, websites, downloadable PDFs, and such. I was keeping an eye on the terminology, certifications, and claims competitors were making to see if CleanPlay was in a similar space or if we were going to market something completely new.

Competitor and Product Research

Additionally, because of my background as a dental assistant, I remembered that clinics have machines that are used for sterilizing dental equipment. After struggling to remember the names of the many machines, I stopped by the autoclaves (steam, dry heat, and gas autoclaves) to see how their user interfaces and user experience appeared. I was looking for elements whose functions appeared essential because they kept reappearing across different screens and brands. I noticed the following about these machines (old and new):

Older models had knobs to dial timers, and temperatures, and adjust other settings (Could Provide Haptic Feedback)

  • ‘On’ or ‘off’ switches. On newer models, red and green buttons for ‘start’ and ‘stop’
  • Levers or handles to ensure machines are locked
  • Newer machines had physical buttons with LED's on the side to show different selections
  • Buttons with images on them and words below to depict sterilization package sizes or other important information
  • Warning labels on exterior advising the surfaces were extremely hot when in use

Here are autoclaves with a variety of interfaces, old and new machines (sterilization machines used throughout dental offices).

There is only so much information you can get from a picture or video, but after analyzing CleanPlay’s competitor's products I noticed the following about some (not all):

  • Used ONE button to begin the disinfecting process
  • Provided hard buttons, with very little screen real estate, very analog (like an old bedroom clock)
  • LED’s or small bulb (red, green, or blue) to distinguish when a process was running or complete
  • Implemented a fail-safe button on the inside of the machines (if they were large enough to fit an adult human)
  • There were chemicals or liquids that had to be replenished and filters that needed to be replaced (price points at about 30$for filter with a need to replace every six months.)

Creating Wireframes

After these findings, I moved on to creating the first rough draft, or proposal, for the architecture of their HMI's information.

CleanPlay's first quick draft of information architecture and user navigation

Information Architecture of HMI
Different Drafts of IA and UX with Team Feedback

After this was set, I needed to start bringing it to life! I began working on quick sketches of wire-frames in my notebook before jumping into Adobe XD to get a general feel of how the UI would appear, and how the UX would flow.

Combination of Sketchbook Images

At this point, I began working on roughs for wire-frames without any branding guidelines. I created a set of low fidelity frames in order to get team to give me some feedback on what was being made.

Here's the first version of the Home Screen in the system.

Many Previews of screens of CleanPlay's Proposed HMI
Just a quick close up of a few of the main screens that were being built into the product and some would be built later in future builds.

The last version in drafts before I started actually focusing on the branding guidelines of CleanPlay. At the top left you can see some of the colors I had been thinking about.

Creating Their Branding

At this point I didn’t have any colors, typography, logos, or taglines so I went straight to work on the branding. It took about a week or so to come up with sketches and rough drafts of logos and color palettes that I kept communicating with the team. Eventually, we created an anonymous poll and the majority of votes went to the one they have now! Unfortunately, I did not create an official branding guideline for them because at the moment my priorities were on creating and finalizing the UI/UX for the android tablets minimum viable product.

Here's the final brand for CleanPlay along with various versions of CleanPlay's logo in their color palette.

Final Screens: Log In and Sign Up Area

Overall, I feel grateful for the research, discovery, and iteration processes we took. Unfortunately, because I was a one media team for this project, it was a huge challenge to find the headspace and time to implement user surveys, interviews, or user testing with potential clients (like daycare owners, teachers, etc.) I devoted time to looking to their competitors to see what worked for them, as that became a sort of roadmap to our first MVP. Getting that one-to-one feedback from our engineers, Dev team, and stakeholders was what helped push the product in the right direction.

Here's the Main Log In Screen For CleanPlay's First Build
Brief View of Signing Up New Users

Final Screens: Within the Cycle Screens

These last few screens revolve around the Cleaning Cycle Phase of the MVP product. The main menu tab will have space to eventually build out features like: quick information about each cycle, access to the settings area, the abilities to see any pending delayed cycles, past history, user profile settings and more.

The home page of CleanPlay's Sanitizing System.

Here's a quick view of a running cycle, the estimated completion time, a progress bar, the items in the unit, the type of cycle and duration, and the steps left in the entire process at the top.

The final page users would see when a cycle is completed, the green check mark would take them back to the home page.

A Few Promo Videos and Website Launch!

The following are a few promotional videos I created for CleanPlay along with a quick video of the website:

A quick commercial for CleanPlay utilizing their MVP:

Website Launch Video:

Watch this short run through or experience the site yourself!

CleanPlay Promotional Video

Outline and Define Your Phases

I feel that we spent too much time creating screens, potential paths, scenarios, and outcomes, for our first phase. For an MVP, what we really needed were basic functionalities and the ability to run two to three cycles with minimum options. It’s always fascinating to know and plan out where the product could head, but it would have been better to define phases one through three, or however many the product called for to save time.

Involve Dev Team ASAP

I’m not a developer, and I'm still learning so much about the way back-end and front-end developers think. I feel including them sooner is key. This is how I can ask questions that sound something like: "What do we want to see in the first build?", "What can we expect in our first / second / etc. build", "When is our estimated / anticipated / desired deadline?", "Are there any limits? (time, money, team capacity/knowledge)", and many others.

Set a Visual Timeline or Road Map for Myself and Stakeholders

This is just an idea, but if I ever get the chance to work this way again, I'd take all the requests the stakeholders are making and figure out a way to set a huge checklist or visual timeline for myself. I don't want to turn in work that I'm not proud of, and It weighs heavily on my conscience when other critical details (like that branding guideline) get overlooked and left behind on the treks toward crossing our deadlines.