BEA Sales Demos

BEA Systems, a leading application infrastructure company, found that its sales presentations weren't hitting the mark. They were expensive to produce and needed to be operated by highly-trained sales engineers. Our challenge was to create a demo framework that could serve a range of industries while making it easier to learn and operate.

Bea Sales Demos

BEA Systems, a leading application infrastructure company, found that its sales presentations weren't hitting the mark. Our challenge was to create a demo framework that could serve a range of industries while making it easier to learn and operate.

1. Context

[↓] BEA Sales presentations were given in-person via overhead projector. We created a demo remote control in a separate browser window to ensure that presenters could easily navigate and remember the demo script.

2. Wireframes

[↓] We needed to demonstrate the capabilities and features of BEA's enterprise software across a wide range of industries. Each demo was designed take the audience through a static BEA-powered website made to appear as if it were working. The wireframes were used to finalize the script for each sales demo.

3. Identity + Design System

[↓] It was important that the demos felt like they were from a real company. We developed an identity for a fictitious multinational holding company named Avitek. Each Avitek subsidiary was given a distinct color scheme to ensure that the demo audience would understand when presenters moved from one product to another. This brand framework gave us the ability to add new target industries as needed.

[↓] The Avitek home page served as the jumping-off point for all of the different industry-specific demo scenarios. We used bright, high-contrast color schemes to compensate for the visual muting that would occur when the demo was projected on a screen.

4. Visual Designs

[↓] Avitek intranet was created to show how BEA's portal technology could be used to easily compose dashboard pages for company employees. Each demo was about 10-12 pages long, and each page had just enough interactivity to create the impression that the presenter was interacting with a live website.

[↓] Avitek Financial was created to show how BEA could power the creation of new applications and services for the financial industry through integration with an ecosystem of third-party applications and services.

[↓] Avitek Electronics was created to demonstrate how BEA's software could be used in manufacturing, fulfillment, and logistics.

[↓] Avitek Digital Imaging was created to describe how BEA's software could be used to create consumer-focused retail websites.

[↓] We created demo overlay animations to help explain how each demo screen was powered by BEA's software. The animations could be called up as needed.

1. Context

BEA Sales presentations were given in-person via overhead projector. We created a demo remote control in a separate browser window to ensure that presenters could easily navigate and remember the demo script.

2. Wireframes

We needed to demonstrate the capabilities and features of BEA's enterprise software across a wide range of industries. Each demo was designed take the audience through a static BEA-powered website made to appear as if it were working.

3. Identity + Design System

It was important that the demos felt like they were from a real company. We developed an identity for a fictitious multinational holding company named Avitek. Each Avitek subsidiary was given a distinct color scheme to ensure that the demo audience would understand when presenters moved from one product to another.

The Avitek home page served as the jumping-off point for all of the different industry-specific demo scenarios. We used bright, high-contrast color schemes to compensate for the visual muting that would occur when the demo was projected on a screen.

4. Visual Design

Avitek intranet was created to show how BEA's portal technology could be used to easily compose dashboard pages for company employees. Each demo was about 10-12 pages long, and each page had just enough interactivity to create the impression that the presenter was interacting with a live website.

Avitek Financial was created to show how BEA could power the creation of new applications and services for the financial industry through integration with an ecosystem of third-party applications and services.

Avitek Electronics was created to demonstrate how BEA's software could be used in manufacturing, fulfillment, and logistics.

Avitek Digital Imaging was created to show how BEA's software could be used to create consumer-focused retail websites.

We created demo overlay animations to help explain how each demo screen was powered by BEA's software. The animations could be called up as needed.

1. Context

BEA Sales presentations were given in-person via overhead projector. We created a demo remote control in a separate browser window to ensure that presenters could easily navigate and remember the demo script.

2. Wireframes

We needed to demonstrate the capabilities and features of BEA's enterprise software across a wide range of industries. Each demo was designed take the audience through a static BEA-powered website made to appear as if it were working.

3. Identity + Design System

It was important that the demos felt like they were from a real company. We developed an identity for a fictitious multinational holding company named Avitek. Each Avitek subsidiary was given a distinct color scheme to ensure that the demo audience would understand when presenters moved from one product to another.

The Avitek home page served as the jumping-off point for all of the different industry-specific demo scenarios. We used bright, high-contrast color schemes to compensate for the visual muting that would occur when the demo was projected on a screen.

4. Visual Design

Avitek intranet was created to show how BEA's portal technology could be used to easily compose dashboard pages for company employees. Each demo was about 10-12 pages long, and each page had just enough interactivity to create the impression that the presenter was interacting with a live website.

Avitek Financial was created to show how BEA could power the creation of new applications and services for the financial industry through integration with an ecosystem of third-party applications and services.

Avitek Electronics was created to demonstrate how BEA's software could be used in manufacturing, fulfillment, and logistics.

Avitek Digital Imaging was created to show how BEA's software could be used to create consumer-focused retail websites.

We created demo overlay animations to help explain how each demo screen was powered by BEA's software. The animations could be called up as needed.

5. Impact + Takeaways

The original scope for this project was for one demo. BEA was so satisfied with our initial work that we designed eight additional demos and BEA's own sales portal. These demos were used to sell over $400 million in software and services. BEA was acquired by Oracle in 2007.

  • We had to understand how BEA's technology worked and what was important to communicate to an audience. I did a deep dive for each industry we targeted so that the demos would feel authentic.
  • We studied the challenges that BEA had when presenting its technology. This enabled us to create demos that were easier to present while reducing the amount of training and prep required to give an effective presentation. This resulted in more demos given by more sales people.
  • Years later, the BEA team I collaborated with brought me on to lead the design efforts for their own startups: Swivel and Apigee.

5. Impact + Takeaways

The original scope for this project was for one demo. BEA was so satisfied with our initial work that we designed eight additional demos and BEA's own sales portal. These demos were used to sell over $400 million in software and services. BEA was acquired by Oracle in 2007.

  • We had to understand how BEA's technology worked and what was important to communicate to an audience. I did a deep dive for each industry we targeted so that the demos would feel authentic.
  • We studied the challenges that BEA had when presenting its technology. This enabled us to create demos that were easier to present while reducing the amount of training and prep required to give an effective presentation. This resulted in more demos given by more sales people.
  • Years later, the BEA team I collaborated with brought me on to lead the design efforts for their own startups: Swivel and Apigee.

5. Impact + Takeaways

The original scope for this project was for one demo. BEA was so satisfied with our initial work that we designed eight additional demos and BEA's own sales portal. These demos were used to sell over $400 million in software and services. BEA was acquired by Oracle in 2007.

  • We had to understand how BEA's technology worked and what was important to communicate to an audience. I did a deep dive for each industry we targeted so that the demos would feel authentic.
  • We studied the challenges that BEA had when presenting its technology. This enabled us to create demos that were easier to present while reducing the amount of training and prep required to give an effective presentation. This resulted in more demos given by more sales people.
  • Years later, the BEA team I collaborated with brought me on to lead the design efforts for their own startups: Swivel and Apigee.

← Macromedia Flashcast

Behr Paint Kiosk →

← Macromedia Flashcast

Behr Paint Kiosk →

← Flashcast

Behr Paint Kiosk →

Thanks for viewing my portfolio.

© Jess Ruefli 2025