Designing for Corporations

In our efforts to produce maximally efficient code that successfully solves myriad issues, computer scientists are far too often perpetrators of designing programs that are better suited for members of our software-savvy in-group than for the average user. Human-computer interaction, though, seeks to address this issue. By taking into account an application’s target audience, as well as the needs and expectations of that audience, designers in the field of HCI are able to create products accurately designed for others. As an exercise in designing for others, our CSCI 479 group was assigned to redesign the mobile web page for Bucknell’s Weis Center for the Performing Arts with a corporate audience in mind. Our team of three immediately dove into generating our informational and visual designs and creating sketches and prototypes.

Information Design

The first step in our design process was to generate ideas for the information presented on our mobile site, as well as the organization of that information. As a team, we produced ten different potential designs for each of the Weis Center pages we were recreating. These pages included the Weis Center homepage, the 2017–2018 Season page, the Plan a Visit page, and the Technical Information page. Just a few of the initial designs are shown below:

As a team, we discussed the positive and negative aspects of each proposed design, and selected the best features to be included in our first prototype. Some notes from our discussions include:

  • Same topbar for all pages
  • Topbar includes logo, search button, contacts button, and hamburger button
  • Homescreen
  • Large image with text
  • Advertise renting out the Weis Center
  • Advertise accolades
  • 2017–2018 Season screen
  • Side scrollable tile based image menu
  • Info on selected event
  • Technical Details screen
  • Photos of venue at top of the page with a button to change the photo
  • General info
  • Rent it button
  • Plan a Visit screen
  • Images should be previewed on the page

With all of these details in mind, we went about creating our paper prototype. Here are the sketches:

With this paper prototype in place, we went to testing. Our testing methodology was to explain the app that we were redesigning and then we would let the test users go through the app and act as if it was a normal page on their mobile device. We had some difficulties with this. As this is a paper prototype, and a rough one at that, it was often hard for testers to find what was supposed to be buttons. This testing difficulty was actually a useful takeaway, as it showed us that if we were to make an app with buttons, that those buttons have to be obvious. Further, if we want a user to click on a specific button (like a “Rent It” button) then we would have to style our pages in a way that makes that button pop. Some other feedback that we took into consideration included:

  • Add a tab with info about surrounding area for visitors
  • Distinguish downloads section on tech info page
  • Split “Rent It” button into “Rent It | Plan a Visit”

Visual Design

With this information in mind, our team had a solid foundation on which we could build a working prototype. We had decided on a basic layout for the information that we would be presenting in our mobile site. To truly reach a corporate audience, though, we knew that we needed to present them with a product that felt familiar and aesthetically pleasing. Thus, we visited numerous sites aimed at corporations to help us understand the tone that our audience would expect. We then curated screenshots of these sites, and, using niice.co, constructed a mood board to help us determine the best choices of font, color, and style to use for a corporate audience.

Web pages that influenced our stylistic choices included Monster’s job posting homepage, corporate law firm Akerman LLP’s homepage, and Go Daddy’s homepage. There were a few key takeaways from our analysis of the mood board:

  • There is no single color or group of colors to choose from, but pick a color theme (cool or warm) and stick with it (This was especially important for us because Bucknell’s colors are blue and orange, two colors on opposite sides of a cool and warm scale)
  • Pages are simple and to the point
  • One or two large photos per page
  • Simple, easy to read font
  • Advertise your product (in our case, the Weis Center)
  • Place quick links to important things.

Digital Prototype

Using these key stylistic points in conjunction with the informational layout that we had previously decided upon and the feedback of our test users, our team constructed a digital prototype of the project with Invision. Below are the various pages of our design.

The homepage for our mobile site
The events page. Users will be able to scroll through and select events in the menu at the top of the page.
Left: The main menu, which appears when the user clicks the hamburger button at the top right of a page. Middle and right: Tech Information page
Left: Plan a Visit page with Map selected. Right: Plan a Visit page with Seating Chart Selected.

This prototype was designed to not only provide information highly relevant to a corporate audience, but also to exemplify styles consistent with other corporation-targeted websites. Just as other sites utilized an either warm- or cool-colored palette and stuck with that theme, we chose a warm, orange theme that adhered to Bucknell University’s aesthetic. We also aimed to keep the pages of our site simple, with large images, sparse text, and one or two easily legible fonts. Consistency was a key factor in our design; page titles are all italicized, section titles are bold, and text in buttons is in all caps. Furthermore, we ensured that the Weis Center’s accolades and also buttons prompting users to rent out the Weis Center were made prominent, as advertisement seemed essential across our mood board. In our design, we also took into account the various suggestions that our test users provided us, such as information about the Lewisburg area.

Feedback from the Class

Once our working Invision prototype was complete, it was time to present our work to the class and listen to their feedback. Much of the feedback we received was positive, praising the clear intention of the site as well as the “clean,” “elegant,” and “stunning” visual style. Even more helpful, though, was the constructive criticism we received. Common complaints included a lack of difference in element sizing, difficulty in finding more information, and difficulty in reading small text. Our classmates also provided us with feedback about potential expanded functionality that none of the members of our team would have considered. To illustrate, one student suggested a testimonial section where visitors to the page could read the opinions of other individuals or corporations who had rented the venue. Another student recommended that we added a calendar, so that prospective renters would be able to see available dates.

What We’ve Learned

Because this project served as a brief exercise in informational and visual design for others, our design is not intended to progress beyond the digital prototype phase. Even so, the assignment provided our team of three computer science majors with invaluable experience with designing with an audience in mind. The hours we spent researching, brainstorming, sketching, presenting, testing, and designing helped underscore the idea that design is not something to be brushed off as trivial — it takes real effort to design a product that others will not just use, but want to use.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.