With design becoming prioritized and a greater focus being given to the Hilton Honors App, the mobile team began the work of translating the Hilton Enterprise Brand Guidelines into what would become Fractal for iOS. A design system built specific for mobile use, using Atomic Design methodologies.
The team lacked a source of truth, tools to make designing quicker and easier, and design direction. This ultimately led to a disjointed app experience and left the team frustrated and confused.
Lack of cohesion
No efficient way to build screens
Disorganized design team
By breaking out the app by section and identifying inconsistencies, I audited and began a design debt backlog that could be tackled over time or incorporated into any feature-work.
Section breakout determines scope
Holistic view could spotlight certain areas
Debt backlog could be used as a checklist
By dissecting the Enterprise Brand Guidelines, I was able to pull information about the brand that would serve as an outline for each piece of the design system.
Design language
Typography
Color
Keeping scalability and development top of mind, I began building the typographic scale and integrating accent colors using the iOS native system.
Frees up development time
Allows for Accessibility features up-front
Creates a baseline for a cohesive system
Icons were carefully aligned to both iOS standards while still adhering to the brand design language.
Keylines aid in icon production
Establish a universal line-thickness
Outline rules for shapes and curves
Typography, color, and icons, became the building blocks I used to begin the component library.
Atoms: input fields, labels, buttons
Molecules: cards, forms, table views
Organisms: navigation, hotel details, grouped lists
Sticker sheets and templates helped the team drive quality products. By using a plug-and-play approach for frequently used UI patterns, it created a better workflow and allowed more time to ideate.
Comprehensive resource for UI elements
Guidance on usage and patterns
Build & prototype quickly
My ultimate goals were to drive quality features and foster a collaborative design culture. Below are a few ways I approached these goals and helped unite the design team around our new system.
The design system became the catalyst that bridged the gap between designers, developers, and stakeholders. By using semantic naming conventions and developer terminology it helped increase our credibility, save time, and eliminate confusion.
I began hosting a weekly design sync where I announced any changes, updates, or additions to the design system.
Weekly peer reviews were an opportunity to share recent work, discuss new or emerging mobile patterns, and align our designs as a team.
Refining as I built out the component library, I began releasing the system in a phased approach. With integration, we instantly began to see a cohesive brand and app experience. The team is able to build quality features, quicker and we’re now aligned with design goals and patterns.
Regular team sync
Add and update components
Optimize for flexibility
Dive into how our team reshaped the Hilton booking experience. From discovery to implementation, outlining the solutions that took the Honors app to the next level.
