FEDERALIST WINES
BRANDING, RESPONSIVE WEB + MOBILE DESIGN
Tasked to develop the brand direction for a new line of varietals from the folks at Terlado Wines, the campaign strategy of merchandizing a collection of craft wines to the millennial, craft beer-drinking male demo entailed a fully integrated launch across all media; including a bold new responsive site design, digital banners, social presence, and a traditional POP campaign.
FEDERALIST WINES
BRANDING, RESPONSIVE WEB + MOBILE DESIGN
Tasked to develop the brand direction for a new line of varietals from the folks at Terlado Wines, the campaign strategy of merchandizing a collection of craft wines to the millennial, craft beer-drinking male demo entailed a fully integrated launch across all media; including a bold new responsive site design, digital banners, social presence, and a traditional POP campaign.
Art Direction, Web & UI Design
I'm a paragraph. Click here to add your own text and edit me. It's easy.
Art Direction, Web & UI Design
I'm a paragraph. Click here to add your own text and edit me. It's easy.
Art Direction, Web & UI Design
I'm a paragraph. Click here to add your own text and edit me. It's easy.
Art Direction, Web & UI Design
I'm a paragraph. Click here to add your own text and edit me. It's easy.
01
SERVICEMASTER® NATIVE APP
UX RESEARCH, WIREFRAMES, UX + UI DESIGN
Specializing in disaster restoration, ServiceMaster® Recovery provides rapid response recovery following a major natural trauma. In the race towards digital integration at the onset of the pandemic, its sales and marketing team invested in a weather alert and information mobile app to better serve an engage their commercial clients.
The Project Goal and Design Challenge
The intended value and functionality of the SRM app was distilled down to two primary mandates:
1. Tailored weather content and notifications for potentially effected businesses by severe weather
2. A one tap emergency service for clients impacted by severe weather damage
Understanding the product goals behind the initiative, my role was to incorporate the UX strategy to produce hi-fidelity designs that aid and satisfy the targeted audience. In addition to crafting the visual language to align with the clients brand, the scope of the project also called for establishing a scalable initial design system to help level set teams for future iterations post handoff.
The Journey Map & Wireframes
Initially the client had broken down the screen count and put together some basic wires in Balsamic to showcase the overall UX strategy and journey breakdown. Having inherited the wires, I was tasked with defining the UI as well as elevate usability with a UX audit of the IA at a macro level.
For me, the combination of journey mapping and building wires in tandem is a helpful way to better visualize the navigation and determine all the elements driving the experience. Hierarchy, component structures, accessibility, and interactive content are all discovered during this phase.
The Design Library
Once the wireframes got the green light, the design phase was two-fold. Define UI coherence while simultaneously initializing an inventory of components for future development. The scope for design was a quick turn, and handoff was going to drop fast, so the UI and systematizing the UI had to happen in concert.
As each component was created they were immediately organized into a library. And atomically, structure by structure, style by style, the design language and patterns developed into a sharable design system. Come handoff, this was the essential single "source of truth" for all concurring work steams to source from.
The Design Rationale
Core-needs first. The intent was a minimal architecture simplified down to 3 main tiles for streamlining access to essential content. And the focus of navigation was in the context of an immediate and obvious "life-line" service. The overall product was to enable the user to quickly accomplish these two critical goals: Always be informed of the weather conditions that might effect my business, and easily reach my SRM representative if it does.
Fast performance. Quick access to primary functions and lightweight, scalable assets for speedy screen loading was key to fast access.
Purposeful brand presence. The visual design strives to balance a bold continuity with a clean contrast of accessible UI elements. Being intentional about where the SRM brand is present helps direct the focus on a users immediate needs with limited distraction.
Built for evolution. The design system is devoted to the flexibility of UI patterns and designed for continual product growth. Future-friendly structures and primary components were made with aforethought to easily "lift and shift" IA for future iterations.
Proposed for Phase II
Like so often with an aggressive timeline, some of the fun stuff was politely downgraded to the ever familiar "maybe a version 2 thing." Micro-interactions and any fancy UI were de-prioritized. So consequently even key interactions (truly important ones IMHO)–floating input labels and progressive assistive prompts–didn't make the Phase I launch.
But probably the most exciting teased functionality was the provision of a modal navigation drawer. Though a secondary navigation and its destinations were not in scope, mocking up the aspirational feature demonstrated not only its value, but the functionary potential of the app itself. As the features of the product expand, so would the necessity to organize a navigational hierarchy. Inspired by Google Materials use of a scrim, this is what I proposed.
Outcomes and Take Away
With a lot riding on this initial launch, the first benchmark of success was aiding the client in demonstrating the exponential value of this product to all internal stakeholders. Now available on OS and Android, it's become a quantitative rallying point as a crucial step towards their business goals of a greater digital reach to further extend and boost their services.
The development and implementation of an official SRM design system equipped the client for further projects to maintain product consistency and accelerate time to market. For both designer and developers, the design library can now be leveraged for further development as the product and user base grows.
