Mac users represent about 20% of GoToMeeting, Webinar and Training customers. These customers were overdue for an interface update. We wanted to more closely align the control panel look and feel with current "Flexo" brand standards. Text needed to be made consistent. A quick typography audit spotted sizes ranging from 9pt to 12pt with no defined hierarchy. Graphics didn't support high resolution Retina displays common to newer machines.
This design evolved through weekly design critique and trial & error. Our biggest concern was that users wouldn't wake up to a new design and be thrown for a loop in their meeting. We tested for contrast to make sure buttons in enabled and disabled states still appeared clearly against new background colors. The keyboard/mouse button was also changed and tested by Chris Chan.
Clicktests were performed on the old and new versions of the control panel to test SUS (system usability scale) and SUM (single usability metric. Most core tasks performed at the same rate of success or slightly higher than the original.
The project achieved its goal of releasing with an updated look and feel, on time and without negative impact to customer satisfaction metrics (no change aversion). All graphics were updated to support Retina. All type was changed to reflect the user's system font and appear in a consistent size.
July to October 2015
Amy Kerr and Brad Cohen, project management
Reena Merchant, Chris Chan, Paul Mueller, design
Kelly Park and Briana Perry, research
Dave Bourgeois, Mark Bessey, Michael Neary, Paul Fitzgerald, Steve Ehrenfeld, development
The Mac interface circa July 2015. The classic control panel uses panes for dividing functionality and an ever-present "grabtab" menu for audio and screensharing commands.
I explored the blue, gray, and orange color palette of our style guide in watercolor mockups of the control panel. July 2015
Orange and blue themes
This was a low-stress way to explore color combinations and get people talking about the changes to come.
I removed all color from the interface and created this template to help me quickly experiment with colors.
A color proposal with silver panes and dark blue primary buttons. We were concerned the lack of contrast between the panes and headers would prevent people from scanning between sections.
This proposal paired orange primary buttons with a very bright interface. Contrast wasn't quite dark enough to make the icons easy to distinguish, especially at small sizes.
Dark and stormy
This color proposal also felt too low-contrast because we wanted the headers to be easy to scan. Using two different blues for the screensharing and webcam buttons felt inconsistent.
The darker elements worked well to define the real estate of the control panel. Lighter orange buttons didn't stand out against the background, however.
The Flexo color palette applied to the Mac interface. Light grays were used as the "base neutral" to help darker grays and greens pop.
Solution: screensharing pane
Primary buttons were resized to equal proportion, text increased to 12pt, dropdown control was re-skinned, and icons were updated.
Solution: attendee pane
Extra pixels were eliminated so the cells fit edge-to-edge. Icons were recolored and updated. Buttons were replaced with an icon and label.
Solution: Audio pane
An icon was added to the left of the radio buttons to help users understand the difference between switching their audio mode.
A clicktest on muting showed us a weakness in the classic interface. A microphone button used for device switching was being mistaken for a mute button.
Mac before & after
These images compare the original Mac, the new Mac, and the updated Windows client. Mac intentionally did not change any layout, text strings, or logic in this approach.
Solution: reskinned control panel
Final iteration with "Flexo" color scheme and icons. October 2015
We got a few shout outs on Twitter
Allow a GoToMeeting user to join by phone without dialing in.
Fine-tuned instructions, steps and error messaging. Worked with instant join team to maintain consistency with web app version.
Usability tests revealed problems with steps users had to take when joining to un-mute themselves. As a result, we changed the behavior to eliminate the extra steps and join users un-muted.
May to November 2016
Amy Kerr, David Theurer, Drago Dichev, Steve Ehrenfried, Jamin Koo, Krishna Vadrevu
Users start with instructions and hint text.
Country drop down
Flags were introduced to make this dropdown easier to spot at a glance. Icons were sourced from GoSquared.
Phone number entered
Phone number self-formats as you type. Call Me button enables once user enters ten digits.
Your phone number appears with a progress spinner
Users are asked to press # before connecting to meeting audio. The instructions are shown simultaneously on the control panel and spoken over the phone.
Hang up button enables. Phone button enables for muting.
Friendly error messages. Call Me button disables until user enters a new number.
Dial in is the default tab for phone call audio. Because Call Me is a paid option, it was introduced cautiously to avoid unexpected increases in users fees. This design, however, doesn't expose the feature as well as it could.
Connected via dial in
Users continue to see their dial-in number and access code after being connected so that they can share it with other attendees. However the PIN is hidden so it can't be shared.
Mac version of Call Me. The audio button appears in the pane and the tab pattern appears more like a pill.
Flag position was moved to the left of the phone number field to emphasize that the feature only works in the US & Canada.
Phone number entered
The standard Mac primary button is blue, which is the same color as the tab above. For that reason, an orange skin was used for contrast.
Call in progress
At this point the user can mute themselves or hang up via the interface.
The phrase "Your" was added to the audio PIN when we found out users were sharing their PINs with others.
Toll-free and international phone numbers were originally accessible in a separate window via a link that said "and other numbers." We changed to a dropdown to make these options more visible.
We debated about how to present the two options for phone call - as a link, a tab or a third radio button. User feedback guided us toward a tab design to make the Call Me option more visible.
We tried an underline style, a traditional tab, and a toggle design. The traditional tab felt the most clear on Windows, but the blue toggle pattern followed traditional Mac desktop design.
We used a click test to help guide our use of the tab pattern to expose the new feature. Despite these findings, we now know that users aren't as likely to click a tab to expose options in the control panel.
The goal was to update look and feel of GoToWebinar for Windows according to brand guidelines without changing layout or functionality.
A fresh coat of paint for the GoToWebinar control panel on Windows. Originally done as a hack week project with developer Dave Theurer and designer Chris Chan, the new look was released in March 2017. Focused on reducing visual clutter by eliminating "boxes within boxes" and bringing more of the interface edge to edge. Updated 100+ asset files and updated specs for 19 control panel panes and states.
Early click tests showed comparable success rates with classic interface. No drop in tNPS scores since release.
Dave Theurer, Chris Chan, Amy Kerr, Monica Miller, Jessica Swartz
Repetition in Revit
Revit users group and repeat complex blocks of elements. However, some users are unable to use these existing tools because of the types of models they create (such as concrete with rebar) or because of the magnitude of their models.
Developers had been working on a new type of "lightweight" group that could repeat elements quickly and easily without slowing the model down. However, it had some limitations and we needed to find out if users would be able to accept those in order to do their work.
We spoke with architects who model buildings with high degrees of repetition, like hospitals and hotels, and structural engineers, who model elements with pre-cast concrete. They showed us their models, how they worked with our existing grouping tools, and then tested out our new tool. We tested various names, icons, and presentation of the tool to see if it would be palatable to our user.
August to December 2014
Ryan Duell, Diane Christoforo, Robert Stairs, Lijuan Zhu, Richard Taylor
Button for a new type of grouping tool, the "block," to the Revit user. The block is distinct from other Revit grouping tools such as families, links, assemblies and groups.
The user begins with a hotel room including furniture, fixtures and walls.
The user selects the elements. Furniture and fixtures are made with families, or elements that can be duplicated and combined.
The user creates a new type of group, a "block" that includes the hotel's elements. The block can then be duplicated en masse for a large building project.
To illustrate the "lightweight" nature of the "block" group, we made dozens of them in a model and asked the user to spin, zoom and pan around. We did the same with traditional groups so that users could see the difference when the model was large and heavy.
Alternate group names
Various names for grouped elements were suggested. The "block" is a group that can host families (like rebar or furniture), is lightweight (as opposed to traditional groups), and is non-joining (as opposed to 'healing' groups like walls).
Variations on the current icon for group were modified, as well as other metaphors like magnets, layers, shields, and barbed wire. Eventually, a dotted line around the elements was the icon that seemed to convey the concept.
We defined the steps a user could take to edit their block group. Duplicate entry points makes it more intuitive for users who are used to working a certain way with the product.
We defined the hierarchy for blocks in the model as a sub-section of Groups so that users would identify them as a special type of group instead of an entirely new concept.
When editing a block, the user's model removes elements outside the group, limits the commands available and gives a yes/no confirmation menu.
User testing tasks
We created task sheets like this one that we used for on-site testing visits with customers. The customer would sit in front of a laptop with the development build and a model and complete the tasks at their own pace, then comment on a SUS scale on the back.
Info viz poster
To socialize the team's project, I created this poster which compared our new "block" group tool to other tools in Revit for repeating elements. It identifies similarities and differences between the tools and shows how blocks are distinct and potentially useful for certain types of modeling.
This visual explanation shows where designers get frustrated in the current flow of designing for repetition, such as in hotel rooms. Essentially, variation must be supported while maintaining inheritance to the original group.
Another attempt to visualize the blocks project and put it in context of other types of similar tools for repetition and grouping.
Simulating the steps to model and duplicate elements with Legos helped our team brainstorm ideas for the steps in the interaction.
For a team visioning workshop, I sketched an idea for a tool that would help us articulate the differences between the current set of grouping tools and identify pain points.
This worksheet was used in our workshop for people to color in sections that corresponded to their positive or negative experience using the tool for various tasks.
I illustrated the current problem with groups as too slow to repeat and adjust in a large model.
This painting shows the "empty" state a user sees while waiting for their model to re-appear after making an edit. "Regen" means "regenerating" the graphics.
Fun illustration of our Revit logo and some legos, which were always on our desks and in studio to help us talk about the project.
An illustration of the interaction where a user expects snapping behavior between two "healing" elements like walls.
AEC360 Architecture storyboard
Communicate the vision of Autodesk's Architecture, Engineering and Construction (AEC) division in a story format to educate stakeholders and compel them to imagine their work process beyond a single tool. Today's AEC workflow uses many design processes which don't "speak to each other." Imagine a world where there are no handoffs and all project stakeholders contribute to the same building model.
Identify key players in the AEC life cycle and describe their workflow in a connected design environment. Use similar graphics to illustrate touch points like designing a building envelope or modeling drainage analysis to convey unity between trades.
This project had a quick turnaround of one week. After white boarding with the team I sketched a storyboard on paper. A few other designers pitched in to start working on the detailed interfaces. I found images of architecture projects to use in the deck and mocked up a few of the key interactions. A few drafts later and we were ready to go.
Illustrations of different methods of adding culverts to a drainage design. Users were asked if they'd prefer to "pick it, build it or shape it." This helped guide the team to providing a culvert picker interaction that offered pre-designed options suited for a stream and road crossing.
Infraworks drainage vision
We created a video sketch to tell the story of Autodesk Infraworks drainage design user experience. We wrote and recorded the script, created interface mockups, and took photographs to portray the personas at work.
After conducting a series of interviews with drainage engineers, I mapped out a task flow for their process of design and iteration. We created a tool for analyzing stream crossings from a point, a road or along a path to help them determine the flow of water and the requirement for the drainage infrastructure.
Lady Business vending
Women work very hard to take care of their female health. Perhaps a little too hard. To help women better meet their everyday health needs without skipping a beat, the Lady Business project asked if ordinary restroom vending machines could be developed to offer a wider range of products, including some that don't yet exist.
I researched the current experiences of women in accessing contraception, seeking treatment for common infections, interactions at clinics and pharmacies and spent a fair amount of time poking around women's public restrooms. Women I interviewed expressed frustration with the current model of obtaining female health care. They face obstacles such as the burden of time, feelings of shame and lack of access to needed products.
The Lady Business vending machine I designed was created with a DIY female health care attitude in mind. By making products such as self-diagnostic kits and contraceptions more available, the vending machine would empower women to take on more responsibility for their health by giving them the tools to monitor and care for themselves. Surprisingly, much of the technology desired in these products already exists, but women either didn't know about it or it simply isn't offered. To bring the Lady Business idea to life, I conducted workshops with women to build their ideal vending machine. Then I designed prototypes of the vending machine and products that could be sold inside, based on the needs and suggestions of women.
Suguru Ishizaki, Miso Kim, Loretta Neal
Graduate thesis project, 2011 to 2012
LadyBusiness LLC, 2012 to 2014
An early sketch showing a vending machine in a women's restroom containing birth control and self tests.
Inspired by the "Help" line of medications, these sketches show how a self test for UTI might be administered. A woman would be able to test and treat from the same product.
An early mockup of a slim vending machine showing the type of products that woman might want.
In the restroom
A machine could be placed in a women's restroom for semi-private access.
Birth control sketches
How else might birth control be packaged? A sketch to explore solutions for smaller doses - like if a woman forgets her pill or just needs backup.
I invited female students to join me in a roundtable discussion to give feedback on product ideas, machine placement and interaction. This helped me define the requirements for what would and wouldn't make sense for a vending purchase.
Where women hide things
Women confessed to hiding feminine products all over their body and clothes in order to conceal them from the trip to the restroom. Keeping packaging smaller than retail size was important to the design.
Instead of selling items one by one, it seemed to make more sense to try and address particular scenarios with kits. A kit might address a test and treat situation or a need to feel prepared for sexual activity.
Using a "pillow" package, I imagined that a kit could contain instructions - reading was very important to woman - and one to three small items.
Service design blueprint
A nicely illustrated diagram of frontstage and backstage touchpoints for the Lady Business vending concept. Ah, grad school!
Working in minature
I made many tiny mockups of vending machine styles with paper to experiment with a variety of shapes. I was inspired by kiosks and ATMs to imagine a smaller-scale machine than the typical soft drink vending machine.
Jessica Shafer approaches a cardboard mockup of a corner vending machine. The corner seemed to offer the most privacy because the user could have her back to the room.
Loretta Neal shows what it might be like to purchase a product from a Lady Business machine. We mocked up the machine in foam core and placed it in a restroom on campus. I used these photographs to "sell" the concept.
In the stall
Loretta shows how a Lady Business product would be purchased and then used immediately in the stall. We wanted the packages to be small enough to remain on the lap of the user without being seen by others in the restroom.
Vending machine mockup and corresponding "pizza box" style products.
Fun with words
We poked fun at the uncomfortable situations women are so self-conscious of with product names like "Piss off" and "Yeast Beast." Women use humor to talk about their bodies and ease the distress of illness or sexual issues.
Kits for women
In each kit the mockup showed the products that could be contained inside. People seemed to respond to the pencil drawings more than I anticipated, so I used them in the final concept.
A kit for periods containing tampon, pad, wipe and chocolate.
A kit for safe sex containing a condom, lubricant, wipes and panties.
A kit for emergency contraception including a pregnancy test and morning-after pill.
A kit to test for a variety of STDs and mail away the strips to a lab.
A kit for the dreaded yeast infection including a self test, cream and pill.
A kit for UTIs (urinary tract infections) including a self test and a round of antibiotics. A girl can dream.
Real life machine
I purchased slim, wall mounted vending machines from a manufacturer in Turkey and mocked them up with labels to promote Lady Business LLC in Boston.
I wrote a list of FAQs and mailed it out to businesses and women-friendly spaces in Boston to promote Lady Business Vending.
I had postcards made up and mailed them to salons, gyms, and schools to promote Lady Business Vending.
The postcards described the type of items businesses might tolerate having in a vending machine in their space. I avoided the most controversial products, but was never able to convince a business to install a Lady Business vending machine.