Circle with Disney UI

Project: Circle with Disney UI Design
Start Date: 2016
Role: Lead Product Designer

The Problem and Opportunity

The Circle with Disney product was already making waves in the screen time management marketplace and making a big difference for the families of its users. But the UI was not flexible enough for the Circle team to add the features users were asking for.

(1) Solid colors in the header created more visual weight in the header and not in the tool itself.
(2) Colors of icons and other UI elements were determined by the “profile’s” filter level, which was confusing as users switched between profiles within their account. This approach to color was also difficult for engineering to develop and upkeep.
(3) Selected states were unclear and inconsistent across the features.

The Tasks

  • Update the UI to allow for the addition of features over time
  • Make icon set more visually consistent for use in UI and marketing
  • Work closely with engineering, product and leadership teams to ensure timeline and development expectations were met
  • Account for all screens within the user flow for each feature

The Process

Step 1: Understand the needs. Understand the restrictions.

Designing for growth – I got to be a part of Circle with Disney’s first big app update since the launch. We found that parts of our previous design were limiting our development progress and I was tasked with changing some UI elements. The purpose of these changes was to make the app more scalable for future growth. Changes included:

  • decluttering the UI
  • creating more visual hierarchy
  • bringing consistency to size and spacing

Designing for feeling – UI isn’t only about usability; it’s mostly about feelings. With our first major app update, we wanted users to feel the growth of our brand. My job was to visually create changes that made users feel our brand maturity and build more trust.

Designing against restrictions – This design process was hampered by a short timeline, so work needed to be completed and handed off to development quickly. The short timeline, combined with the method of development for the original UI, created limited opportunities for any significant layout changes.

Step 2: Create user flows.

In order to meet the design needs my team and I created user journey mapping to figure out the different ways users went through our app. This was also to make sure the engineering and developing teams were properly resourced with designs when building out the changes.

One discovery that came out of this phase was our need for designing the empty states of the app. Up to this point, most empty state screens just included a toggle switch to turn the feature on and off. I was tasked to update the look of those screens to encourage users to interact with the feature.

Step 3: Refocus the icons, color palette and hierarchy.

The original icons were irregular in size, corner rounding and line thickness. The updated icons address these issues.

One way I was able to help create the feeling of maturity and growth with this app update was building more design consistency across the UI elements. Among the things I did to accomplish that consistency, I updated the icons to create more uniformity as well as updating the color palette of the app to ensure the hues were more homogeneous. There were also issues related to the visual hierarchy that needed to be resolved, so I worked on balancing text hierarchy and the visual weight of color.

The original color palette had inconsistency in saturation. The updated palette balances the hues. The updated UI focuses blocks of color on action items and important information.

Step 4: Apply the updated look for all the screens.

In order to help our engineering and development teams, I provided both the user journey mapping and many screen mockups to show the applied changes.

Step 5: Continue work with engineering through development.

Design is about connection and relationship – how people understand and relate to an organization, people group, individual or product based on what they see. In the same way, the production process often mirrors those principles. Throughout the development of the app update, I worked with the engineering and development team to answer questions or provide more digital resources. Connection and communication were key to delivering a finished product.