Usability Testing
Usability Testing is one of the most important steps in the design phase. This assignment was focused specifically on the usability testing of a website and the steps needed to successfully conduct a user test. I was able to narrow down similar websites and practice testing on various participants. The overall website had many areas in need for improvement.
Goals
Test users ability to find the latest trends
Identify if users can create an account before checking out
Evaluate if users can locate specific items on the website
Participant Profiles
Name
Year in school or age
Major/minor Or job title
Ranking 1-10 on how familiar you are with the web
Prior experience with selected website
Time it took to be evaluated
Drew Howard
Junior
Public Financial Management/Financial Literacy
Visits websites everyday Ranking: 7
No prior experience with the website, had heard of it
15 minutes
Linda Chastain
Adult
Stay at home mom
Visits websites everyday Ranking: 7
No prior experience with the website, had not heard of it
15 minutes
Lindsey Chastain
Young Adult
Technology Consultant at EY
Visits websites everyday Ranking: 9
No prior experience with the website, has heard of it
15 minutes
Introduction
I began this process by researching Bloomington local fashion boutiques. I decided on this category because I love fashion and am always looking for new stores to shop at. Along with that, I am creating an informative website that introduces users to fashion boutiques, and I hope to include some of my findings in it. My goal for this report is to figure out where the problem areas are on the website and what the fashion boutiques main goals are. I plan to compare each of the local boutiques I researched and pick out which one I think needs evaluated the most. I then am going to do some individual testing so I can gather questions to ask my users. Finally, I will complete usability testing to figure out where the problem areas are in the selected website.
Introductory Questions
What do you think the main purpose of this site is?
Who do you think the intended audience is?
What strikes you the most about this website?
Tasks
1. You are looking to buy a new top to wear on vacation but want something that is new and trendy. How would you go about finding this?
2. Now that you have found the top you want to wear. Is there a way to find the price and size of the top? What about washing instructions?
3. You now decide that you want to move forward with purchasing your selected item. How would you go about doing this?
4. After getting to the check-out section, you remember that you need to buy a pair of pants to go with your top. How do you navigate back to the home page?
5. You know that you are in a crunch for time before your vacation and need to see what the return policy is. How do you find that information?
6. You now want to see what other people look like in Pitayas clothes to see how the items fit. Can you find where the social media is located? If so, click on it and explore the posts.
7. You decide after looking at the social media that you want to purchase one of the clothing items you saw on the model. How do you find the specific clothing item on the website?
8. You decide to add another item to your cart, but want to see how much money you already owe first. How do you go about finding this information?
9. You are nervous that the second item is not going to look the same as it did online. Can you find out what time the store opens and closes, and on what days?
10. You finally decide that you are just going to purchase your first item and buy the second one in-store. You want to be able to track your purchase and know what you bought for the future. How do you go about creating an account?
11. Now that your account is created can you navigate to where you need to login? What about signing out?
12. What are important facts that you remember about the content?
13. What are three things you noticed on the home page?
Post Questions
1. Can you return to the home page from here?
2. Do you recognize any other functions on this page that might have helped you do this?
3. Was there something missing that you were expecting to see?
4. Is something about this site too obtrusive?
5. Is something about this site too well hidden?
6. If you could change one thing about this site, what would it be?
7. Would you return to this site in the future?
Results
Users Ability to Find the Latest Trends and to be Able to Search for Specific Items
The users were able to easily locate new arrivals and trending items as well as view their selected items and find information about them. I thought that the participants were going to struggle with viewing the clothing items they selected because there was no hover effect and no indication that the items were links. The participants did not struggle with this however and completed these tasks in a fast manner. The only thing the participants struggled with in this category was searching for specific items. The participants were asked to navigate to the websites social media and to pick out an outfit they liked. After they found their desired outfit, they were given the task to find the exact or similar piece on their website. None of the participants were able to find the items they saw on the social media also on the website and they struggled to use the sort function as it did not have appropriate categories to search. The final thing they did not see was the search bar at the top of the home screen causing them frustration.
Positives
Negatives
1. Was able to find the most trending/ new arrivals in a fast manner
2. Found the selected item and could view it
3. Saw the washing and price information
1. Could not locate specific items advertised on their social media
2. Did not use the search bar as they couldn’t see it
3. The filters were too broad and did not allow them to search for specific items
Identify if users can create an account before checking out
The participants struggled to figure out how to create an account and then how to sign-out. All of the participants went to multiple tabs before finding the account button at the top. The majority of them tried the SignUp tab in the navigation as they thought that meant create an account. Once on this tab they realized it was for receiving emails only. They then tried going to the apply tab in the navigation and then struggled to get back to the homepage as this tab was also wrong. Finally, after becoming frustrated and almost giving up they located the account button at the top of the screen. The participants did not struggle to login to the account, but could not locate the sign-out section. Overall, the participants failed at this task and became very frustrated when they could not located the account button.
Positives
Negatives
1. Located the login button
1. Struggled to find the account button
2. Could not locate the sign-out button
3. Became very frustrated and searched through the navigation to find the account button
Evaluate if users can locate specific items on the website
The users overall were able to find specific items on the website but struggled with the navigation. The main task that the users struggled with was figuring out how to get back to the home page. Some users mentioned that websites typically have a back to home button, but this one did not. I noticed some frustration with this task. The users also took extravagant paths to find some of the tasks I asked. For example, I asked the participants to locate the return policy. Instead of clicking the policies tab the participants went back to the cart and then scrolled down to find it. The participants were able to locate the social media icons and the total price for their items in a fast and easy manner. The final thing I noticed the participants struggle with was locating the days and times the store is open. They would search through other tabs first before realizing it was in the navigation under locations. Overall, the main struggle was getting back to the home page, and not having a continue shopping button.
Positives
Negatives
1. Able to find social media icon
2. Found the total price of purchase
3. Could locate all tasks regarding the navigation bar
1. Struggled to get back to the home page
2. Took longer paths than intended to find items
3. Struggled to navigate the website
4. No continue shopping or back to home buttons
Recommendations for Findings
Overall, I think that there is a lot of modifications that need to be made to this website in order to better engage its users. Some participants mentioned that they think adding a back to home page button, a continue shopping button, and moving the icons to a better location would help. I agree with their suggestions and I think these are easy fixes. The best thing I could suggest would be making sure there is a clear home page button. They could add this to the navigation or add a hover effect to the logo. I also think that they need to redesign the layout of their website and rearrange the navigation to be placed at the top and move the account, search, and cart icons either right above it or right below it with a clear indication that it is a sub menu. The sub menu currently blends into the website with no dimensions. Another thing I can recommend would be adding typography and headings to the website. Right now, they are using the same font and headings throughout the website which causes it to be confusing and not flow easily. The final suggestion I have is to make the navigation easier to understand. They could create a bottom navigation and include the apply and sign-up button there, or move the contact and location there instead. I found the titles they went with to be confusing to the users. They also need to add a continue shopping button, and a sign-out button. One user suggested having it in the top left corner where they have seen it on other websites. I completely agree with this statement. Overall, the fixes I mentioned are not super time consuming and the little adjustments would help users to better engage with the site.
User Research
Pitaya
Ranking 1: https://pitaya.com
I ranked this website as number one to evaluate as it isn’t the worst website but has some questionable features I would like to test out. When first looking at the website I noticed how the sizing and typography is all the same with no variation. They also did not include emphasis or headers for the majority of the site. Another thing I noticed right off the bat is the layout of the website and the hierarchy being off. Instead of displaying the sub menu and the nav bar at the top of the page, they decided to place the logo and social media icons in the middle. I think that this selection can be uneasy to look at as well as confusing to its users. The main thing these websites want you to do is sign up and start shopping. This website does not have a call-to-action button and is hard to understand exactly what it is trying to convey. The website includes photos to look at under the navigation which is nice and eye catching. The mobile view for this site works but can be kind of tricky if you don’t understand what certain icons mean. Overall, the basic layout of this call-to-action needs to be emphasized.
Ranking 2: https://wearalibi.com/
Alibi
I gave this website a ranking of 2 because I thought it had a good layout, but some modifications that needed to be fixed. When first looking at this site it can be a little confusing to tell what the main call-to-action is. They have a rewards button at the bottom, but that could mean any category, not just clothes. Another thing I noticed is the icons to the left in this photo are hard to understand. I think this is an easy website to follow along with and has the main items you want to shop displayed. The mobile app for this website is also strong and easy to follow along with. Overall, the website is clean and easy to use.
Mirth
Ranking 3: https://mirthmarket.com/
I ranked this website a 3 because I thought it had some modification that needed to be made, but not as many as the other websites. This website has a more sophisticated feel to it due to the color and photo choices. One thing I noticed is that the navigation is placed at the bottom of the screen and doesn’t move to the top until you scroll. I thought this was an interesting choice and would be interesting to see how users interact with this feature. Just looking at the website you can’t tell exactly what the call-to-action button is supposed to be as they do not have a section for you to sign up. My best guess is that they want the users to focus on shopping and looking at the different brands. Another feature I noticed that was different from the other websites is that it has a small section explaining the purpose of the website. The mobile side of this website has not been fixed, and you cannot see all the navigation. Overall, the website looks professional due to the color choices, but needs some modifications.
BlackSheep Boutique
Ranking 4: https://shopblacksheepboutique.com/
I ranked this website a 4 because I thought it did a good job conveying its message and setting up the layout compared to other websites. I did not want to review this one as I did not notice many red flags. When first looking at this website it is easy to understand what they are selling and how to find it. The one complaint I do have about the navigation is that it is a little hard to see, and if you were color blind I am not sure that you could see the contrasts. One thing that is nice about this website compared to others is that you can either look for specific things in the navigation or start shopping the three categories on the home page. I think this was a good choice as you can tell their main call-to-action is to shop either the new arrivals, shoes, or favorites. They have a decent mobile app as well that it's easy to navigate. Overall, I think this website has a nice clean look to it and is easy to navigate.
Rose & Remington
Ranking 5: https://www.roseandremington.com/
I ranked this website a 5 because I felt like it was more developed than the others. I think this is a more popular brand as it is located inside of malls as a boutique. As far as usability testing for this website I did not see any major testing questions right off the bat. I found this website to be more professional looking than the others. It did a good job of displaying its navigation and sub menus compared to the other websites. You can see that the main call-to-action is to get you to buy whatever is on sale. The overall flow is decent for this website and the navigation is easy to understand. The mobile view for this website is decent if you understand what the hamburger icon is, and how to use it. Overall, this has a good hierarchy and is easy to use.
Posh Boutique
Ranking 6: https://poshbloomington.com/
I gave this a ranking of 6 as it was the least developed website and the hardest to look at. When first looking at this website you can see that the heading photo is getting cut off and that the main call-to-action button is not emphasized. This also has some photos that are not showing up all the way. The mobile version is not good and it is hard to see as the same photo is having some issues. Overall, this is the worst website I looked at and needs the most help.
Overall Conclusion
I decided to compare local Bloomington fashion boutiques. Each of the stores I selected sold clothing items for adults that had a similar popularity stance. These websites also had the same goal, which is to promote sales on their clothing. The websites could use a lot of the same work to better improve their user experience. I went in and ranked each of the websites with 6 being the worst and 1 being the best website to evaluate. The first thing I wanted to compare on each site was the shop button and where it was located. From what I gathered, the majority of these websites had it displayed in a location the user would see, but for some of them you had to scroll down to find it. The next thing I compared was the layout of each site. From what I gathered all the websites had a similar layout, but, struggled to convey the purpose of the site. I then compared where the store location and operating hours were at. With COVID happening it can be hard to determine when stores close, so having that in a good location is important. I found this to be rather challenging to find on each of these websites which could be a problem area. The final thing I found was that they all had similar issues with not emphasizing the call-to-action and not conveying the websites main purpose. Overall, these websites each have the goal of getting users to shop their clothing, but struggle to display the information needed for each item.
Chosen Website
I decided to go with Pitaya’s website because I found some of the navigation and layout to be confusing and I wanted to see how other users interacted with these problems. I also wanted to evaluate this website because I haven’t used it before and have only been inside Pitaya. Choosing a website that I haven’t been on before allows me to have a fresh set of eyes and will be beneficial for my testing. I also wanted to explore deeper into this website and see where more problem areas could be. Pitaya is one of my favorite local Bloomington stores, so evaluating their website could be fun and potentially lead me to helping them out .
Analysis and Evaluation
Layout
After evaluating the site, I found many different areas that needed to be modified. If I had to grade this website on the overall layout, I would give it a 7/10. I said this because the call-to-action button was hidden in the navigation, there was no clear emphasis and hierarchy, and certain tasks were prioritized, but not all of them. The first thing that really stood out to me in the layout was how they chose to put a signup tab in the navigation. I think that the main call-to-action for this website is to get more people to create an account so that they can start sending you deals to entice you to buy more items. The position of this action is at the top of the website and is hard to see. They also had no clear emphasis and hierarchy. The sub navigation is at the top but blends in with the background giving it no dimension and making it look out of place. The social media icons also look like they are in their own category that is not matching up to anything else. Finally, the logo and the nav bar are not next to each other and it causes the whole header to look clustered and confusing. Overall, the websites main goal is for users to shop their brand, but there is no emphasis or clear tasks that this should be done.
Navigation
The next category that I evaluated was the navigation and page links. I gave this also an overall grade of 7/10. I think that there is a lot that could be changed or modified. The main problem areas in this section were that the navigation was not available from every page and the labels did not make sense or represent the content. The positives that could still use some modifications were that the navigation had a consistent design of pink and white, the navigation worked on the mobile and was laid out nicer than the desktop version, the links were active and had a pink hover effect, and finally, the links were descriptive and easy to understand. I think the main focus on this section would be making sure the user understood how to get back to the home page after clicking on the apply tab. The other main focus would be to see if the user understands what each tab means and how to find certain things. I think they should have created a bottom navigation and included the company’s information and how to apply in the footer.
Design
The next section I evaluated was the overall design of the website. I gave this a grade of 8/10. This means that it has better usability but with minor adjustments. The issues with the design were that the color palette did not have an adequate range of contrast and mainly was just black and white with a little pop of color. The other issue was that there was no emphasis in color or design for the call-to-action button which was the account button. I noticed that the website did not use more than 3 typefaces, had a clear typographical hierarchy, the design elements were lined up where they should be, they made sure to include repeated design patterns, the related content was next to each other, the use of principle design was evident, and the overall design was appropriate and consistent. I think the main areas that users would struggle in this section would be understanding that they want you to create an account and shop and that the typography and headers would be hard to follow.
Content
The final category that I evaluated was the content of the website. I gave this an overall grade of 8/10 as well. I said this because it only needed things to be modified. The one problem area I found was that the tone and language used was not appropriate for the expected users. Besides that, I saw that the content was relevant to the site and topic audience, the content was easy to scan and ranked by importance, the language was you centric, social media was easy to find, the content had no grammatical spelling errors, it was easy to scale with no unnecessary words, and no error messages. Overall, the main concern to look at in this section when conducting usability testing is how the tone of this website makes the user feel as well as modifying the promotions to be a link.
Conclusion
The purpose of this study was to identify possible issues within the selected website and evaluate how to solve them. The website has some modifications that need to be made to help better engage their users and cause less frustrations. The next steps for this process would be to test new participants with the updated website and see where there is still confusion happening.