Back
Art Direction Branding Content Strategy Market Research Print Design UX Research UX Strategy UX/UI Design
December 3, 2019

21st Century Expo Group

Mission




21st Century, a tradeshow and event company located in the DMV area, is dedicated to unlocking the Secret for Success in every partnership. Believing in the empowerment of value, innovation, responsiveness, and teamwork to elevate a brand’s presence in the event industry brings all clients the full Expo Group Experience. With unwavering commitment, they have cultivated a lasting relationship built on understanding and respect with all their clients. As a trusted one-stop-shop for event and exhibit excellence, drawing from over two decades of proven expertise to deliver creative, customized solutions that set new standards in the exposition and event management industry. Their clients’ success is their mission.




Project Overview




When the 21st Century initially engaged Marstudio, they were already on a growth trajectory. However, they recognized that their brand no longer kept pace with the rapidly evolving exhibit design and management landscape.

Driven by a vision to rejuvenate their brand, 21st Century partnered with Marstudio to create a dynamic and impactful brand identity, develop a new responsive website, and supporting marketing collateral.

The initial phase involved the conceptualization of the company’s new logo, skillfully executed by our Chief Creative Officer, Sam Rooeintan. My role encapsulated shaping their new brand identity by crafting their website design and creating supporting marketing collater. This endeavor began by analyzing the standing analytics, internal and external needs, content strategy, and information architecture (IA), which served as the foundation for developing a new IA, wireframes, and mood boards that would define the website’s structure for the design phase.

To infuse the brand with a dynamic and enthusiastic vibe, I drew inspiration from the geometric structure and expansive color palette featured in their newly designed logo. This design approach forms the visual language that now characterizes the 21st Century’s brand identity.

Skip the case study and assets provided in each phase, view the final designs

Before

A sneak peak into the UX evolution of 21st Century's new website

Drag the center arrow controls from left to right to view the before and after.
Before After

After

Research and testing

Discovery

Deliverables included

  • Discovery deck (assessment overview)
  • Information Architecture

Tactics included

  • Analytics review
  • Site performance testing
  • Accessibility testing
  • Stakeholder interviews and surveys
  • User survey and heatmapping
  • Content audit and ideation
  • Creative Brief

Tools Used

  • Google Analytics
  • WebAIM 
  • Hotjar
  • Google PPT
  • InDesign
  • Illustrator

With the job of enhancing the usability, overall organization, and visual impact of their existing website, we at Marstudio began the process with our initial research. Our methodology embraced a data-driven approach, beginning with the strategy phase, also termed “Discovery,” where we meticulously explored opportunities for development and design implementation to improve the overall user experience and create space for the new brand. This involved thorough data collection, stakeholder, and user surveys. With the qualitative and quantitative insights that surfaced from both external and internal users, we relied on a scaling approach, listing usability issues in order of priority; task criticality, impact, and frequency.

Branding problem statements

Visual impression

The current brand lacks vitality and enthusiasm, failing to reflect the high-quality products and services offered by the company.

Versatility

The brand’s adaptability to different environments is suboptimal, creating challenges in it various environmental applications.

Palette and accessibility

The brand’s limited contrast within its color palette not only restricts its flexibility but also raises concerns about accessibility, as it may pose challenges for individuals with visual impairments.

Recognition

Insufficient branding elements and an unconventional logo design make the brand unidentifiable without the company name’s present.

Massaging and voice

Steril brand messaging and voice, characterized by inadequate storytelling, hinders clientele from forming an emotional connection and genuine appreciation for the organization’s work, products, and services.

UX/UI problem statements

Homepage and overall site impression

The website’s homepage and overall design seem outdated and confusing, lacking a cohesive narrative. It suffers from excessive use of unoptimized content and lacks clear user paths to help visitors efficiently achieve their objectives.

Responsive pitfalls

The website lacks mobile and tablet optimization, hindering users from accessing insight into services and products while on the move.

Site structure and IA

Although the site structure is a decent starting point, it doesn’t account for the depth of information organized in a manner that could enhance the user experience, particularly for those seeking solutions through a partnership with 21st Century.

Accessibility

The color palette leads to numerous contrast issues, there is a lack of coding to support users utilizing assistive technology, alt text for images is missing, and the overall design neglects inclusivity in its user experience.

Sitewide Content Gaps

Inadequate storytelling or organization diminishes the ability for users to emotionally connect with and appreciate the organization’s work, products, and services.

Project Success Outcomes

The project’s success envisions an impactful rebranding journey, creating an entirely new and lively presence for 21st Century within their industry that will better reflect the quality of their products and service offerings. The new logo mark itself will be the first step to setting the stage for ongoing success. By analyzing qualitative and quantitative data, the website will meet both internal stakeholder and user needs, making their service insights more accessible to new and existing clientele. Drawing inspiration from the logo’s geometric structure and vibrant color palette, we will create a dynamic and compelling visual identity. The rebrand and associated assets will empower 21st Century to excel and keep up with the event industry market, delivering the expo group experience with excellence.

Brand strategy

Branding

Deliverables included

  • Final logo concept
  • Defined color palette
  • Typography selection
  • Branding sheet & guidelines
  • Print collateral

Tools Used

  • Illustrator
  • Photoshop
  • InDesign
  • Google Suites (Presentation)

We embarked on a creative journey to revitalize the 21st Century brand, capturing the dynamic energy and unwavering quality they consistently deliver to their clientele. We achieved this through a harmonious fusion of vibrant colors, captivating visual elements, and a revitalized messaging strategy. The meticulously designed structured logo, composed of blocks, mirrors the industry they operate in, symbolizing the reliability and solidity of their services. This transformation not only reinvigorated their brand but also underscored their commitment to excellence, helping them distinguish themselves in the competitive event industry landscape.

Final logo selections
Horizontal logo
Vertical logo
Brand palette
Brand palette
Primary
Playfair Display
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
Secondary

Fira Sans Condensed

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
Identity

Supporting brand collateral

Creating a unique visual system and strategy

Design and Functionality

21st-Mobile
Visual planning

Determine structure and aesthetic

Deliverables included

  • Moodboard
  • High fidelity Wireframes
  • Responsive designs

Tools Used

  • Google Suites 
  • Figma
  • Photoshop
  • Illustrator

We began by using insights gathered during discovery to establish clear project success expectations, which guided the restructuring of the website’s information architecture and the creation of user journeys based on well-defined Personas. This transitioned seamlessly into the visual and structural planning of the interface, where we prioritized visual exploration through a single mood board to streamline the design phase. This mood board served as the guiding inspiration for crafting high-fidelity wireframes.

Throughout the project, our collaboration with the client and development team played a pivotal role in determining the solution scope, pushing boundaries in functionality, and enhancing visual presentation. The high-fidelity wireframes provided a strong foundation for infusing the design with the newly established brand, implementing a full-color strategy, harmonious typography, and cohesive aesthetic elements across the website. We carefully addressed identified pain points and essential features, resulting in an engaging and user-friendly website that successfully captured the desired visual style while delivering an impactful user experience, aligning perfectly with the project’s goals and aspirations.

Deliverables

Design planning deliverables

Mood board creation

After crafting a fresh logo and branding elements, we used a comprehensive mood board to guide the visual direction of 21st Century’s web design, seamlessly aligning with the client’s vision and brand identity.

Wireframes

When selecting a diverse array of pages to structure during wireframing, the primary objective was to ensure the inclusion of all necessary components and functionality. Explore the key wireframes that set the foundation for the design. 

Deliverables

Final design outcomes

*site may appear slightly different due to client management

The final project’s success marked a profound transformation in 21st Century’s rebranding efforts, encompassing the development of a visually captivating, user-friendly, and responsive website, along with a range of marketing materials. This revamped visual identity effectively conveys the company’s enthusiasm and unwavering commitment to delivering high-quality services and products across both print and digital platforms. Through a steadfast focus on accessibility, the website was optimized for mobile devices, broadening its reach to a wider audience. The refined site structure ensures streamlined user journeys, while thoughtfully reorganized and emotionally engaging content deepens the connection between the company and its customers. Overall, the project achieved its goals of elevating 21st Century’s overal presence and positioning the company competitively in the event industry market.