); ga('require', 'displayfeatures'); ga('send', 'pageview');
716-308-8270 [email protected]

CREATING A DYNAMIC WEBSITE THAT REFLECTS THE NATURE OF A BUSINESS

My client needed a website design to reflect the dynamic nature of their interactive design capabilities that they offered their clients. An important objective was to make information on mobile as accessible as the desktop version.

THE PROBLEM

The client has many different types of potential buyers in the advertising and media space with distinctly different needs.

THE APPROACH

The client and I discussed the main types of clients and I was able to narrow down the audience into four persona types:

  • A – Fashion Brand Marketing Executive
  • B – Director of Retail
  • C – Media Buying Director
  • D – Executive Creative Director

From here, I was able build out personas, dissect their needs, and address how the client is positioned to meet their needs and functions. That informed the process to design a website with the promise to exceed those needs.

MY ROLE

I was tasked with creating a touch and mobile first website design to visually represent the dynamic nature of Monster Media’s consulting and technology services. Additionally, I influenced information architecture and the user experience direction.

INFORMATION ARCHITECTURE

The personas informed the content architecture and flow. My personas were able to influence augmenting the original sitemap and user journey. Ultimately we revised the main navigation of the site.

Personas influenced sitemap

Mobile homepage and Digital Out
of Home summary section

As lead designer, I created multiple wireframes based on the new site architecture. The design that performed most effectively and intuitively in tests with existing clients was chosen as the design direction.

THE NAVIGATION

When tapping on a menu bar item, the navigation swipes up to the top of the page to become a header and reveals the contents of the category page. The extraneous category headers get pushed to the top and come out the bottom. The natural gestures performed well for mobile and tablet experiences.

THE CHALLENGES

In the wireframing stage it became apparent we were going to need to visually help disseminate between the multitude of subcategory items. We decided to create a visual aid with icons.

THE EXECUTION

VISUAL DESIGN:
ICONOGRAPHY AND INFOGRAPHIC SYSTEM

As we began developing the site architecture, it became apparent that there Monster Media had many digital service offerings that required differentiation. A visual icon system helped distinguish the variety of offerings through cues that helped set the services apart from one another. The square icons are service location categories. The six-sided icons were analytics and security. The circular icons were technical interaction icons. See if you can identify the following icons: Digital Trucks, Mobile Control, Gestures, Multitouch, Sampling, and Augmented Reality.

Iconographic and Infographic system

High Fidelity Animated Prototype Screen Captures

HIGH-FIDELITY ANIMATED PROTOTYPES

In order to communicate the intentions of the animation design with stakeholders and developers, I created a detailed animated prototype that showed the motion and interactions of the navigation system.

THE RESULTS

We had a very smooth exchange with the developers building the site. Upon launch, Monster Media was able to curate and display case study videos on each product vertical that allowed them to grow their client base.

High Fidelity Animated Prototype Video

User Experience Design Portfolio

A healthcare software platform getting test kits to patients better

A review for a UI and design system kit I designed to make it easier for practitioners to get test kits into the hands of patients and review results with their doctors. 

Role: Contract Product Designer

Skills Leveraged: UI Design, Interaction Design, Stakeholder Presentations

Deliverables: Practitioner portal, patient portal web app software design, public website UI design

Mobile app and experience projects

A review of screen captures for a few mobile interaction design products that lead into comprehensive product design case studies.

Role: Independent Product Designer

Skills Leveraged: Interaction Design

A tool to help customers choose the right Airstream model to best suit their camping preferences

A case study from my journey through camper research, customer interviews, and leading the product design for a tool designed to make buying an Airstream easier.

Role: Independent Product Designer

Skills Leveraged: Research, Product Design, Project Lead

A gesture controlled experience where you fly like a pelican for a chance to win a trip to Florida

A case study carrying you through the creative journey of designing a game capturing human motion to propel the user like a bird through a third person journey from Chicago to Florida. 

Role: Creative Director

Client: Monster Media

Skills Leveraged: Creative Direction, UI Design, Art Direction

A pop up shop bringing to life  energy saving products

A case study that walks you through the planning, design and execution for the traveling mobile exhibit that packs in four rooms of a household into a carefully designed, 5×5 foot space.

Role: Visual Designer

Client: National Grid

Skills Leveraged: Creative Direction, UI Design, Illustration

Turning a stadium concessions contract proposal into an immersive interactive experience

I brought to life a business pitch and proposal with interactive elements, sounds, videos and immersive experience that helped my client tell their story in a memorable way. 

Role: Digital Designer

Client: Delaware North / Houston Astros

Skills Leveraged:  Interaction Designer, Creative Direction, Front End Developer, Animation

Creating experiential buzz for a rebranded grocery chain in Florida

I interviewed customers in preparation for learning how to create an appropriate and immersive experience that celebrates Hispanic culture to promote the rebranding of Winn Dixie grocery stores to Fresco y Mas.

Role: Creative Director

Client: Fresco y Mas / Winn Dixie

Skills Leveraged:  Environmental Design, Creative Direction, Social Media Design, Experience Design

A dynamic website design to showcase an experiential agency’s digital capabilities

Working with Monster Media to reposition their digital, experiential and social media offerings to a diverse lineup of clients.

Role: Website Designer

Client: Monster Media

Skills Leveraged:  Information Architecture, Persona and Audiences, Website Design, Interaction Design

Optimizing the product experience to help drivers find and install the right wiper blades

I was leading a rebrand of the 90 year old automotive brand and undertaking the direction of the desktop and mobile website redesign to achieve business and partnership goals.

Role: Team Lead, Creative Director

Client: TRICO Wiper Blades (automotive parts)

Skills Leveraged:  Website design, wireframing, information architecture, client presentations

Creating social engagement with stadium food ordering in Los Angeles

I was invited to ideate creative concepts food ordering intiatives surrounding my client’s pitch to the Los Angeles Rams football club.

Role: Independent Creative Director

Client: Delaware North / Los Angeles Rams (spec pitch)

Skills Leveraged:  Concept design, creative direction, and client presentation

Designing a web3 platform to enable user to access environmental conservation initiatives

Conserve Wildly is a mobile app platform designed to make it easy for allow citizens to vote on local conservation protection measures and proposals.

Role: Product Designer (startup spec)

Client: Startup

Skills Leveraged:  Concept design, Product Design, Research, User Testing

Matching volunteer’s talents with dog rescues that need their help

The Rescue Dogz app is the matchmaking platform connecting skilled volunteers with nearby dog rescues.

Role: Product Designer (startup spec)

Client: Self Launched Brand

Skills Leveraged:  Founder, Concept design, Product Design, Research, User Testing