Jessamyn Edwards

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

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.

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.

Primary buttons were resized to equal proportion, text increased to 12pt, dropdown control was re-skinned, and icons were updated.

Extra pixels were eliminated so the cells fit edge-to-edge. Icons were recolored and updated. Buttons were replaced with an icon and label.

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. 

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.

Final iteration with "Flexo" color scheme and icons. October 2015

We got a few shout outs on Twitter

Users start with instructions and hint text.

Flags were introduced to make this dropdown easier to spot at a glance. Icons were sourced from GoSquared.

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.

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. 

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.

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.

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.

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.

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. 

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.

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.

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.

A machine could be placed in a women's restroom for semi-private access.

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.

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.

A nicely illustrated diagram of frontstage and backstage touchpoints for the Lady Business vending concept. Ah, grad school!

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.

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.

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.

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.

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.