Global Digital University

UX Design 101

Laura Chang & Sarah Peng

May 2019

coniferous forest Mixed coniferous forest on UPM/Blandin forest land in Itasca County, Minnesota. The Upper Mississippi Forest project is the largest conservation effort ever undertaken by the state of Minnesota and one of the first and most significant accomplishments of the Clean Water Land and Legacy Amendment. © Richard Hamilton Smith

     

As our Global Digital team continues to grow, so do our capabilities and knowledge into different realms of digital marketing and production. 

To help expand our understanding of user experience and digital design, Associate Director of User Experience, Laura Chang, and Digital Designer, Sarah Peng, gave an introductory presentation on designing digital content.

 

This is a critical topic for anyone involved in content creation or promotion. If you missed the presentation, we encourage you to watch the recording. You can access the recording and the slide deck in the links to the right. You can also refresh on the main ideas by scrolling through the presentation recap on this page. 

 

 

The UX and Design team

The UX and Design team sits on the Global Digital team and is a fairly new discipline to TNC. The team and consists of Laura Chang, Assoc. Director of User Experience and Sarah Peng, Digital Designer. They both have deep and broad expertise in digital design and are eager to help all TNC creators build the best content possible. 

By working closely with the Systems, Analytics, and Content teams, Laura and Sarah make sure whatever we design adds value to our audiences and meets their needs on nature.org, or any other digital platforms.     

Slidedeck
UX Design 101 Slidedeck

 

What is UX? 

First things first — what do we mean when we talk about User Experience or UX? 

Slidedeck
UX Design 101 Slidedeck

Quote

A good user experience has to provide value and fulfill a need that the audience has, as well as being easy to interact with.

Slidedeck
UX Design 101 Slidedeck

The heart of UX is that it is evidence-based. There are lot of different type of design, but the special sauce of UX is that it is based on what people say, think and do. We make decisions based on real user behavior. This helps us make sure that what we create is aligned with how people think about and interact with the world. 

 

Slidedeck
UX Design 101 Slidedeck

      

Why does UX matter? 

A lack of good, thoughtful design can cause serious, real-life consequences. And some humorous consequences as well. 

If you aren't familiar with the image bellow, Steve Harvey announced the wrong winner at the 2015 Miss Universe pagent. He announced the first runner up (second place) as the winner.  

Perhaps he should have been more careful - or perhaps they could have employed a designer to help with the results envelopes. 

Slidedeck
UX Design 101 Slidedeck

Take a look at the results card that was handed to Steve. 

How could this card be redesigned to reduce the chance of errors occuring? 

Slidedeck
UX Design 101 Slidedeck

What is wrong with this card? What could be improved? 

The alignment of information is all over the place, while the most important information is positioned on the bottom corner of the card.

It isn’t clear at first glance who the winner is because the word “Winner” isn’t written on the card.

Had this card been better designed, Steve Harvey would have saved himself and the contestants from the very uncomfortable mishap. 

 

Another example of why UX matters is in understanding how to empathize with your users. Take a look at the MRI machine below. 

Slidedeck
UX Design 101 Slidedeck

A lot of pediatric patients were intimidated and scared by the appearance of the machine.  

Industrial designer Doug Dietz at General Electric Healthcare wanted to transform how children experience the scanner. The challenge he posed was, “How could one create a scanner experience that children would love?”    

What came about was a visual transformation from a medical operating room to a playroom of adventure. They were designed to be kid-friendly and imaginative sparking excitement and happiness from the kids.  His scanners became part of an adventure setting and the machine might be a pirate ship, an underwater castle, or a sleeping bag under the stars. 

Thoughtful design turned an intimidating procedure into a fun adventure that made the result - getting an accurate scan of the child - much easier for everyone involved. In fact, these scanners helped children get through the scanner more quickly with fewer issues, and so ultimately more children could be served with the scanners. 

This design was successful because the designer had empathy for the patients and started his redesign with an understanding of the emotional experience of the patients. 

 

In the next example we look at workplace systems. Take the examples of Deltek time reporting and the emergency alert system in Hawaii. 

Slidedeck
UX Design 101 Slidedeck

We encounter user experiences every day that impact our emotions and decisions. If the Deltek timesheet interface was designed to be more simple and intuitive, would we not dread it so much, putting off doing them until the last minute? Or, if the interface for Hawaii Emergency Management Agency shift-change drill selection was designed to be clearer, would the employee have not hit the wrong selection saving the whole nation from getting an emergency alert notification of a missile threat? 

Design issues can have minor annoyance as a consequence, such as with Deltek, or it can be near-catastrophic, as with the emergency alert system in Hawaii. 

The screenshot here from the Hawaii alert system shows that triggering an all-out alarm - rather than a drill - was as easy as clicking the wrong link. This is poor design. The page is not intuitive and it is not easy to make the correct decision. 

(For more details on the event and the alert system design, check out this article.)

 

Slidedeck
UX Design 101 Slidedeck

Why should companies care? One reason is that it can drive profitability. If people are engaged and able to effectively use your product, it can increase conversion rate, engagement and customer satisfaction.

In addition, in the product design and development cycle, it can help reduce cost. One option is to go off into a corner, design something, and launch it off into the marketplace, hoping it works. Another option is to incorporate user feedback along the way, which can help de-risk the possibility of launching something that just doesn’t work.

 

Slidedeck
UX Design 101 Slidedeck

Marketing and UX go hand and hand. Marketing is about getting peoples’ attention, convincing people that they should walk toward you. User experience is about clearing the path for them as they walk toward you. 

 

Slidedeck
UX Design 101 Slidedeck

Think about all of the experiences we support at TNC, both digital and non-digital. We have members, principal gift donors, influencers, all with different needs. 

Slidedeck
UX Design 101 Slidedeck

The UX process is broken up into four phases: Discover (insight into the problem), Define (defining what you are solving for), Ideate (solving for the problem), and Deliver (deploying, testing and iterating your solutions).

Each one helps you frame your design decisions based on real user behavior and needs.    

 

Slidedeck
UX Design 101 Slidedeck

The Double Diamond represents the flare and focus mindset. Where the Diamonds get wide (diverge) is where you have a lot of problems, ideas and solutions on the table. Where the diamonds come to a point (converge) is where these concepts are narrowed and focused into something workable. 

 

Slidedeck
UX Design 101 Slidedeck

Let’s say you’re redesigning the About Us page (something the Global Digital team pursued!).

 

Slidedeck
UX Design 101 Slidedeck

This is a typical picture of how we would brainstorm ideas: a bunch of business colleagues getting into a room exchanging ideas on what ‘they’ want.

 

Slidedeck
UX Design 101 Slidedeck

If that’s how we work, then we only ideate for our business needs rather than the needs of the consumer. To ensure we’re serving for our audience, we need to shift our focus from being company-center to human-centered.    

Quote

To ensure we’re serving for our audience, we need to shift our focus from being company-center to human-centered.

Slidedeck
UX Design 101 Slidedeck

The first thing to ask yourself before starting your brainstorm session is “Who are you designing for?” Donors? Prospect members? Media? Influencers?

 

Slidedeck
UX Design 101 Slidedeck

In the Discover phase, you want to get as much feedback from your audience as possible. You want to understand the pain points and everyway that the current design may not be working for your audience. You can get a better understanding of your audience and their needs from direct interviews, workshops, observation (including tools such as Clarity), personas, user journeys, and analytics. 

 

Slidedeck
UX Design 101 Slidedeck

When Global Digital redesigned the About Us page on nature.org, we conducted interviews to determine what people were looking for on the page and whether or not they found that information. After getting a lot of feedback, we had to define the problem. What we determined was that the mission of TNC came across clearly on the About Us page, but people did not come away with a good understanding of how we were working to achieve the mission. 

 

Slidedeck
UX Design 101 Slidedeck

Now that we had defined our problem, it was time to again go wide and explore all possible problem solutions. We brainstormed content and design, sketched out concepts and created storyboards, built wireframes, and prototyped potential new pages to replace the current About Us page.

Our idea was to make the About Us page exist as an ecosystem that present paths for users to explore other nature.org pages to learn more about the organization.

With a couple solid ideas fleshed out, it was time to test the ideas with our audience. 

 

Slidedeck
UX Design 101 Slidedeck

We republished the updated About Us page and tested our new designs across our audience. To measure the performance, we conducted usability testing, analytics, heatmaps, and A/B testing to determine if there's been more engagement. 


What we've learned

Approximately two months after its refresh, there had been an increase in traffic to other nature.org landing pages driven from the About Us page. This means a higher rate of engagement and discovery of other content on nature.org. 

View Other GDU Courses

Recordings and slides are posted after each presentation.