Product design

OptiFreight virtual booth

Mobile screen mockups
Client
OptiFreight Logistics
Project type
Product design
Project year
2021

Project overview

Businesses eagerly anticipate attending in-person trade show events each year to interact with potential prospects, clients, and vendors. These events provide an opportunity to generate qualified leads using various marketing resources. However, in 2021—and potentially in subsequent years—many businesses had to rethink their strategy for in-person trade show booths due to COVID-19.

OptiFreight Logistics by Cardinal Health was exploring ways to engage with potential buyers and prospects virtually. They envisioned a "virtual trade show" experience that could mimic a traditional trade show booth, complete with areas for dialogue with their team, opportunities to watch videos and download content, and options for visitors to request more information. This virtual booth was also seen as an opportunity for post-show follow-up, allowing the company to maintain engagement with attendees beyond the event itself.

Project credits:

In collaboration with Enterprise Marketing Team at Cardinal Health

Stylescape

Stylescape

Translating a brand's language into a visual representation involves creating a Stylescape — a carefully curated collection of images, icons, typography, and colors. This collection communicates a specific look and feel, helping clients envision their brand's final appearance.

After aligning the project's objectives and goals with stakeholders, we organized the information into content blocks. This organization helped us understand the layout and user flow, including potential navigation between pages and its seamless integration.

Next, we created low-fidelity wireframes featuring dummy text and basic shapes in grey. These wireframes allowed us to visualize how content adjusts, collapses, or responds across mobile and tablet screens. After presenting these wireframes to stakeholders and receiving approval, we proceeded to develop high-fidelity mockups. These mockups incorporated updated content, precise copy, brand imagery, approved calls-to-action, illustrations, and the brand's color scheme.

User flow

One of our initial exercises involved mapping out the user flow to identify the steps users can take, pinpoint areas of friction and frustration, and uncover opportunities to enhance the interactive experience.

Exploration
Exploration directions

In the first round, we explored different directions and compared the options that had the most potential. We then continued iterating further on those options before settling on the most viable option for mobile and desktop.

Medium fidelity desktop wireframes
Desktop wireframe

High fidelity desktop wireframes
Desktop final wireframe

Desktop experience
Desktop prototype

Low fidelity mobile wireframes
Mobile userflow wireframes

High fidelity mobile wireframes
Mobile userflow final wireframe

Mobile experience
Mobile prototype

Welcome mockup
Base state mockup
Summary state mockup
Form pop-up mockup
No items found.

Other projects

Got a project? Let’s talk!

Whether you are just starting your business or looking to update an existing one, we can help you go through strategy, branding, design, and development.

Thank you for reaching out, your submission has been received, and will be in touch shortly.
Oops! Something went wrong while submitting the form.