User Experience
Foundational Principles
One of my first User Experience classes--the class that changed my career path, actually--was an undergraduate User Interface Design class (simply called User Experience at the time). I was taking the class as a part of my Web Communication minor, but I quickly fell in love with the combination of design and intentionality that went into a user-centered interface. My professor used the first project to teach the difference between Conventional Design and User Interfaces.
I had to design the interface for a HVAC system, a home screen and one subsequent screen. My professor walked me through the process of what to consider when making the shift from conventional to user-focused design. I learned a lot about what to take into consideration: personas, functionality, and color theory.
Clients' Goals
Alongside my school work in web design, I have also learned a lot about creating usable websites from working with clients in my freelance design services. This may not seem like it fits in with User Experience, but it has taught me a lot about deterimining the needs of my clients from a business and "back-end" perspective. My clients have had various levels of technological savviness, so I have had to learn to find softwares and language that they could engage and feel like they were a valued part of the web design process past the initial conversations.
an HVAC system screen with a diagonal sliding scale, the temperature written in large numbers, and a weather-dynamic status display in the bottom right corner
An HVAC screen sketch with a vertical sliding scale to the left, the temperature, and then icons indicating the mode and schedule settings of the system
an HVAC control screen with a "four corners" design showing the preset options in the top left, the settings in the top right, help in the bottom left, and a return button in the bottom right. The center of the screen shows the current temperature
an HVAC system screen with a diagonal sliding scale, the temperature written in large numbers, and a weather-dynamic status display in the bottom right corner
Pathways Speech Therapy Inc. Logo
Von Braun Astronomical Society Logo
LSINC logo
Pathways Speech Therapy Inc. Logo
Learn
PDX Biotech Consulting
After learning about foundational principles and users' goals, there is a lot of work that goes into understanding what user needs align with each goal. There are interface needs, which I have discussed some and will touch on again later, but I also took a Human Factors class that taught me a lot about how to configure physical items and spaces to fit those user needs. In that class, I had the opportunity to incorporate the "learning" step as well as add on the "understanding" step of the UX process.
I was a part of a team of systems engineers and psychologists that worked on a consulting project with a company called PDX Biotech. The CEO of the company was trying to find suggestions for ways to improve a canine dental strip that tests for peridontal gum disease in dogs. My team and I worked together to give him suggestions for improving the product itself as well as strategies for increasing public knowledge about this product.
Understand
Designing Information Architecture
Interfaces aren't just single screens that have to be designed to make sense to a user; if there isn't any structure to the information being presented the interface is useless. My Information Architecture classes taught me a lot about how to organize and plan information in the best way to ensure an unnoticeable user experience.
No matter whether the information is going into a website, app, or poster, knowing the required information and ideal major groupings of the information before ever creating a design is vital to a good structure. That's why we discussed sitemaps in my class (slideshow picture #1). Sitemaps are intended to allow designers to organize the different pages, screens, or sections of a digital interface. For example, my website has a home page with my resume, client information, areas of experience, introduction, and contact form. I also have about 8 other pages, and a sitemap for my site could look as simple as an outline or as complex as detailing every piece of information on each page.
A good way to help determine the appropriate groupings of information when planning a sitemap is to incorporate a user research technique called card sorting. Designers take the necessary pieces of information and ask users to group them, sometimes giving them the headings and sometimes asking users to create them themselves. Card sorts can be done virtually using different websites or by putting the information on paper and asking users to physically place them in groups on a tabletop like you can see in the second slideshow image.
After the information is planned and sorted out, a designer can move onto planning how the information will be visually presented in a wireframe. The wireframes pictured in the third slide are a part of a quick-thinking exercise called Crazy 8's, which is intended to make designers put the focus on creativity instead of detail for a low-fidelity wireframe. Other wireframes can be much closer to "outlined prototypes" with more careful details and consideration of personas and user needs (slideshow picture #4).
Designing Thumbnails
You have already seen some of my thumbnails in the "Learn" section of this page, but thumbnails are vital for Interface Design at this point in the Learn, Understand, Design, Create, Test process. The information architecture of a design is important to the cognitive processing of a user, and well thought out visual designs are just as important to helping users' perception of the information. If the information is organized well but is, for example, yellow text on a white background or white text written over a bright patterned image the information isn't going to be understood, no matter how much thought goes into the organization of it.
My undergraduate User Interface Design class impressed the importance of fully exploring different design ideas, similar to the Crazy 8s exercise I mentioned in the wireframe discussion. This started with the integrity, starting in black and white to create a successful design in any color, and then proceeded to the nuance of aesthetics in the prototyping phase These ideas ranged from multiple thumbnails of e-card designs (slides 1 and 2) and logo redesign ideas (slides 3 and 4). Since this class was an undergraduate Interface Design class, these exercises in thumbnails were not as advanced to be entire information screens, but they were very useful in teaching me to look at multiple design ideas then critically consider what information and message I really want to project for my viewer. The images shown in this slideshow are thumbnails that didn't make the final cut but taught me a lot about complexity, animation, and letting the viewer draw their own conclusions.
Creating Digital Prototypes
When it came to create prototypes for the e-card design, there was a lot of strategy to consider. First, we were supposed to be considering ourselves designers for a card company, and so we wanted to create a design that customers understood and wanted. The Testing section will talk about some more of the process that went into that particular strategy. The next issue was that we needed to design a card that was animated but not too busy to be appealing or understood. The prototype in the first slide shows what ended up being my final product, a "Pixar" style Halloween card where the jack-o-lantern took the place of the lamp that glows. Slide #2 shows my progress from the "Witch" thumbnail into a still prototype that was designed to have the word "relax" in the bottom left corner be flown over by a Witch's broom.
Creating Product Prototypes
User Experience isn't just relevant to websites, logos, and screens. The principles are just as important to work flow of businesses as well as physical products. In my graduate User Centered Design class, I was able to do some user research and iterate revisions to Oreo (slides #1 and 2) and Lay's (slides #3 and 4) packaging. Alongside the principles of user-centered designs that incorporated the cognitive organization of Information Architecture with the visual principles of User Interface Design. My full report discusses Keebler cookies as well as Ruffles chips packaging as well, but these two prototypes underwent the most visible changes.
A chart mapping every page on the Limestone Children's Advocacy Center website and showing how the elements link to each other
an example card sort, where sticky notes have been used for category titles to sort different pieces of information from a website
an example of a high resolution wireframe with clear places for images, headings, and text
A chart mapping every page on the Limestone Children's Advocacy Center website and showing how the elements link to each other
a sketch for a Halloween E-card with a pumpkin waiting to pick up its gourd date. The words "hope you have a happy Halloween, gordulous" are above them
a Halloween e-card sketch showing two witches flying on broomsticks in the night sky with the words "witch back and relax this Halloween!" in the bottom left corner
a logo sketch for the Weather Channel showing its name on the screen of a tablet where the "W" turns into a lightning bolt and the "C" has sun-like rays protruding
a sketch for a Halloween E-card with a pumpkin waiting to pick up its gourd date. The words "hope you have a happy Halloween, gordulous" are above them
a mockup for the "Pixar" e-card with the words "have a... Happy Halloween" diagonally across the screen with some of the letters replaced with different Halloween items, most notably the jack-o-lantern over the "O"
a Halloween e-card mockup showing two witches flying on broomsticks in front of a moon-lit haunted house and sky with the words "kick back and relax this Halloween!" in the bottom left corner
a mockup for the "Pixar" e-card with the words "have a... Happy Halloween" diagonally across the screen with some of the letters replaced with different Halloween items, most notably the jack-o-lantern over the "O"
a prototype of a package redesign for Birthday Cake Oreos
a prototype of a revised package redesign for Birthday Cake Oreos
a prototype of a revised package redesign for Lay's Potato chips
a prototype of a package redesign for Birthday Cake Oreos
Design
Create
Testing with Surveys
After creating the e-card prototypes, my professor introduced us to some basic user testing by having us draft questions and create a survey for the rest of our class to complete. This survey used the prototypes that you saw in the Design section as well as questions focused on the marketability, clarity, and emotional impact of the cards. My goal was to embody the feeling of Halloween and create an enjoyable e-card that users might actually want to send a friend.
I enjoyed coming up with questions that were tailored to each card, but I think that my favorite part was getting my first glimpse of how user data can be different from what the designer expected--the same thing that every UX professor has tried to engrain into my education since then.
Testing with Interviews
Usability Studies was my first formal educational experience with user research. I had compreted the e-card survey a year and a half before, then my User Centered Design and Information Architecture classes discussed specific forms of user research. Usability Studies brought all of the information together and presented it as a toolkit of research options that work best with each individual project's needs. For the semester-long project I worked on a team of three students to plan and execute virtual research with users.
The image to the left is the Purdue Online Writing Lab (OWL) logo. This is a site that contains the style guides and instructions for college students and scholars to keep up to date on how to format papers and citations in their work. The site is renowned throughout universities. My team and I found the information on the site to be extremely useful, but we all agreed that the presentation of the information was hard to navigate and understand. We couldn't just take our own opinions and formulate suggestions, though. Instead, our team of three interviewed seven different users and guided them through a series of seven tasks on the Purdue OWL site to understand what their pain points and struggles are, since seven to eight users can usually uncover over three-fourths of the usability issues with a product or service. We found that the Purdue OWL team needs to consider first their information architecture and then a few minor aesthetic points.
Test
Iterating the Experience
Besides the difference in perspectives of the user and designer, the most important information that I learned about User Experience in my courses is that UX is an iterative process. Learning the foundational principles is constantly happening alongside the individual projects, but user experience designers, writers, and managers are constantly going through the Learn, Understand, Design, Create, Test process. When a product or service gets through with testing it goes right back to Learning adn Understanding if its goals were met and what they have now become so that the Designers can Create new ideas that better achieve these goals for users so that it can be Tested and improved all over again.
