Portacool
Mobile App

Portacool Mobile App
  • Project Overview
  • Portacool is a company that provides portable evaporative coolers for many different scenarios such as industrial worksites, outdoor events, gyms and many more areas.

    In 2023, Portacool planned on launching their new line of smart coolers and asked my team to help launch a mobile app that controls their new coolers. My role was to design the MVP app based on existing requirements and functionality of the cooler hardware.
  • Client
    Portacool
  • Role
    Lead Designer

Product requirements

For the MVP Portacool mobile app, the client provided us their research and initial requirements which we executed and refined on. After working with the product manager, we finalized the requirements to the following:

Requirements

  1. Account Management

    • Account Creation
    • Account Manipulation (Change Email, Name, Password, Phone Number)
    • Register Devices with Account
    • Disassociate Devices from Account

  2. Basic Cooler Configuration

    • Provide access to user-adjustable settings from the mobile app.
    • Display applicable status fields.

  3. Multi-Cooler Support

    • Users can register multiple coolers to one account.
    • View and control all coolers registered to the account from the mobile app.
    • Remove individual coolers from the account.

  4. Wi-Fi Configuration & Setup

    • Enable easy connection of the cooler to a Wi-Fi network through the mobile app.
    • Use Bluetooth (BLE) to send Wi-Fi network credentials to the device.
    • Register the device to the user's account during setup and configuration.

  5. Cloud Connectivity - Control

    • Enable remote control of the cooler over the internet via the mobile app.
    • Read and manipulate controllable settings of the cooler.
    • Support specified options with App/Cloud capabilities.

  6. Error Alerting

    • Provide active alerts to users based on alerts generated by the cooler.
    • Display descriptions provided by Portacool.
    • Push certain alerts from the cloud to the device.

  7. Cooler Onboarding

    • Assist users with the initial setup of their cooler.
    • Wi-Fi configuration and setup.
    • Setting a cooler descriptor/name.
    • Automatic configuration of initial cooler options.

Competitor analysis

In order to dive into this project, I researched competitors and other smart device automation apps, carefully examining their features and hierarchy. This helped with gaining valuable insights, spotting opportunities, and fine-tuning our approach for a great user experience.

User journey overview

I identified the 4 main stages of the user journey based on the requirements we finalized.

Additionally, because the cooler onboarding phase is a bit different than other device onboarding phases, I identified its user journey flow in order to understand how the experience would work.

Wireframing the solution

With the goals, features and processes mapped out, I moved into the next phase of creating wireframes to visualize the information architecture and determine the functionality in the interface.

Visual Design

Once wireframes were finalized, I started building out designs based on Portacool’s brand guide while also continuing to improve the user experience through exploration. Because Portacool’s users are generally working in mainly industrial environments, I kept the visuals very minimal, clean and to the point.

Cooler Onboarding

After several explorations of the device selection screen in the cooler onboarding phase, we decided to go with the solution that made it easy to browse through 10+ available coolers. Even though initially most users will only have 1-3 devices available, we decided on the layout that would be easy to navigate for even edge cases of 10+ devices.

Examples of cooler onboarding explorations. Selected option is outlined in green

Cooler Overview

A major challenge with the cooler overview screen was navigating the fine line of showing too much information vs showing too little information. After several rounds of exploration, we went with the solution that most closely resembled the physical controls on the hardware which more users are familiar with.

Examples of cooler overview explorations. Selected option is outlined in green

Cooler Details

One of the biggest challenges of this project was organizing the various features in these coolers into a succinct page that didn’t look too overwhelming to the user while also making sure changing a setting isn’t too tedious to accomplish. After going through several rounds of exploration which included exploring which features should be readily available vs which ones can be accessed on another screen(drawers, popups), the solution we decided on made adjusting the power, fan speed and pump speed accessible on the main cooler details page. Features such as adjusting louver mode and timer and changing device settings would be accessible through tapping on their respective cards.

Examples of cooler details explorations. Selected option is outlined in green

© 2023 Sungho Youn