Justin Bregar
Contact Me

SnowCloud - Test Project

Introduction

I was asked to redesign the three screens shown in the Apple App Store for SnowCloud's app in a modern, clean style. Due to the fact that I have limited time and access for true design discovery, I concentrated on a facelift/reskin approach with limited impact to the overall organization or information architecture.

Starting point

Redesign

Login screen

The elements on a login screen are pretty standardized across platforms and applications. In this case, we have the option of scanning a member pass rather than using an email/password combination. Changes here included replacing the background image with one that is both more dynamic and takes up less of the screen to give a more open feel. To avoid a lack of contrast between the "card" and the background a topographic pattern was placed behind to fill out the rest of the screen with something that adds a little texture while still feeling light and playing into the "mountains" theme.

The "Scan Team Member Pass" button was changed to a secondary button style to avoid competing with the login button. A QR code icon was added to give more visual differentiation.

Ancillary information like the version and any copyright or troubleshooting information was moved behind an "info" button to get rid of the small blue footer.

I also added a "Forgot password" link to allow self-service password resets.

"Launcher" screen

The original launcher screen was a tiled set of buttons with no real visual hierarchy, identical shapes, and overly detailed icons. For this redesign, I've set up a strong visual hierarchy with buttons that are 2x width for commonly-accessed functionality and 1x width for lesser-used functionality (which specific function is 2x vs. 1x should be determined through design research or discovery activities, but I took a guess based on our conversations).

Dynamic colors are used to "brand" the buttons to give them strong differentiation for much faster acquisition of the "right" button. A good example of this is a team member who's assigned to rentals will very quickly understand that "their" button is the purple one and will be able to quickly acquire it in the launcher grid because of it's unique color and shape in addition to the larger, simpler icons.

This brick-style stacking grid also allows flexibility to someday incorporate more informational tiles for things like current and upcoming weather, notifications, etc.

In addition items that are not available because of authorization level are shown "grayed out" with a lock icon to make it clear why they're unavailable.

 

Introducing a "user menu"

Because I'm working off of screen shots rather than a live version of the application, I wasn't sure where the dollar bill icon in the header of the original took the user. However, I believe the space it occupies is better used for an avatar-triggered "user" menu that has lesser-used functionality like app/device settings, editing the user's profile (and changing passwords), and logging out.

Depending on what the dollar bill icon represents, that functionality could either be assigned a tile in the main body of the screen or added to the user menu (or another solution based on better knowledge of the system).

The user menu's location and contents are also a very common pattern for applications of this type, so we're following Jakob's Law by sticking with it.

Moving a destructive action like logging out to a dedicated menu also has the side effect of making it a bit harder to perform and reducing the chance that the user would tap "log out" when they really meant to hit one of the neighboring buttons.

Calendar view

The calendar view was largely just cleaned up and aired out. Shaded boxes are used instead of strong colors with white text to reduce the overall visual weight of a full schedule. Badges were redesigned to better emphasize the number of guests instead of the entire phrase. The calendar was expanded to give a lighter and airier feel. This does have the unavoidable side effect of reducing data density (we've gone from 10am-8pm to 11am-5pm visible on one screen).

One option for bringing back data density is to allow that as a view preference under the "Daily View" drop down. Give the user the option of a "Compact Daily View" that reduces the hour height at the expense of a more roomy feeling calendar. This combined with the ease of scrolling vertically on a mobile device is probably a good trade off.

The "Today" shortcut was changed to a primary button. All of the buttons and dropdown buttons were given more padding and adjusted. The viewed date was moved to the top of the screen and its spot below was used for a more friendly relative name ("today", "tomorrow", etc.).

Color scheme was adjusted to be more harmonious even when green and red are adjacent.

Bonus: Alternative "Launcher" version

If we wanted to stick with the equal tiles/buttons and avoid bold colors in the launcher view, this is one possible alternative. Color is still used to "brand" the areas and aid in visual acquisition, but it's more muted so we're relying on the text and icons a bit more.

Copyright 2025 Justin Bregar. All rights reserved.
crossmenu