It’s here – the final UX report that I’ve mentioned in several previous blog posts!
For the past few weeks, I’ve been researching different effective UX methods for evaluation of a website in preparation for a redesign. The company’s website that I chose to research is PM&J. They are a vendor for large retailers that provides products like apparel, pet items, and soft home goods.
I conducted several studies including a comparative analysis, personas and scenarios, surveys, interviews, card sorting, usability studies, as-is and to-be analysis, and a concept model. Throughout these methods of study, I was also able to evaluate and come up with recommendations for change.
The main aspects found that require change are content updates, navigation, and information architecture.
Content on the website appears clean and easy to comprehend, but when looking into details, most of the content is outdated, originating from as late as 2016.
The navigation appears straightforward, and it’s easy to get from point A to point B. However, there are some dropdowns that users have expressed that are confusing.
Lastly, there are quite a few areas to improve the information architecture. Most of the information on the site is written in paragraphs with few images, making skimmability flawed. The “Products” pages do not offer visuals of the actual product that PM&J is capable of, and they feel more like an extended “Services” page. Contacting PM&J can appear challenging if the user doesn’t understand what the contact form is asking. And there are some parts of the PM&J process involving their clients that is lacking details.
The above points go into depth within the UX report – how the issues were found, specific reactions from participants in different methods of study, and recommendations for the redesign based off of these.
If you’re interested in reading more into this, check out the UX report attached to this post, below!
This last week, I conducted usability testing for a UX report that I’m creating (coming soon!) for a company’s website, called PM&J. Usability testing is one piece of the big puzzle, but one of the most essential ones. So, I’m writing an entire post dedicated to the process!
Usability testing is a technique to understand how users think when navigating websites and utilize that information to organize the structure of a site for ease of use.
The idea behind it is to assign tasks to participants relating to a site’s navigation, and observe as they complete the tasks. Participants should speak through their task, letting the moderators know what they’re doing, and why.
Simply put, usability testing will typically reveal surprising usability flaws of a website.
Putting together the materials
To begin my process, I put together a script of what I would say to the participants of the study. This allowed me to provide them with all of the necessary information that they would need, including disclaimers about their actions and asking consent that they be recorded. If they agreed, I also created a consent form for them to sign and return back to me.
The tasks are arguably the most important part of a usability test. They need to be clear and provide the participants with a scenario to complete the action.
Tasks were as followed:
You are a sourcing specialist for a company and need to source soft patio furniture for the upcoming year. You heard about PM&J through word of mouth, but you don’t know much about them as a vendor. Find out if PM&J can provide you and your company with soft patio furniture.
You are the same sourcing specialist as before. You have other vendor partners you’ve worked with in the past and are unsure it’s worth exploring a new connection with PM&J. Find out what sets PM&J apart from its competitors.
You bought a pet bed from a store, and the cover ripped. Your pet loves this bed, and you want a replacement cover. The store no longer carries this item, and they have directed you to the vendor, PM&J. Find out how you can reach someone at PM&J about this inquiry.
You’re an existing client of PM&J and want to know more about what the company launches with other clients. Find out if there’s a portfolio of product launches or press release information.
You are a business owner and rely on conventions and events to build relationships. Find out where you can learn more about PM&J through events.
Conducting the sessions
I guided the usability study sessions three separate times with three participants.
These tests are typically done within a controlled lab, but due to the pandemic, the sessions were done via a recorded zoom meeting.
Each participant was asked the same five tasks, and I was able to use their recorded responses to analyze the results.
Results
Task 1:
2/3 participants took the same route by hovering over “Products” and then selecting “Home.”
The other participant took a different path by first selecting “Our Story,” then “Private Label Expertise,” to then the correct path, “Products” to “Home.”
2/3 participants mentioned that “Home” as a category under “Products” was confusing, as they thought that would normally direct them back to the home page of the website.
Task 2:
All participants found “Competitive Advantage” very quickly and easily, which is the correct path.
2/3 participants mentioned that they found the “Competitive Advantage” link in multiple locations on the site and that all were clickable and easy to access.
Task 3:
2/3 participants went straight to “Contact”
The other user expressed that they would want to find the solution under “Products” then “Pet.” But then directed to “Contact” like the other two.
All three participants were confused about the contact form on the page. The form indicates that the user requires a retailer name, which didn’t align with any of the participants thoughts on the action they needed to perform.
2/3 participants ended up eventually finding a contact email and phone number in a small font in a different location on the page.
Task 4:
Each participant first navigated to the “News” section on the website and found blog posts specific to PM&J’s partnerships.
They all found additional categories on the side of the posts to narrow down their search, which they expressed seemed helpful.
After staying on the page and exploring for an average of one minute, the participants then realized that the content of the posts was very outdated, with the most recent post being from 2016. Each user expressed concerns with this, as they weren’t sure they’d find this a trustworthy page for resources.
Task 5:
Task five resulted in the longest average time to complete.
None of the participants could find event information under the navigation dropdowns and were left unconfident if they’d be able to complete this task.
Eventually, each participant found that there is an animated newsletter at the top of the homepage that expresses a Global Pet convention. However, it’s located on the third page of the animation, so easily missed, and it doesn’t provide any actions.
Additionally, only one of the three participants noticed that the event was advertised for 2020, which made them feel as if the site is less reliable.
Screenshot from PM&J site – event newsletter
Overall, I found that after conducting the test with the three participants, there were some things that I expected would be issues, but also a few surprises. For example, I didn’t expect task 2 to be as quick and easy as it was for the users – “competitive advantage” didn’t sound like a straightforward option to me, but all participants were confident in this selection. But that’s why usability testing is such an important part of UX!
From these results, I’ve illustrated some recommendations for the site, which you can see in my final UX report – next week!
Pannafino, J., & Mcneil, P. (2017). UX Methods: a quick guide to user experience research methods. Cduxp.
In my last two blog posts, I explained UX methods that I’m planning to conduct for a UX report. This week, I’ve gathered details about another method that’s ideal for visual design and aesthetic appeal. This method is called desirability studies.
Desirability studies are informative for designers to launch an engaging look for a new or existing website, making sure it responds well to the audience. They’re also helpful to know why different designs evoke specific responses from the users.
How to do it
To begin a desirability study, you first need at least two different visual layouts of an application. The versions of the applications may be your own to test before launching or existing sites that are comparable, in preparation for a redesign.
Next, form a list of adjectives, both positive and negative. Make sure the list is randomly assorted, so the good and bad adjectives are intertwined; however, the list may still have some structure, such as being alphabetical, if that’s what you want. The list should range from about 30-50 words. This is the main tool that participants will use when performing the study.
Performing the desirability study is quite simple from there. Gather your participants – they may be predetermined by you, or unaimed volunteers participating in this study as a survey. Whatever works best for you as the organizer.
The participants will then see the different visual versions of the application, and select 3-5 words that best represent each version.
Results will help you to understand what the users thoughts are towards each design. Ultimately, knowing what the users are thinking about the design will assist the selection of which visual application to use that will respond best to the audience.
Effective examples
Mad*Pow Media Solutions is a strategic design consulting company, which performed a desirability study in 2010 for their site. Before they conducted the study, they set up some goals of what they wanted their audience to experience when using the site.
The site should feel professional and trustworthy for the users.
The site should not appear too promotional which could discourage customers.
The site should feel friendly and genuinely approachable.
Users should feel comfortable with a sense of empathy through the design.
The goals listed above helped the design team to develop two different visual layouts for their application.
The team conducted the study through a survey and separated participants into three different groups. Group one was shown only the first design option and selected five adjectives of the premade list that they thought best described the design. Group two was shown only the second design option, with the same objectives. Group three were shown both designs and asked which one they preferred. In total, the number of participants was about 150.
Their results indicated that group three was inconclusive. However, having measurability from group one and two were incredibly helpful, and resulted in design two as the winner. It ultimately portrayed more adjectives that aligned with their goals.
From this study, the team was able to start from design two and make modifications as they saw fit, resulting in a final design.
Another desirability study was conducted for Yahoo! Personals, which used cards that represented brand values, but also used paired opposites.
Examples of the paired opposites include the following:
Uninteresting – interesting
Forgettable – captivating
Each participant that partook in the survey was given cards with predetermined adjectives and asked to select five that best matched their response to the design. After the survey, the participants were then interviewed to understand their responses and why they chose those cards.
The team was then able to assess and deliver their best possible application for the users.
Overall, desirability studies are often overlooked as a UX method. However, they’ve proven to be very useful to launch products that the audience identifies with and align with the company’s purpose.
I will not be conducting a desirability study for the UX report I’m creating, but that’s simply because there are other methods (like the ones I wrote about in my previous blog posts) that will be more useful at this time for the site I’m proposing a redesign for.
Do not overlook this UX method! Implement it into your own research, and find just how helpful it can be for the design of your product.
Concept modeling is a visualization that shows the relationships between all elements within a subject region, in an abstract way. The idea is to find connections – both apparent and less apparent – between each relationship of the users in the region. Then, in this case, apply those connections to a user interface.
Once these relationships are found, they can help designers to identify functional requirements that make the UI cleaner, simpler, and easier to understand. The overall goal is to have a view of what it is, what it does, and who it helps (the users). This process should be used before launch or as a redesign tool to grasp the full picture of a project.
How it’s done
First, find all of the nouns that associate with the problem, and write them down. Aside from the fact that the concept model process is used for UI, developing the model should not include UI terms or broad concepts. Instead, the purpose is to list all factors that relate back to the users’ problems, and what they wish to achieve. For example, rather than saying “controls,” use specific elements of a UI that the user will go to when interacting with the site, like “products” if it’s offered. So, at this point, re-write or reorganize the words as needed.
Starting the chart
Once you have all nouns, place them inside boxes, ovals, or whatever fits your needs to begin developing a visual chart.
The next step in the process is to use arrows to relate the nouns with actions. By doing this, the main elements connect to one another. This part of the process requires some deep thinking, as some connections are not going to be obvious, and may help you find more elements or actions than originally anticipated.
Finding as many connections as possible is a good thing – it will help to have a deep understanding of the relationships that aids in the design for UI.
Audree Lapierre wrote an article about her own experience creating concept models for a website project that she developed, called Min. She began her process by utilizing the use cases that she’d previously worked on, which made way for prioritized subjects, like “tasks,” and “people.”
After developing a few drafts of the concept model, this is the final version. Lapierre then planned to use this model for the site developers for their data model.
Another instance of real-world examples is listed within an article written by Shamal Jayawardhana. Jayawardhana created five different examples of conceptual models in order to explain in detail to the readers about how they’re used and how they’re helpful with UI design.
He began the process by explaining how to create a concept model with Vertabelo, then detailed the five examples with different scenarios:
Simple Employee Management System
Simple Order Management System
Online Shopping App
Simple Library System
Hotel Reservation System
Source – Jayawardhana’s template for the simple order management system
However, instead of filling the concept models out in detail, these five examples are templates that can be used as reference points for his readers. It’s a helpful approach to giving the audience members a better understanding of concept models for different systems, and the possibility of starting from the ones he created.
Overall, concept modeling is a fun visual process that requires some initial understanding, which evolves into a deep understanding of the relationships between the essential elements in the UI system. I chose to discuss this UX method because of these reasons – and I’ll be implementing this process into my own research for a UX report that I’m currently developing. It’ll be helpful for me to have a better knowledge of who the users are, what their problems are, and how the problems can be resolved through an easy-to-use website.
I’ve always been a visual learner. Explanations or exercises with words alone has its place and need, but depending on the situation, visuals may be so much more effective.
An as-is and to-be analysis is an excellent example of this.
What is this analysis and when is it useful?
As-is and to-be is a comparison between a present circumstance and a future one. The tool is best used when there’s a current process or system that needs revising for ease-of-use or to eliminate issues.
There are many instances where the analysis is helpful. It can be used for yourself – say you need to change the order of operations when doing laundry – your current process may be to add detergent before the laundry load, but this creates issues that there’s either too much or not enough detergent, creating missteps. So instead, you change the process for the future to add the detergent after the laundry load. This is more of a casual example of when the process is useful, but it is feasible. Otherwise, as-is and to-be can effectively help teams and work processes.
In the world of user interface and experience, this method is extremely useful when comparing systems and upgrading them for improvement for the users.
How to create an as-is and to-be method
First, you’ll want to begin the comparison by visually mapping out the “as-is” portion of the interface. Whatever visual routine works best for you is great as long as it directly compares two situations, i.e. flowchart, fishbone diagram, mind map, etc. This is all about how the interface currently works, and should be as detailed as possible – make sure you’re not leaving anything out! Map it out in ordered steps – how would the user manuever inside the system?
Once you have the “as-is,” use the same layout to map out the “to-be” by altering the ordered steps in a new way. This may require some critical thinking, brainstorming with teams, research, and testing before and after this point, all while keeping the end user in mind. Draft up a few options in order to find the best solution.
After finishing the analysis, the process still isn’t quite done yet. Discuss with team members, test it within groups or individually, and make changes as you find necessary. Overall, the analysis will benefit the system by pointing out the best experience for the user, possible risks, and different end results.
Effective examples
One example of the as-is and to-be analysis is shown from the CUNY School of Law. Students used a paper-based system that required a lot of time tracking down signatures, exchanging physical documents, and filing. On average, they spent about 9.3 hours per week doing this. After realizing the unnecessary amounts of time, the students wrote the process out, and made changes to the system for a digital application. After implementing the digital system, the time to do the documentation went down significantly, and the application prompted students automatically if actions were needed.
Another example involves StoneGate Senior Living. Medicaid funding required a bundle of paperwork to the state for each live-in resident with a short 30 day turnaround time. The process was not automated so the possibility of forms falling through the cracks were higher, requiring that the process start all over again. They took a look at the as-is structure, and developed a to-be structure by making the process automated. The team identified all necessary check points, and had them automatically transition to the correct staff members for each step. If any information was missing, a flag would appear to inform the team members. By transitioning the as-is system to a to-be system, they reduced billing issues by 25%.
The as-is and to-be method has shown itself as an effective tool for improving systems. If you’re at a point where you want (or need) to update a process for ease of use, consider this analysis. In a few weeks time, I will use this method myself for a UX research project. Like I said, I’m a visual learner, so it seems that this comparison will definitely be worth doing! Stay tuned!
Product design is a broad term for designing items for an end-user. In my own experience, there are different types: the type that I know and love so well – non-digital physical items, and then there are digital spaces like software or the product that holds digital space itself, like smartphones.
Technology is ever-changing – and realistically, the everyday products we use are digital ones – smartphones, laptops, tablets, etc. This is why I’ve come to understand that “product design” is increasingly referring to the digital realm. But should the term mostly refer to digitally applied design? Absolutely not – while the most common focus of UX is for digital, design is design is design. These thoughts aside, the focus here is designing for digital spaces.
Mental models are the users’ assumptions on how something should work. Behind a screen, audience members use their mental models with how they think an interface should look and function based on past experiences with similar products. However, they’re also subject to change if the feature at hand is not an unwritten necessity, like using a light interface versus a dark one. There are some features, though, that may confuse users – like if a store’s website navigation menu were not towards the top of the page. If a user can’t easily find how to get where they want to go, they’ll likely not waste much time trying to find out – which may affect the store’s sales.
This is why mental models are an important concept when designing for interaction. Deeply thinking about mental models should happen at the beginning of the process, as it will be like a backbone for usability.
In contrast, iterative design can be used during any stage of product development. Iterative design is essentially prototyping, testing, analyzing, and refining. The idea for the best turn-out is to fail early – so ideally, this part happens before launch, but it can also help refine a product afterward. The sooner you design something that doesn’t work how you’d thought, the better – because then it can be improved for potentially the best outcome.
Personally, I couldn’t help but compare the principles behind designing for digital to designing for analog physical items. When thinking about mental models, I began realizing how anyone could use a dish towel – where it sits in the kitchen, how often it gets used, etc. – and how the design of a simple dish towel could change (or not) based on these models.
Then, iterative design is essential, but I think it often gets forgotten more with physical items (more so the ones that have already been designed, like dish towels) rather than digital spaces. Here’s why: results aren’t as easily measurable as this doesn’t involve click rates or time spent on a page. Also, long testing processes with focus groups and interviews may not be as feasible without measurable actions, and while most launch timelines are quick. This is why these designers focus on the market research, trends, and personas to back up their product – but I think they can often forget that collaboration and feedback in many ways can substitute measurable actions.
Alternatively, iterative design for physical items that are new and innovative isn’t frequently forgotten. This is because there are fewer – if any – market research products that help sustain design feasibility for the user without testing.
Ultimately, mental models and iterative design go hand-in-hand and are equally important for the design of a product. Maybe the first prototype failed because the designers’ perceived mental model of the user was incorrect, and that’s when analyzing and refining comes in for a repeated process. Both at that time would be modified with the ultimate purpose of launching a great product for the end-user.
Baxter, K., & Courage, C. (2005). Understanding Your Users A Practical Guide to User Research Methods, Tools, and Techniques. San Francisco, CA: Elsevier Science & Technology.
Julie Anderson 