Profiles Responsive Redesign (2021-2022)
In the summer of 2022, HBO Max launched it’s fully responsive new mobile and web platform. As part of this effort, I led a team that reimagined our full profiles experience to work responsively from the smallest phone to the largest wide-screen monitors. We redesigned all screens for creating, editing, switching, deleting, and personalizing one’s profile. This also gave us a prime opportunity to fine tune accessibility and make incremental visual design improvements.
Project in a Nutshell
My Role:
Lead Designer. I was responsible for end-to-end UX and architecture and coordinated all research, ideation, visual design, and prototyping activities.
Most Fun:
Working closely with some of my favorite designers. We were on a short timeline so our team became a well-oiled machine and really solved a lot of big challenges efficiently and with a surprising number of laughs.
Biggest Challenge:
Finding the right balance of responsiveness and simplicity. Our initial approach was a bit overly responsive (lots of changes across all breakpoints) and would have been somewhat jarring to users and very complicated to implement correctly. We pushed to ensure that our system responded enough to ensure a positive experience without being too convoluted in the logic that controlled sizing and spacing.
What I’d Do Differently:
I would have listened to our lead engineer earlier about the character background in the avatars. He made a design suggestion that meant some of the color peeked through behind the character image. This small change really made the character reflect their color choice and was really gorgeous. I am glad he persisted, because it was really a great improvement.
The original HBO Max platform was not responsive in any meaningful sense. Our designs were limited to a single layout that would need to work across all breakpoints. The updated to a fully-responsive React-baed platform allowed us to rethink how Profiles could work better across a full-spectrum of breakpoints. I led a team of 5 designers to update page layouts and shared components to be responsive. We worked under tight deadlines, having about a month to redesign the full experience across 7 breakpoints. We consulted early and often with engineering on feasibility, technical program managers on planning, and design systems on incorporating our profile-specific components into the wider design system.
