Usability Interviews (Final Prototype)

1st Interview:
In this interview, the user really enjoyed the concept and the visual design.
If she went to the new user page, she was able to log in without any problems.
If she wanted to edit her profile, she was able to locate the edit button and make any necessary changes.
However, when she wanted to see the "newsfeed"/ home page, she had problems locating it and had to be led.
The user enjoyed the filter options and noted that they were adequate for her searching needs.
If the user wanted to match with another user, she was able to click on the other users' profile, read it, and then message her if she was interested. The user also noted that the starred option would be a good feature for her. However, she thought that our current implementation of messaging looked like an error and though that there was something wrong with the site.
After messaging the other person, the user was automatically directed to the messages portion of the site. In the messages, the user was able to navigate through the different options and noted that it was very clear and was similar to all the other messaging systems she had used.
Overall, the user wanted the newsfeed portion of the site to be easier to navigate and wanted a better messaging system, but had no other qualms with it. She enjoyed the idea and would use the product if it was ever implemented.

2nd Interview:
In this interview, the user also really enjoyed the concept and the visual design.
If she went to the new user page, she was able to log in without any problems.
If she wanted to edit her profile, she was able to locate the edit button and make any necessary changes.
If she wanted to see the "newsfeed"/ home page, she had no problem locating it by clicking the logo.
This user also enjoyed the filter options but expressed a desire for an additional tag search bar.
If the user wanted to match with another user, she was able to click on the other users' profile, read it, and then message her if she was interested. The user also noted that the starred option would be a good feature for her. However, she did not enjoy the current messaging interface.

After messaging the other person, the user was automatically directed to the messages portion of the site. In the messages, the user was able to navigate through the different options and noted that it was very clear and was similar to all the other messaging systems she had used.
Overall, the user wanted more filters and major specification options, but otherwise had no problems. She enjoyed the idea and would use the product if it was ever implemented.



3rd Interview:
The icons on the header do not display any information when I put the mouse on it. So it is not clear what the icon represent only by guessing from the image.
The load more button will let us know more recent post message, but when we check messages, there is not a short cut button like “go top” to quick get back to the posting blank.
It is not clear how to delete a wrong posted message or suspend an expired message. So we might need to add an edit section to the recent post.

Usability Summary - Freshman

 Kendall Fugate-Laus, 18 Freshman at OSU

She found the concept interesting, but was hesitant to join. She would want to know that many other people on campus were also participating to know that her joining would be worthwhile. She found the profile page to be very general but asking the right sorts of information. She was a little confused between the posts and personal messaging and their differences. but said she would be able to figure it out through a couple uses. She said it is a very straightforward idea; a news feed and an email, she summarized. She wanted to be able to make her own tags, but thought if there were at least a filter or search within the tags to make finding the relevant ones easier, she would be okay with that. She didnt have navigation problems as she said the two formats were something she and all of her peers would be very familiar with.

Wireframe Interviews and Analysis

Interview 1:

U: I’m a new user I just want to learn

P: What do you think this is about?
U: I think that this is about using meal plans as currency, meeting other people, and exchanging information. I am an upperclassman so I think this could get me food so I am interested.

P: proceed to the sign in.

U: I am a new user so I’m going to make a new username.

Then I’ll continue.

It looks like I am in a profile. I’ll fill everything out. College is spelled wrong. So I filled out all my information so I’ll submit it. I’ll put a profile picture in there’re.

P: what else do you see on the page?

It looks like I can edit it if I missed something or if I changed my major or something. I see recent posts I’m not really sure if they are recent posts of mine or recent posts of other people. It’d probably be clear if it were other people’s if there was context and there were other people’s words, I’d know that they weren’t mine.

P: So let’s go to the homepage, what would you do here?

U: We have filters and tags. I see that someone else has posted something, and they have their swipes and their tags. And lets say they have tags that I’m interested in so I’d reply to them. If I’m timid and thinking about it, maybe I’d just star him.

P: What do you think the tags would do

U: Since each post has a tag under it, I would think that the filter would filter the responses based on the tags. If there’s someone who has tags that I don’t care about it I don’t want to see it.

P: Try to compose a post

U: I don’t know I would assume that there’d be something on top of the newsfeed. I think the messages section would be something more along the lines of personal messages, but I guess I’ll check it out and see if there’s an option to compose a public message.

Oh I guess I clicked on messages and found something that was compose to public, but I’d rather see something on the newsfeed/home page that would let me do that. If I go into messages, I would assume I’d be personal messaging someone. .. I’m not popular so no one sent me anything yet.

I would use delete if I really didn’t like someone I met. I would use starred if there were a couple people I was thinking about meeting.  Or if I wanted to use this site but didn’t want to use it today, so I’d star a post and maybe come back to it later.

P: What about if you wanted to look at someone’s profile

U: I’d go to the homepage and probably click on their name / picture and go to their profile.

P: Would you like to see a search bar?
U: If I already knew who I was looking for then why would I be on their site? Like on OKcupid, if you knew someone and wanted to go on a date with them, you’d already have asked them.

P: How do you feel about the website in general?

U: I like it. It’s serene right now. I like that the top navigation bar is always on the screen because I like to have access to whatever links that I need. I also like the filtering option. The profile looks good and its condensed so I don’t have to fill out paragraphs which would seem unnecessary and the message page is laid out well too.

So I guess I’d log out using the top icon and log out. … Neat

Summarization if/thens:

The main problems that the user experienced were making a public post on the newsfeed, figuring out what the posts section was on their own profile, and differentiating between public and private messages.

If the user had these problems listed above, they could be solved by adding a box at the top of the newsfeed that would allow the user to post there instead of having to navigate to the messages portion of the site. To clarify on the applicable post section on their profile, content would have to be added. If it was other user’s information, it would be clear that it was not their own posts or vice versa. Implementing a post feature on the main newsfeed page would eliminate the need for a compose to public feature in the messaging area. Then, you could just respond and use the inbox, sent, starred and deleted features in the messaging area.

Interview 2:

P: So what are your initial impressions?

U: There’s a logo. And the description. It looks like some sort of trading thing happens where you trade swipes which is the currency for university insights. … somehow trading swipes for students meeting other students.

I’m going to fill out this profile and hit continue.

After I would hit submit.

So now I’m looking at what I believe is my profile page or what would be my profile page.

I see this top navigation. The link to the home page, my profile, messages, log out.

All my information and recent posts. I’m not really sure what that would look like yet.

P: What would you like to see there?

U: Either things that I have posted or other people’s stuff that applies to me and my preset demographics.

P: Which would you prefer to see?

U: I would prefer to see what other people posted that applies to me. I’ve written my own posts so it wouldn’t be as helpful to see that. If I was looking at someone else’s profile, it would be more useful to see what they had posted.

Is the same as a homepage newsfeed or is it a public profile?

P: Are you done exploring the profile page?

U: Yes

P: what would you like to do now?

U: I would look for other people who match my desires.

P: why don’t you try navigating to the home page

U: It looks like a thread of posts by people. Their name, content, tags. That seems like what I was looking for. So this box on the left side has filters. Without any content, I’m unsure what it would do.

P: What would you want it to do?

U: Something on the left side that says I’m looking for blocks from freshman in whatever major I’m in, on these days. Almost like a search box similar to the flight booker.

P: So if you wanted to post something to that wall, how would you go about doing that?

U: On the homepage? I would respond to each individual post. Otherwise, I would go to…. I’m not sure.

I don’t see a page. Maybe messages, I’m not sure if that’s private messages or messages to the website in general.

P: Let’s explore the messages area

U: I see the folders on the left side. It looks like standard email options. So they look like individual messages to the broad general public.

P: Why would you ever want to message someone personally.

U: If I saw a post that had the same interests and hobbies that fit what I was looking for.  If they were really legit to meet up but they weren’t available on the date I was available, I’d message them to see if there was another day to meet up. Or after you met up with someone, maybe if you wanted to arrange another hangout and continue that friendship.

So I’m on the compose page now. This looks like where I would make the broad post as opposed to a private message.

P: Any suggestions to make things clearer?

U: Maybe having a link to the compose a post, maybe in the top or something so that it’s easier to find out how to make a post. The messages you starred … is that how you save messages to look at them later? Maybe after it’s developed it’ll make more sense.

P: How do you feel about the concept?

U: I like the idea. I like the idea of getting food for the knowledge I have. It’s really appealing.

Summarization/ if/thens.

In general, the user navigated through our website and was able to gather what he needed to know in able to perform the basic user tasks. However, there were issues with being able to publically post on the news feed, how filters would work, and what functionality the starred messages feature would have for a user.  (If they wanted to post on the newsfeed, if they wanted to filter, if they wanted to use the starred messages features…. Etc )

Some things that can be done to increase usability and get rid of these points of confusion would to be: 1. Adding a post to newsfeed option at the top of the newsfeed similar to how facebook has their newsfeed. 2. In the real version and not the wireframe, we expect the filter options to be really clear because they would be available to the user. 3.  The team still considers the started messages option to be valid; however we shall introduce the star icons to the newsfeed so that it’s clear there is a connection between the two.

Usability Test Findings Summary

Because the user was unclear what “university insights” meant and who they were trading with and for, we will need a more in depth description of what this site offers on the main login page of the site. This will prep new users on what to expect and what they are signing up for through this site.

Because the user was unsure of what to do after they filled in the profile page, we will need to be directly involved in giving a tour of the site as they first sign up. This could be accomplished by having a guiding pop up messages that appear as a first time user to show what icons mean and what to expect on each page as well as show where to go after the profile page for the first time.

Because the use was not sure what recent posts meant and why they were in the profile page, we should have a header to show that these recent posts are posts that the user as personally posted. These posts will show as real time posts for ease in checking on the traffic of the post, such as how many have personal messaged back. There should also be an option to edit this post by changing wording and changing the amount of swipes offered in return for this particular information.

Because the icons in the header bar weren’t noticed, we will need to make these pop more visually. Whether this is accomplished via color, dropshadow, or another design element will be discussed further.

We must also make clear the difference between general board posts and personal messages. While both seemed intuitive to the user, the reason for why both were present in one website was unclear.

Usability Transcript

P stands for Payton. U stands for User

P: You’re not being tested personally we’re just seeing how well the site perform.

P: WE are not the designers so feel free to speak your mind so we encourage you to think out loud.

P: I’m going to show you the home page. So if you could just tell us about what you see and what you know about the website the focus of the site

U: It looks really nice and clean. I like the colors. It’s about trading swipes for university insights. And I may not know right off the bat what that is.  What university insights is and who I am trading for but I know that I  should log in or register because it it my first time on the sight

P: so where should you start to do that

U: the username and password box if I were logging in or register the new user button

P: So what would you do

U: register a new user if I were new or enter my username and password if I were already a user

P: so the log in would take you here. And if you could just tell me what you would do if you were presented with this page.

U: well obviously it wants you to create a profile. So I would click on edit profile. And I would assume it would allow me to edit the profile information that is listed on the page.

P: What do you think that you would do after you were done editing your profile

U: well I see recent posts is down at the bottom. So I would probably scroll through there and see what I’m supposed to be doing

P: and what would you expect to find in recent posts?

U: recent posts about I assume trading swipes for insights or whatever is going on on the site

P: what do you think these icons at the top are? What would happen if you clicked each button

U: the first one looks like a picture . I assume that would be my picture and would take me to  my profile. Then next one looks like an email button or a message button. I assume that would send an email to someone or send a post or send a message out somewhere. The last one looks like a logout button so I assume that that button would log you out of the site once your done.

P: So this would actually open  up to the main page. Once you logged in, it would go into this page after you were done creating your profile. So could you lead me through your thought process once you got on this page.

U:  “I’m kind of blind” (?)

P: If you were a student and were looking to learn something about the university and you want to post on here., how would you navigate through this page?

U: it looks like there would be multiple messages or posts. So I would scroll through these if I didn’t know what I was looking for. Otherwise,  if I did have a better idea of what I am looking for, I would click on these filters which I would assume would bring up criteria for searching. If I found one that was interesting, I would click responds. SO I might do that next.

P: So if you did respond,  how do you think you would get to this page (messages?)

U: umm maybe through your profile? ?? I guess… or .. yeah I guess through your profile or after you respond if it takes you here if they respond to you.

P: what are the different things you could do with this page?

U: well first I would check my inbox, because it looks like I have 2 messages.  Or some sort of activity going on there. So I’d probably click on those and see what was going on and how I would respond to those. I assume they are personal messages. It kind of looks like a basic email setup or IM or FB posts kind of thing.

P: We’ve gone through all of our website, can you speak about the layout of the web site, or how you would get to different things or how it would make best sense to you  and the branding as well.

U: I think the branding looks really good. It looks really clean. It’s easy to navigate. Umm going through the pages I think was pretty easy. It’s set up like basic messaging which is really easy to use. And I think if it was functioning it’d be even easier to use so I think that’s just the limitations of wireframes. Yeah I thought it was overall pretty easy to navigate.  Maybe like this page. I’m not sure entirely if I would definitely go through my profile. I would feel more comfortable if there were some sort of navigation to get to my inbox or these features. I might figure it out but it might take one or two extra clicks.

Midterm Presentation

Wire Frames

sitemap

Preview

Layouts

Logo concepts -Kusold

Branding

Business Name:
ideas:
Meal Mentor
Food for Thought
winner: Food 4 Thought

Website Tagline:
ideas:
A peer mentorship program
Connecting the hungry for food to the hungry for knowledge
I have food. Do you have some thought?
Are you hungry?
Feed me with thought and I'll feed you with food.

winner: ?

Logo ideas:

URL/domain name:
www.food4thought.edu
or www.food4thought.com

Email:
info@food4thought.com

social media names:
Food4Thought

Flash Card Exercise:

Technical Layout and Flow

Created by a team of computer science engineers as a prototype for a functional layout:

Persona Update

Personas

Katie
18 yo
freshman
Baker West
Pre-Business, but looking to change
Meal Plan: semester block o - block 450
Moderate flexibility for students who vary between 2-3 daily meals and some snacks.

Born in Cleveland, OH.
Only knows a few people on her floor and two other classmates from high school.She attended the Involvement Fair because she wants to get to know more people but felt intimidated when it seemed like everyone was already friends at these meetings.

She wants to know more about studying abroad, Psychology, International studies, Business, and the Personalized Study Program. Shes spoken a couple advisors, but they just gave her the general description, which Katie had already read, and pushed her out the door. She'd like to have a better understanding of these majors and narrow down her options at least by the end of the year to stay on a 4-year track.

Katie comes back to her dorm frustrated that even after these meetings with advisors, she still feels lost in what she wants to do. She logs onto Meal Trade to post this:

<2 blocks> Looking for anyone with a good understanding or is involved with either the Psychology/IS/Fisher/Personalized Study program and their student orgs. Anything is more helpful than the advisors I've seen!

A couple days later, Katie gets an email that she's had a response from Ali. Katie can see from her profile that Ali is a 3rd year in Fisher, part of the American Marketing Association's student chapter, but she's also involved in MUNDO and a couple other orgs on campus. Maybe she can be helpful in starting off her search. Katie messages Ali back to set a time for lunch.

Ali
20 yo
junior
Woodruff and Indianola
Marketing; MUNDO, AMA, TEDx at OSU
Works at Brennans between classes and on weekends to pay for food and utilities

Born in Gahanna, OH
Ali heard about a website, Meal Trade, from a friend's facebook post. Being involved in student orgs, she was always meeting freshmen who would swipe her food when they had the chance. She loved that she could get food and also meet new people. Making her profile was pretty easy and then she searched under the business tag. She came across a couple and figured why not just send a notification to all of them. It couldn't hurt. She knew a thing or two about Fisher and for the rest, she knew people she could direct them to, and she'd get a free meal if they messaged back. A couple hours after she sent the notification, Ali got a message from Katie about when to get lunch.

Affinity Diagram

 Our original affinity diagram

The affinity diagram after our classmates' input

OSU date affinity diagram we gave our input to

OKcupid Analysis

Visibility of system status

• At the home screen, new potential matches are displayed
• If there is a message from a user, it is displayed in a different color to highlight the change
• There is a section to let you know who you recently visited, to remind the user of past actions
• On the home screen is a synopsis of recent activities of users
• The system sends emails to the user if someone rated them highly
• The system sends emails to the user if someone messaged them
• Notifications pop up on whatever page the user is on if someone is currently "checking them out"
• There is a companion mobile site that can push notifications to the phone
• As more personal questions are answered, the match percentage of each person is automatically updated
• Customizable search options automatically refresh searches based on specifications
• You can see if a user is online at that moment
• if the user regularly responds to messages or not

Match between system and the real world

• The premium option is called "A-List" which refers to the A-List celebrities, fluffing the users' sense of self-importance
• Potential matches are under a category of "You might like" which makes it seem more familiar
• In order to improve the matching algorithm, common questions are asked and the user is prodded into answering questions with promises of better matches and the ability to see others' answers
• Under messages, the message history is called "IM History" which reflects on the users' supposed past usage of Instant Messaging Services such as AIM.
• When there are error messages, a cute icon of a sad robot pops up
• The star rating system is used in the Quickmatch feature so a user can rate another user
• "Who Likes You" is used to see other users who have rated the user favorably
• On the profile page, instead of profession/occupation, the category is called "What I'm doing with my life"
• On the profile page, instead of physical appearance, the category is called "The first things people usually notice about me"
• On the profile page, instead of a category such as interests, there is one called "I spend a lot of time thinking about"

User control and freedom

• when editing profile, there is a clear "cancel" option
• for the profile pictures, there are clear options to delete any photo at anytime
• for the profile pictures, there is a clear option to drag the pictures in a different order
• when rating people, it shows you who you just rated in case you want to go back and re-rate the person
• There is an exit button for the small add to become an A-List member
• in the messages portion, you can see all past messages that have been sent
• The logout button is displayed in the header of every part of the website
• the browser back button works seamlessly
• A help option is at the footer of every page
• There is a box displaying who the user recently visited so that they can be found again quickly if desired

Consistency and standards

• Messages is the place to view messages and on someone's profile there is a consistent option to "send a message"
• The percentages for Match, Friend, and Enemy remain consistent no matter what screen they are viewed on
• Inconsistency: "Improve Matches" directs the user to the Questions tab
• A viewer that actively visits a profile will spur both a notification and an additional entry in the recently visited portion of the website
• If the user marks that they only want to see a person of a specific orientation, they will only be matched with users of that orientation
• If a user marks on their profile that they only want to be seen  by users of a specific orientation classification, then they will only be seen by those users in searches
• Inconsistency: the 'online for chat' icon is different from the messages icon which is slightly confusing.
• The number of unread messages in the messages portion will also appear as a numerical icon in the sidebar
• Whenever a change has been made to user settings or profile options, there is a notification bar that appears informing the user that the update has been successful
• clicking the okCupid logo will take you to the home screen
• inconsistency: when searching by interest, a lot of the time users will have the interest as their username, and the interest will not be searched, just the username

Error prevention

• There is a "hide from" list that prevents the user from being seen by users they really don't want to be seen by
• Problem: if you make an edit but don't click save and then hit the browser back button, it doesn't prompt the user to save changes
• Problem: if you make an edit, don't click save, and then navigate to a different portion of the site, there isn't a prompt to save changes.
• Problem: If a search is too specific, it just leads you to an error message instead of suggesting how to make it a better search
• Problem: if you already messaged a person, it still shows them in the "You might like" section.
• Problem: even if you already rated a person unfavorably, it still shows them in the "Matches" results
• Problem: it shows the searches by "Special Blend" but doesn't tell you what that means. Shouldn't it be by match percentage and location? Needs to be clearer.
• Problem: there aren't a lot of options to go into a type of incognito mode where other people can't see that you're visiting their page

Recognition rather than recall

• On every page, there are clear icons to get to the messages option
• On every page, there are clear icons to get to the matches option
• On every page, there are clear icons to get to the visitors option
• On every page, there are clear icons to get to the quickmatch option
• On every page, there is the user's profile picture which makes it easy to get to the profile option
• If the user rated another user, then the rating of that user is displayed whenever you see the rated user. This is effective so you don't have to recall what you said about a user
• There is an option to look at answers to past questions that have been answered 
• There are specific search categories in the questions section so that a user can filter questions by importance to them 
• At any time, the user can view what they said on their own profile
• When viewing other people's profiles, the user can compare what they said in their answers to questions to what the other user answered right on top of each other so the user doesn't have to remember what they answered.

Flexibility and efficiency of use

• There are direct links to the messages portion in emails that are sent to a user so the user doesn't have to log in and then navigate to the messages section everytime they receive a new message
• The navigation is fairly simplistic and consistently displayed on every page
• The home page is accessible through the company logo
• Overall, the navigational menu is simplistic in that it only contains 3 relevant tabs
• 
  

Aesthetic and minimalist design

• There are advertisements
• There is an hardly used "Promote me" button on every page under the profile picture
• There are icons to get the OKCupid app on the webversion even though it can auto-detect that I am not using a mobile device at this moment.
• Overall, the navigational menu is simplistic in that it only contains 3 relevant tabs
• The logo isn't overly complicated
• The colors in the website reflect the company logo/brand and don't deviate much
• Since the users are the focus, the background is simplistic and is just one color
• The brighter color is used throughout the site to highlight things that interest the user such as a new message
• The cursor uses a standard switch to indicate clickable links
• flat design

Help users recognize, diagnose, and recover from errors

• Anytime there is an error, a cute icon of a robot shows up
• The error is read as a message from the robot
• The error message does not contain any error codes, just plain English
• the 404 doesn't make the user feel like they messed up. It says "It's not you, It's us."
• The 404 also attempts to redirect the user back to the correct page
• There is a help link at the footer of every page

Help and documentation

• The help topics are clearly listed
• There is an "other" option to provide feedback if no help can be found
• Problem: the help topics aren't searchable
• The feedback page took a while to load
• They have an option on the feedback to attach a screenshot which is good

MarketOSU evaluation

Market OSU

Usability was difficult as registering for the site came up with errors in how to sign in. Their facebook site was easy to sift through to see what was being offered, but did not seem to be updated frequently. Their website was informative of extra side events and helpful video tips, but it did not interact directly with MarketOSU concept except for the occasional self-promotion. I would have liked to see more interaction on the site between buyers and sellers. However, their site was well marked and informative of what they could offer, how they came to be, as well as their policies.

1. Visibility of system status

It is difficult to log onto their website. We sent an email explaining this setback to the company and they still have not responded or fixed the problem.

 

2. Match between system and the real world

This site is specifically for OSU students, so they have abbreviated class names and talk about locations in and around campus as regular students would. They have an FAQ, Contact, and About page which are all concepts familiar to the user.

 

3. User control and freedom

They are clear on when what you are doing is a mistake but unclear on how to correct it.

 

4. Consistency and standards

Actions and words stay consistent, however their logo and fonts change between their site and their blog.

 

5. Error prevention

Error signs are present, however how to remedy the error is not made obvious.

 

6. Recognition rather than recall

Book covers are made visible. Their Watch List feature also allows helps in immediate viewing of what users are looking for. When clicking for their blog, it should re-open in a separate tab instead of replace the original site so user does not have to sort back through old pages. 

 

7. Flexibility and efficiency of use

The Watch List allows users to tailor their experience on MarketOSU by choosing what books and tickets they are following, instead of sifting through all the posts. 

 

8. Aesthetic and minimalist design

No excess in design on their website. Text hierarchy enhances readability. Blog design is not consistent with their original website and colors do not match. Still, the blog design is minimal with a focus on the information.

 

9. Help users recognize, diagnose, and recover from errors

Error message to log in does not diagnose the actual problem. The hints to help recover from these errors do not depict the problem at hand.

 

10. Help and documentation

FAQ page is visible and it delineates steps on how to use their Watch List.