At Skyrocket, we’re often trusted to take up big ideas and design them down to small screen sizes. New and evolving practices in web design have continuously pressured companies to acclimate to what their end-user wants and needs. Our relationship with California Closets, an industry leader in home decor and interior design for over three decades, pushed us to reevaluate our concept of space.

‍

Just as California Closets is able to transform simple rooms into beautifully curated spaces, we needed to adapt the website’s mobile component within the walls of their already-built brand identity.

‍

California Closets’ modern look is accentuated through its monochromatic palette, showcasing luxury and class, while its experience is catered to high customization. By keeping their own aesthetic minimal, the opportunity for their customers’ individual expression is at the forefront of their design. Bold lines and familiar shapes offer both the practical side of storage and the beautiful display of lifestyle. We channeled these strong elements in order to build the California Closets’mobile website by staying true to the brand and applying our design expertise to the customization of content, navigation and subtle details.

‍

Customizing The Experience

With over 100 showrooms worldwide, we wanted to ensure that the mobile experience California Closets presented could maintain the same level of detail without overwhelming its user via a small screen.

‍

By tapping into the smartphones or tablets’ geolocation capabilities, we were able to localize the user by taking customers to a landing page that was true to their whereabouts.

‍

From there, browsing through local showrooms and connecting with team members becomes possible without having to manually navigate through various branches of information.

Perhaps the most important aspect of California Closets is its invitation to book a free consultation by filling out a form on the desktop website. Our solution in translating this call-to-action into a mobile-friendly experience was found in offering the user the option to book a consultation through a call button in the top-right corner, while also allowing them to fill out a form as a secondary option. Taking these existing models and communicating them on mobile required us to know California Closets customer habits and to maintain those conveniences.

Our solution was found in creating an immersive experience for users through a layered navigation system.

Navigating Through The Rooms

Traditionally, websites with a heavy amount of content showcase their categories and options using an accordion style menu. While this can create a fuller and more impressive offer in selections at California Closet, it could risk being a cluttered view on mobile. Providing a scrolling option was confusing on a small screen as users could easily lose their place. “Here is a case where the brand is already there, and we’re using an existing DOM to retrieve information for mobile,” UX Designer, Arman Keyvanskhou mentioned, “So when you think about the flow, it’s defined by the existing structure of the website. We had to to be very creative about how we solved the navigation.”

With California Closets desktop site housed in Drupal, we used Mobify.js to create a mobile version that was adaptiverather than responsive. Where websites would usually respond to a mobile viewport, an adaptive experience allowed us to pick and choose content. “By making it adaptive, we could have a completely independent layout on mobile,” explained Developer, Albert Teng, “this allowed us to create something outside a traditional menu.” Instead of a drop-down menu, the user would be able to access a dedicated area which presents them with the main rooms of a house: including the bedroom, living room, garage and home office. Within the selection of each room the user is given more options via a bullet point-style list.

Staying True While Being Innovative

Because the desktop site was very content-heavy, we worked closely with California Closets to find a balance between minimizing content and maximizing usability on the mobile site.

‍

“Communicating through UX samples became very important during this process,” explained Creative Director, Michael Parks, “they’ll always want their content to stay and we always want simplicity, so by effectively sharing the vision we could reach a middle ground.”

‍

Using a “Read More” option rather than cutting out content helped create a seamless visual experience on California Closets’ mobile website without sacrificing important material, such as the team bios.

The centerpiece of the mobile app was the iconography we designed to pull the whole experience together. From the call button to the various rooms, the icons sparked our imagination, but were designed with a modern and sleek feel to be paired with the brand identity.

Conclusion

In the end, our role in this project was in finding feng-shui between California Closets famous value proposition of customization and the inherent demands of shrinking screen sizes and on-the-go web behaviour. The prototype of our ideas and space for feedback allowed us to meaningfully collaborate throughout the creative process. “The California Closets mobile component asked us to be loyal to the existing brand,” Arman explained, “It was more about designing an experience versus the visual elements.”