Arrangr

Arrangr

THE WORK
+       User Personas
+       Information Architecture
+       Stylescapes
+       Website Design
+       UI Style Guide
BACKGROUND

Arrangr, a pioneering web application, aims to revolutionize the world of online calendars and scheduling solutions. In an industry already crowded with contenders like Calendly and Doodle, Arrangr recognized the necessity to enhance both its brand and product to stand out. As part of the team, my role involved crafting the marketing website and brand identity, while another designer focused on perfecting the product itself. Our objective was to synchronize the launch of the revamped website with the introduction of the new and improved Arrangr product.

UNDERSTANDING THE AUDIENCE

Persona Development

In the initial stages of the design process, I developed personas to represent three key segments in Arrangr's primary target audience: Consultants/Sales Representatives, Business Administrators, and Educators. Through this exercise, we gained valuable insights into the specific requirements for scheduling applications and challenges faced by each group when trying to facilitate meetings. Diving deeper into each persona's needs helped us better position how Arrangr's enhanced product could effectively address their individual needs and goals.

Our Skillset

Lorem ipsum dolor sit amet

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Our Skillset

Lorem ipsum dolor sit amet

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Our Skillset

Lorem ipsum dolor sit amet

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

SITEMAP

Information Architecture

To provide a clear overview of Arrangr's marketing website, we devised a comprehensive sitemap outlining all the pages and subpages. Following a modular approach, the website was constructed, allowing for the reuse of specific modules across multiple pages. Our strategic plan involved replacing the content within these recurring modules with fresh infographics and relevant information pertaining to various aspects of the product. This approach ensured a consistent structure while enabling us to present dynamic and tailored content throughout the website.

VISUAL IDENTITY

Stylescapes

To explore various visual directions for Arrangr's new brand, I crafted three distinctive stylescapes. Ultimately, we decided on a color palette comprising shades of purple, blue, and magenta. For the headlines, we opted for a contemporary bolded sans-serif typeface called PolySans. The final stylescape featured dynamic gradient backgrounds, lively emojis, a blend of playful yet professional imagery, and bespoke custom icons. This amalgamation created a vibrant and engaging brand identity for Arrangr.

WEBSITE DESIGN

Homepage Design

Arrangr’s homepage design included several interactive modules and infographics to showcase the product. The  homepage hero was designed to be a GIF with animated calendar events popping in and out of the graphic. The user could tab through each section to see Arrangr’s most popular features, use cases by role or industry, and see examples of functionalities that make Arrangr’s product unique and superior compared to other scheduling apps.

WEBSITE DESIGN

Interior Pages

Following the same dynamic approach as the homepage, interior pages of the Arrangr website used interactive modules to present diverse information about the product. Consistency was maintained throughout these pages to provide a cohesive user experience. The Pricing and Plans page featured a comprehensive comparison chart, outlining the distinct features and benefits associated with each plan. By including interactive elements and informative visuals, we ensured that users could easily explore and evaluate different aspects of the product across the website.

WEBSITE DESIGN

Mobile Designs

As part of my design responsibilities, I created 20 mobile mockups for the Arrangr website. These mockups encompassed various elements such as an expanded navigation menu, mobile-friendly adaptations of infographics, optimized functionality for tabbed interactions, and an updated version of the Pricing & Plans comparison table tailored specifically for mobile devices. By focusing on mobile design, I ensured that the Arrangr website delivered a seamless and user-friendly experience across different screen sizes, allowing users to effortlessly navigate, access information, and make informed decisions, even while on the go.

STYLE GUIDE

UI Style Guide

At the conclusion of the project, I delivered a comprehensive UI Kit that encompassed typography and color styles used throughout the designs. Consistency was key, so we opted for a single font, PolySans, which served as the primary typeface for headlines, utility text, and body content. As I iterated with the color palette, I took the opportunity to assign names to specific gradients and accent colors, gradually expanding and refining the available options. This approach ensured a cohesive visual identity across the website, allowing for seamless integration of typography and colors that enhanced the overall user experience.