Challenge

Following its acquisition by Ceridian, Ideal shifted its focus to become an app facilitating seamless connections between companies and shift workers. What set Ideal apart from similar products was its unparalleled advantage: access to a vast network of employers within Ceridian's database. As such, the primary objective of the initial website was to attract a pool of workers and demonstrate that Ideal offers the most efficient and hassle-free experience for finding shift work.

Furthermore, Ideal aimed to expand its network of companies to provide shift work opportunities across a broader range of industries, positioning itself as the most versatile app in the industry.

Approach

Narrating Ideal's Story and Vision

The primary objective of the Ideal’s new website was to effectively communicate its dual benefits for workers and employers, while also showcasing Ideal’s own vision and ambition as a company. To achieve this, I employed a strategic approach that focused on storytelling and visual identity.

Collaborating with a cross-functional team

Working in close collaboration with the client’s team, a content designer, and an SEO specialist, our focus was on crafting a comprehensive content structure for all pages. Our aim was to emphasize Ideal’s core value proposition to both target groups: seamless integration into their workflows, while automating essential administrative tasks such as invoicing and payments. This approach ensured that the website not only effectively communicated Ideal’s unique advantages but also optimized content for search engines to reach and resonate with its intended audience.

Visual Representation of Brand Identity

Visually, my goal was to inject the website with distinctive brand elements that would set Ideal apart in the competitive landscape of shift work apps. By integrating brand colors, typography, and imagery consistently across all pages, we created a visually cohesive experience. This approach not only enhanced brand recognition but also communicated Ideal’s unique character and values effectively.

Designing the Website

Wireframing Phase

Given the fast-paced project timeline, we opted to dive directly into high-fidelity wireframes. This approach allowed the client to quickly grasp the vision and facilitated a smoother transition to polished high-fidelity designs. During this phase, I worked closely with the content designer to ensure that the components I created would effectively enable them to craft Ideal’s narrative. The sections for the pages were determined during a collaborative workshop between my Versett team and the client.

In the wireframes, I began exploring brand representations within the components, laying the groundwork for the high-fidelity designs. A significant amount of time was spent with the client focusing on the hero section of the home page. Since Ideal’s primary business objective is to attract shift workers, we decided the hero section should highlight how Ideal seamlessly integrates into a worker's life. We settled on a layout that centered on this narrative, which I later refined in the high-fidelity phase.

High-Fidelity Designs

Building on the approved wireframes, I transitioned to crafting high-fidelity designs. Using the wireframes as a foundation, I iterated further on the components to enhance their functionality and visual appeal.

Continuing the work on the main hero area, we engaged in further discussions with key client team members and executives. Ultimately, we chose a simpler approach than initially planned, as the client felt that the visual elements effectively conveyed the key message. The design aimed to clearly communicate that Ideal offers numerous shift opportunities near the user’s location and ensures instant payment after shifts.

Recognizing that Ideal is a brand-new product and the website serves as an initial touchpoint for potential users, I made a conscious effort to incorporate elements of the actual app UI into the image assets. This strategy aimed to familiarize users with the app early in their journey and underscore that Ideal is a tangible, existing product, thereby bolstering credibility and trust.

To ensure Ideal exudes an approachable and relatable vibe, I devised a photo treatment that seamlessly integrates shapes from Ideal's logo throughout the pages. This not only reinforced brand consistency but also added visual appeal and a touch of whimsy to the image assets. Additionally, to further infuse personality into the design, I crafted a set of distinctive illustrations. These illustrations visually communicated key concepts and functionalities in an engaging manner, differentiated the brand, and contributed to a memorable user experience.

Development Handoff

Given the fast-paced timeline of this project, I prioritized thorough preparation to ensure a smooth transition from design to development. Here’s how I approached the development handoff:

UI Component Library

I created a comprehensive UI Component library that included all necessary states and variants. This library served as a reference for the developers, ensuring consistency and efficiency in the implementation of the design elements. I also provided detailed text styles to maintain visual coherence throughout the site.

Specifications for Spacing and Padding

To facilitate the development process, I meticulously documented specifications for spacing and padding for all main components. This attention to detail helped developers accurately replicate the design, minimizing discrepancies and ensuring a polished final product.

Interactive Prototype

To communicate the intended interactions and user flows, I developed an interactive prototype. This prototype showcased the desired user experience and also served as a valuable reference for the intended interactions.

Outcomes

Streamlined QA Process

One of the project's highlights was the efficient QA process. Given the tight turnaround of only few weeks, establishing close communication with the development team from the start was crucial. This proactive approach ensured a smooth hand-off process and streamlined the QA phase. We implemented daily check-ins to verify that the designs were being executed correctly and to address any necessary fixes promptly and efficiently. This close collaboration helped maintain the integrity of the design and ensured a high-quality final product.

Successful Website Launch and Future Plans

Ideal successfully launched their new website in mid-2024, marking a significant milestone for the company. The launch has facilitated Ideal's expansion, and they are currently growing their team to support future initiatives. With the website in place, Ideal is now focusing on launching their app in selected US states soon, further extending their reach and impact.