TRITON TRADE
--
Authors: Deborah Ahn, Jenna Fall, Jobeth De Jesus, Deanna Shinsky, Yunjia Yao, Wanyi Lu, Isabella Sanchez, Kaili Guo
http://deborahahn.com/uiux/triton-trade/
I. Introduction
Free and For Sale (FNFS) is a Facebook group platform for UCSD students to communicate about buying and selling items. FNFS provides a convenient method for shopping that targets student needs and budgets. The community currently consists of 13,154 student members and continues to grow. However, being student run and borrowing a platform not explicitly created for its purpose, it is not perfect.
Fueled by personal experience and frustrations using the page, our team was motivated to gain more insight on user experience. How do users interact with Facebook’s functions and layout of FNFS to accomplish tasks of selling and buying? To answer this question, we employed the rapid contextual design process. This entailed addressing the situations in which students utilize FNFS and observing the user in that context. Some of the common reasons for using the page include browsing, buying, price comparing, advertising, and selling items.
Our data was used to guide our project and inspire changes that would enhance the user shopping experience; by diminishing inefficiencies and providing necessary structure to the layout. The data driven design process ultimately led us to design a mobile application called Triton Trade, which addresses the central issues of organization and search functions on FNFS.
A. How does Free and For Sale work?
FNFS is run and monitored by UCSD students, and only users with a valid UCSD email are able to join. Group members can advertise what they are selling or buying by simply posting on the page. People are then able to use the Facebook interface to tag friends, comment, post pictures, like, message, share, etc. Every post is linked to the poster’s Facebook profile, giving students the ability to comment or message the creator of the post.
The page has a newsfeed of posts that are listed by recency and activity. Every post is time stamped by how much time has passed since the post was created. When a post is liked or commented on, the post moves to the top of the newsfeed. Students can also tag friends to draw attention to specific posts. The page contains a search function, where users can search by keywords in the post; however, the search button is very small and difficult to find. Lost and found posts are common to the page.
There are several rules that are enforced by the administrators of the group. Some of these rules include: stating “buying” or “selling” at the beginning of the post, no re-posting the same post, and only posting about related information to the site. For example, posts related to illegal activity are not allowed and will result in a permanent ban from the site. The administrators are also able to communicate with group members by pinning important posts to the top of the page, and users are able to privately contact the admins, as they are all listed in the members section.
B. The Triton Trade Team
Triton Trade is a group composed of 8 graduating Cognitive Science majors from the University of California, San Diego students. The team worked together for 8 weeks, completing the rapid contextual design process to collect data and design Triton Trade.
II. Methods
A. Overview
We chose to use the Focused Rapid CD model introduced by the textbook, Rapid Contextual Design, as the key reference to accomplish our project goals in the ten-week contextual design process. Based on the suggested Focused Rapid CD timeline, our group started off with the first round of contextual interviews in week 3 of the quarter. During weeks 3–4, we interpreted our interview results in pairs and set up the goals and expectations for the second round of contextual interviews. With the data we had in hand, we dedicated week 5 to build an affinity diagram and user personas. We walked our affinity wall and worked on visioning and storyboarding in week 6–7. By the end of week 7, we had come up with our first paper prototype design and were able to carry out paper prototype interviews during week 8. From week 9 to 10, we created a high-fidelity model after our paper prototype interviews, and organized our final presentation and paper as well as our project binder.
B. Contextual Interviews
The contextual interview was the main method used to learn about the common experiences of UCSD students using Free and For Sale. Contextual interviews require the design team to go to the users’ natural working environment and watch them performing relevant tasks in order to understand their work practices. Thus, the expert/apprentice model is essential to ensure that we harvest live and rich user data based on direct observations of the users’ performance on their work in real time. In this model, the interviewee acts as the expert in doing his/her work and the interviewer as the apprentice watches the expert performing the relevant tasks. The interviewer gains insight into the essential steps taken and problems encountered in the users’ work process by observing and asking questions during the process if further explanation is needed for a specific action.
1. Interview Scope
Since Free and For Sale is open specifically to UCSD community members, we decided that our interview targets should consist of various categories of UCSD undergraduates. Since we interact closely with fellow undergrads on a daily basis, we would potentially have the access to a very diverse user pool.
Through our personal experiences with and observations of FNFS, we considered that gender, grade level, and degrees of experience with the site are important factors that might influence user behavior on the page. Thus, we made a user tracking sheet in which we assigned each interviewee an arbitrary number and recorded those factors of interest on the sheet.
Before proceeding to the contextual interview stage, our group came up with an interview protocol, which included general questions to ask at the beginning and end, as well as the specific tasks we need to ask our interviewees to perform.
2. First Round of Interviews with Interpretation
For the first round of interviews, each group member interviewed two users. We recorded all the interviewees on a tracking sheet to ensure we had a fair distribution of users, with different grade levels and experience with the site. The contextual interviews were conducted either at the interviewees’ home, Geisel, or places where they felt relaxed and would normally access FNFS. To begin the interviews, we asked general questions such as how the interviewees learned about FNFS and how often they use the group. Interviewees were then asked to navigate through the site and perform buying and/or selling tasks while the interviewers took notes of their words and actions. To conclude the interviews, we asked interviewees what they like and dislike about the current group.
From the first-round interviews along with interpretation sessions, we discovered some basic user need patterns as results. Two of the major issues revolved around the bad organization and search function of the page. In order to learn more details about how users dealt with the disorganized page and what problems they encountered when using the search bar, we decided to do a second round of interviews.
3. Second Round of Interviews
We did another round of interviews to further build our understandings on the key issues we found in the data from the first round of interviews. In the second round, we followed the same procedure as the first round, but paid special attention to interviewee input on organization and search bar problems. We stopped them and inquired closely on what difficulty they were having at hand.
C. Supplementary Online User Survey
To avoid any potential holes left in our data at the end of our contextual interview process, we created an online user survey that was posted on FNFS; it consisted of a mixture of multiple choice, checkbox, and free response questions. From the survey, we especially hoped to find people’s average successful transaction rate, items commonly sold, and the pros and cons of using this group for its purpose.
D. Affinity Diagram
After completing two rounds of contextual interviews with interpretation, each group member prepared a set of affinity notes according to the interview results he/she collected and shared them in our affinity diagram building session. We started by putting related notes in the same columns to grouping and labeling related columns. As we worked from the bottom and upwards in the affinity diagram hierarchy, key issues and big themes in users’ needs gradually emerged.
E. Personas
After building the affinity diagram, we decided to create four user personas to better represent the sequence models we consolidated, as well as the major themes revealed in our affinity diagram. Each character in our persona engaged in a distinctive combination of buying and selling tasks; their varied goals and interactive abilities with the site reflected unique levels of experience and familiarity with the FNFS community.
E. Visioning & Storyboarding
During visioning, we reflected on the main issues rising from the affinity walk and took account of the user scenarios we made in our personas. On a whiteboard, we drew out basic features that could help solve major user issues, and worked on the logical flow of the screen to connect the functions we want in our paper prototype. Later, we divided into four groups and drew out frame-by-frame storyboards of hypothetical users engaging in various tasks using our newly-designed interface.
III. Results
A. Contextual Interviews and Affinity Diagram
The first set of data was collected via 25 contextual interviews of Free and For Sale users. The notes taken during these interviews were used to create affinity notes, which were later used to build an affinity diagram. The group interviewed was composed of: 1 freshman, 2 sophomores, 5 juniors, 11 seniors, and 6 alumni. 16 of the users were females and 9 were males. The contextual interviews were done in two rounds; however, only one affinity diagram was carried out after the second round. From the diagram, we were able to discover the following themes: organization, community, shopping experience, privacy and safety, money, and communication (Table 1).
1. Organization
The “organization” theme emerged from users’ desires to find things easily, and to want sufficient information about what they are purchasing. For example, some users’ concerns were that, “the search bar is hard to find” (user #9), “the search includes distantly related items” (user #21), “the listings are very disorganized” (user #17), “there should be categories” (user #18), “listings should be deleted once an item is sold” (user #17), and “the site somehow needs to figure out a way to mandate the seller’s to put in the condition of items on the site” (user #23).
2. Community
The “community” theme emerged from users that liked the social networking aspect of the site, the common user base, and the accessibility of the group’s administrators. For example, users stated that they, “like how it’s a UCSD group” (user #12), “like that the group helps UCSD” (user #9), “were invited by a friend” (user #6), “find the page immersive” (user #10), and think “the admins post often” (user #3).
3. Shopping Experience
Users also mentioned that they like the variety of items and services that are offered, they want buying and selling to be easy, and that the time of the year matters to them; these key issues gave rise to the theme of “shopping experience.” Users made comments like, “the occasional eye-catch on the front page gets my attention” (user #9), “I like that people can say they are buying things because sellers can come to you” (user #5), “I recently lost my ID card and found it through lost and found. I think the function is very useful because messages get to spread out fast. I found my ID the same day I lost it” (user #25), “I like how there are ride services” (user #10), “it’s nice to be able to meet on campus for the exchange” (user #20), “big items are cumbersome to deliver” (user #3), and “I do not use the groups the same was as I do use other websites. I only use it at certain times of the year” (user #14).
4. Privacy and Safety
A “privacy and safety” theme emerged from the users’ desires to have personal security as well as physical and financial safety. Users think it’s, “safer to buy in the group since people in the FB group generally have mutual friends with one another” (user #25), say “you can check out the profile of the seller/buyer. You know who you are buying from” (user #17), “prefer private responses” (user #17), think “scammers are a potential problem” (user #4), and “prefer to meet in open public spaces” (user #18).
5. Money
The theme of “money” was built from the notes of users who want fair and affordable prices, and have mixed feelings about competition as well as negotiation. For example, users say they, “cross reference prices to make sure I am getting a good price by using old posts” (user #6), that “prices are inaccurate or overpriced sometimes” (user #22), “don’t like to negotiate money, so I only pursue items with good prices” (user #6), “the chat makes haggling competitive” (user #10), and that “last minute price fluctuations are a problem” (user #3).
6. Communication
Lastly, the theme of “communication” emerged from the fact that users want quick and reliable responses, and don’t want to be intrusive. For example, users said things like, “the responses are slow. The comments take up too much space” (user #10), “I prefer to be able to call the buyer/seller directly. This allows for better communication” (user #25), and “I like that Facebook gives me notifications for my items posted” (user #9).
B. Prototype Interviews
After building our paper prototype, we conducted a total of 8 paper prototype interviews in order to test whether our design ideas addressed the problems faced by the users of FNFS. The users we interviewed encompassed 5 females and 3 males; 1 was a freshman, 2 were juniors, 4 were seniors, and 1 was a graduate student. The users who tested the prototype were able to provide us with both positive and negative feedback. Some of the things they liked from our paper prototype were that the icons implemented were very clear and that the search bar was easily found. Some aspects of our paper prototype disliked by the users were that the sign-in page was confusing to navigate and that the advanced search page was difficult to get to. Furthermore, many of the users chose to share their design ideas as they interacted with the paper prototype. Some of these were: making the page more visually appealing for users who like to browse only, using instant messenger instead of e-mail, having drop-down notification options, having more options for item condition, and implementing set notifications for when an item with a specific tag becomes available. This feedback was used to develop a high-fidelity prototype version of the paper prototype.
C. Survey
A survey targeting FNFS users was employed to help us determine whether the data acquired from contextual interviews was representative of the entire user population. Although we initially expected that the users we recruited might not encompass the true variability of the user group and that this would give us biased data, the random sampling results acquired through the FNFS survey gave us very similar insights to that which we collected from the contextual interviews. The survey was open to the public for a total of twelve days (Figure 1; from April 25, 2014 to May 7, 2014), and daily user responses reached a maximum on the sixth day (May 1, 2014). We received a total of 106 responses; 65 from female users and 41 from male users. 25% of the users were freshmen, 23% were sophomores, 21% were juniors, 22% were seniors, and 9% were on their fifth (and up) year of college.
The users were asked multiple choice questions such as, how did you hear about the FNFS page? How often do you visit the group? Do you use other sites? How often are your buying and selling transactions successful? For what items do you use FNFS? Why do you primarily use FNFS?
The majority of the users stated that they found out about FNFS through their Facebook newsfeed (Figure 2; 49%); others heard about the page from a friend (42%), from other sources (9%), but not from Facebook advertisment (0%). When asked how often they visited the group (Figure 3), the majority of the users identified themselves as frequent users (47%), and others identified themselves as “all the time” users (25%), occasional users (23%), and “only when I need something” users (6%). None of the users who responded to the survey identified themselves as rare users (0%). The users were also asked to identify which other sites they visit (Figure 4). Most of the users stated that they used Amazon (49%), others said they used eBay (24%), Craigslist (23%), and other sites (4%).
When asked how often their buying and selling transactions are successful (Figure 5), the majority of the users stated that they experience success 75–100% of the time (48%), others experienced success 50–75% of the time (25%), 25–50% of the time (15%), and 0–25% of the time (12%). Additionally, the users were asked for what items they use FNFS (Figure 6). The most popular items were school supplies (12%), moving sale (12%), clothes (10%), electronics (10%), small appliances (10%), and lost and found (9%). Lastly, users were asked their purpose for using FNFS (Figure 7). A majority of the users said that their main purpose is to buy items only (32%); others used the site for both buying and selling (31%), browsing (27%), selling only (8%), and other reasons (2%).
The survey was also used to ask users the following free response questions: what are your favorite things about using this group? what are your least favorite things about using this group? do you have any other comments/concerns/suggestions?
Interestingly, the answers given by the survey users fell under the themes that emerged out of the data acquired from the contextual interviews. The “organization” theme emerged from answers such as “There are many posts and it depends on luck if you are finding what you want, but I know this can’t be avoided because the group sells many things. I would use the search/find button but then I would need to scroll down a couple of pages for the search engine to find the word”, and “Please have ALL posts that say SOLD or NOT AVAILABLE or anything REMOVED. Often I see in the comments “sold” and there are already so many posts on the page, it isn’t hard for OP to remove such posts. I know it’s hard for admin to control that, but it’s one thing that could make the useful posts easier to see”, and “Everything gets lost and disorganized. No categories. maybe try tagging?”. These were provided by users S#107, S#83, and S#80, respectively. The “community” theme emerged from users who stated their enthusiasm of “connecting something with someone that needs it. Win win”; user S#96. The theme of “communication” emerged from answers such as that of user S#87, who likes “The ease of communication”. The theme of “privacy and safety” emerged from users’ beliefs that “It’s more safe to deal with UC students than to deal with sketch people on Craigslist. Also, most of the transactions take place at/near UCSD — so again, it’s better than CL [Craigslist] because you don’t have to drive all over to sell a t-shirt” user S#94, and “Things are available locally and from UCSD students (safer than Craigslist, in my opinion)” user S#88. The theme of “money” emerged from users’ statements that the form of payment is “convenient, easy, usually cash” user S#57, and complaints that “transactions don’t go through, buyers back out all the time” user S#66. Lastly, the theme of “shopping experience” was identified from users who liked the nature of the site, “Find things I never thought I could buy, for a lower price. Used is totally fine with me” user S#104.
IV. Analysis
Our analysis process took place alongside our data collection, finding questions, issues, and themes that came up from them. As we did so, we would collect more data as needed through a second iteration of interviews and a survey. Eventually, we narrowed down our focus to Free and For Sale’s Organization, Community, Shopping Experience, Privacy & Safety, Money and Communication, as we found through the construction of our affinity diagram. Once we achieved this, we could look into ideas on how we could approach these concerns, and design something to suit our users.
A. Affinity Diagram
1. Organization
According to the affinity diagram we had constructed from our contextual interview notes, we noticed that a significant concern for Free and For Sale was the overall organization and presentation of the page. Listings would get pushed up due to responses, and showed no clear organization between them. It did not help matters that the search button found on the page is very simple and was not designed to function the way that the users needed to find specific items.
Another organizational aspect we noticed that impacted our target users were the ways the listings themselves were structured through using the Facebook commenting option to post them. The listings in turn contained varying amounts of detail and information that in turn have occasionally made the buying and selling experience difficult.
We saw that the problem lay mainly on the incompatibility between the layout of a Facebook group page and the desired usability of the group. If we were to improve the Free and For Sale page in some way, we would have to create an app that could handle these new features. It had to have an efficient search engine, appropriate categories, and even a way to keep the listings in an understandable order. Additionally, there had to be a way to ensure that the listings are informative enough for others users when making their buying or selling decisions.
Our initial thoughts on how we could improve Free and For Sale were to restructure the page in an app so that it would be easier to navigate and search for items the user is looking for. Given that this was the biggest concern among those we had interviewed, it would be something we would put greatest emphasis on. The features we included to address this were a tagging system, improved advanced search function and color coded posts to make the shopping experience of our users easier.
2. Community
Because the Free and For Sale group is built onto Facebook, the users are immediately given access to a platform great for social networking and sharing with one another in a community. Users are able to use the tools available from Facebook to “tag” other individuals to specific posts as well as share ideas with one another with regards to any listing. These behaviors can influence and even encourage buying decisions of our users, as some of our interviewees had mentioned. Moreover, the Facebook Group only permits individuals with a valid UCSD e-mail, further promotes this concept. With this exclusivity in mind, our users share a lot in common with one another by going to the same school, living in proximity to one another, and are close together in age. This interconnectedness among the users, and even the admins themselves had been a potential asset we focused on, but we also acknowledge that there were some shortcomings. We noted some hostility between the admins and regular users, typically stemming from disagreements on rules enforcement and proper conduct of both parties.Because of the group’s UCSD exclusive nature combined with the social aspect of the group page were already assets that our users often appreciated in regards to their use. Some design features as a result included the capacity to chat with other users, all of whom are a part of the same university.
3. Shopping Experience
People like the current Facebook group because it is convenient for books, buying and selling rides, convenient campus meet-ups, so we kept these features in our new app. However, some people preferred craigslist because it has a better organization than the FNFS Facebook group, tying in with the organization problems we looked to improve.
4. Privacy/Safety
The Facebook FNFS group is notable because it only serves the UCSD community such that you must have a valid UCSD email to become a part of it. Because privacy is very important to our users, they told us that they liked FNFS for its small community, secure campus meet-ups, and Facebook messaging for a private response.
Our new app would have to focus on user privacy, one way would be allowing only people with a valid UCSD email to join as it is now. Additionally, we will add a Triton Trade Messenger that not only protects user’s privacy and offer convenient communication, just like Facebook’s messenger.
5. Money
Because our users are college students, comparing prices and finding the cheapest deals is important for them. It is inconvenient to compare prices in the FNFS Facebook group due to the formatting, or no prices are listed at all on some of them. For our new app, old posts would be archived so our users could still see the old prices for price comparison purposes. When new sale posts are created in our new app, the price would be required to be listed so it is clear to the buyers how much they would have to pay.
6. Communication
Notifications can be annoying to some users according to our surveys and contextual interviews. We have considered a notification option that could filter and ‘tag’ specific posts they would be most interested in.
B. Survey Analysis
Looking at the demographics of our data, we found that a significantly large amount of users are female, consisting of 61% from our pool of 106 users. This gives a large 21% difference between the two that could reflect the buying and selling practices of either gender. In contrast, the college year of the user were about equal, so the group is relevant for any user.
Of our user’s, almost half have found it through their newsfeed, while the other were introduced to it through a friend. Without any significant form of advertising, word of mouth and social networks are the main form of introduction for our users.
The primary use of the Free and For Sale group, 32% mainly sold items, while 31% did both buying and selling. Interestingly, 27% simply browse the page. Assumptions we drew from these data points suggest that our users often use the site to find people who could buy from them more so than those who would buy. When we look into the group’s large number of primary browsers, many appeared to do so to pass the time, looking at other people’s listings either to keep themselves entertained or find things they want that they haven’t yet considered they did. The most commonly exchanged items were school supplies, clothing, appliances and furniture, all of which revolve around the typical lifestyle of our college age users.
Overall, we saw that there were many overlaps between the survey responses and the contextual interviews. We concluded that the data we collected as a whole were representative of the user’s demographic, habits, and concerns that we could further dig into for ideas we could design for.
C. Personas
We realized that it’s not realistic to cover everyone in the scope of this project, so we decided to focus on our current users, UCSD students because they represent the majority of our surveys. From all the interviews we did, we divided them into two groups, experienced Facebook FNFS users and inexperienced users. For the experienced users, we had Mario Lopez and Eva Johanna. For Mario, he uses it to sell books, furniture, also looking for housing. The problems he encountered included small search bar, continuous scrolling, flakers and transportation problems. For Eva, she uses this page to sell dining dollar as well as rides, buys tutoring services. She values efficiency, clarity and privacy.
For the inexperienced users, we had Brittany Richards and and Max Chen. Brittany mainly uses this page for books a few times a year, she wants efficiency and ease in transactions. She dislikes vague posts, continuous scrolling, bad search functions; she likes it that it’s UCSD only. Textbooks draw Max into the group and he creates “buying posts” to avoid using the group. She likes that it’s UCSD only and commonalities between users; he dislikes that it’s hard to navigate and confusing.
The personas were written to capture the nature of each user group, and the motivations they have to accomplish the goals that they have.
D. Visioning
Once our direction and user groups had been established, we needed to combine these data to flesh out the workflow in a more specific way. We started out by describing the steps of the app in a diagram, based on all the data we gathered, known as visioning. The first step was to log in through Facebook because our users liked it that everyone has a profile picture, it feels safer. After logging in, there is a rules page that new users would need to read and understand. We decided to create the menu bars at the bottom of each page because it is more convenient for our users to navigate. The menu bars include five buttons: My History, New Posts, Home Page, Messages and Settings. Because a lot of people had complained about how they couldn’t get messages sent to Facebook, we created “message” bar so it is straightforward to the users if they received new messages and they wouldn’t miss anything important. We also accentuated the search bar function as a lot of users brought up the difficulties of looking for items in the FNFS group. We aimed to include a more advanced search function so people could find the things they want easier, by categories or prices.
E. Overall Analysis
The use of Facebook as a medium for the Free and For Sale group is a significant influence on its functionality. The commenting and status update style of the group does not translate well to the structured organization that our users tend to expect. As a consequence to this, search functions on the page do not help find specific items within the correct context.
What users did make great use of the page was its integration to a social networking page, as they could share listings with friends or discuss topics with one another. We plan to keep this as a feature in some form.
The UCSD-centric nature of the page is another important facet of the group, as it creates a safe community of students who often share the same needs as others, while living conveniently close to each other.
As a result, most of the design features we have created and may consider implementing in the future would hinge on those two main parameters, while adopting a few others that sites like eBay, Amazon.com and Craig’s List have employed to make buying and selling a convenient activity for their users.
V. Design Changes
A. Post Submission
1. From Facebook Group to Design Prototype
“Some people don’t list specifics on what they are selling.”
Posts in the Facebook group don’t have a clear structure in the way item information is presented, this makes it difficult for users to locate useful information in posts. To provide a uniformed structure to all the posts, we introduced the idea of a post builder in our paper prototype. The form builder asks users to fill out specific information regarding the items they are selling/buying, including item name, category, condition, pictures etc. Users can also add detailed descriptions to their items by typing in the description field on the form. The information users fill out is going to be used to generate posts with a standard structure.
Having standardized posts ensures that all the posts have sufficient information about the items. Doing this also makes it easier for users to quickly locate information they want to find.
2. From Paper Prototype to High Fidelity Wireframe
“I want to be able to pay securely online via paypal or credit card.”
We did not include payment options in our paper prototype. However, during our second round of interview using paper prototype, many users suggested that having multiple payment options available would provide much convenience to users. So for our high fidelity wireframe, we added payment options as one of the fields users can indicate for the items they are selling/buying.
B. Organization
1. From Facebook Group to Paper Prototype
- “Search includes distantly related items.”
- “The search gives me irrelevant info.”
There is a search function available in the original Facebook group, however, during our first round of interview with users, only a few of them actually were aware of that function. When we showed them where the search bar was located at, most of the users complained about it being hard to locate. Also, the few users who had used the search function told us that the search function was not accurate at all. One of them demonstrated the poor search function to us on the site. When the user tried to look for a pair of shorts, some of the search results he got turned out to be very irrelevant.
To allow more precise searching, we designed a search bar that can be customized. The advanced search function makes it possible for users to search by different categories and set restrictions to their searches. The new search function makes it possible for users to filter items by setting search restrictions such as: whether they are buying or selling, what is the category they want to perform their search in, what is the acceptable price range, the condition of the item and delivery option etc. One thing most users found unique and useful about our paper prototype is the tag making field under search. Users are able to search by tags such as item color, size and other specifications using this feature. Also, to make the search function more obvious, instead of putting a search icon on the upper right corner of the screen, we decided to make a fixed, expanded search bar that is placed on the very top of the screen.
2. From Paper Prototype to High Fidelity Wireframe
For our second round of interviews with the paper prototype, all of the users gave us positive feedback regarding the improved search function. However, some people pointed out that the delivery options could be improved. Users noticed that the option for the delivery option was either yes or no, but there are multiple ways of doing delivery, merely indicating delivery availability might not be enough. Especially when on campus delivery is the most popular delivery option, buyers would really want to know if on campus meetups are available. To accommodate this specific need of users, in our high fidelity wireframe, we changed the delivery options to radio buttons which allow sellers to choose from three choices. This will tell buyers exactly how the items are going to be delivered.
C. Notifications
1. From Facebook Group to Paper Prototype
- “I like that Facebook gives me notifications for my items posted.”
- “I hate getting notifications because it drains my phone batteries.”
One thing users like about the Facebook group is that their activity logs can be saved, so they can check their previous activities whenever they need to. To preserve this unique feature of Facebook, the paper prototype we made also have activity logs available to users. It is titled “My Activities” and placed as a fixed tab on the bottom of the screen. By clicking on the tab, users are able to track the history of their posts, comments, likes and tags.
A lot of users mentioned that they do not like to be bothered by Facebook notifications. However, some users also said that they want to be notified when things happen on Facebook. To allow more flexibility to our users, we added notification switches to our app. Users have the option of switching their notifications on and off.
2. From Paper Prototype to High Fidelity Wireframe
During our second round of interview, some users brought up the issue of extracting their own activities from the activity log. Since all the activities involve one user account were combined together in activity log for our paper prototype, it made it hard for user to quickly distinguish their own actions from the actions done by others. To solve this issue, in the high fidelity wireframe, we provided a way for users to quickly identify their own actions by making user actions a darker shade compared to the activities done by others. This way, users are able to quickly identify their own actions from other people’s actions and vice versa.
D. Clutter
1. From Facebook Group to Paper Prototype
- “The organization is poor and feels overwhelming.”
- “The listings are very disorganized.”
During our first round of interview, almost all the users mentioned the problem with organization, especially the lack of categorization for posts. Buying, selling and for free posts are all combined together in the Facebook group. This makes it hard for users to quickly distinguish different types of posts from one another. To deal with this issue we implemented color coding to the posts in our paper prototype.
By looking at the colors of posts, users are able to quickly tell if one post is for selling, buying or free things. Users can filter out specific types of posts by choosing post types from the options under the search bar. Posts can also be filtered by posting time and price, users can do these simply by choosing options from the drop down menu located under the search bar. Color coding and filtering options allow users to narrow down their searches in the very beginning stages, eliminating much extra work and confusions.
2. From Paper Prototype to High Fidelity Wireframe
When we did our second round of interview with the paper prototype, all the users liked our redesign of the post layout. Therefore, we kept all the features we had for the paper prototype when we designed the high fidelity wireframe.
E. Communication
1. From Facebook Group to Paper Prototype
- “I Facebook message sellers for more privacy.”
- “I prefer private responses.”
- “My least favorite thing… Facebook messages going to the wrong inbox.”
One feature that users seem to like a lot about Facebook is how it allows users to message other people without adding them as friends. However, Facebook’s inbox will direct messages from non-friends to a separate mailbox and there won’t be any notifications for those messages. People usually don’t check their other mailbox often. Because of this, a lot of sellers/buyers tend to miss messages from potential buyers/sellers. To deal with this issue, we added the Triton Trade Messenger(TTM) feature to our paper prototype. Messages received through TTM will all be directed to the same inbox no matter if it is from a Facebook friend or not. Having the messenger will allow users to check all their messages at one place, therefore lowering the possibility of missing messages from potential buyers/sellers.
2. From Paper Prototype to High Fidelity Wireframe
When we did our second round of interview with the paper prototype, all the users liked the idea of Triton Trade Messenger. So we kept this feature in our high fidelity wireframe as well.
F. Privacy and Safety
1. From Facebook Group to Paper Prototype
- “I feel safer because only UCSD students use it.”
- “I think it’s safer to buy in the group since people in the FB group generally have mutual friends with one another.”
Users stated that they feel safer when using the group to buy and sell because only UCSD students have access to the group. Having an all student user base makes the group a safer trading environment, especially when comparing to websites such as Craigslist which basically allow anyone to post. In order to preserve the sense of safety in our paper prototype, we made it possible for users to login with either their Facebook accounts or UCSD student accounts. Both ways would make sure that users of the app are from the UCSD community. (For Facebook logins, users have to provide their UCSD email for identity verifications. Just like how the FNFS group does it.)
2. From Paper Prototype to High Fidelity Wireframe
“I’m concerned my personal contact info will be used by a third party.”
After testing our paper prototype, we found that one major issue regarding privacy and safety is that many users are afraid that their personal information might be used by a third party. To prevent those types of issues, we came up with the user blocking function in our high fidelity wireframe. Users can block people if they don’t wish to be seen or contacted by them. They also have the option of setting their contact method to TTM, so that their phone number and email information will be hidden.
VI. Prototypes
A. Paper Prototyping
Paper prototyping began with ideas developed from our sketching, visioning and storyboarding sessions. Multiple versions of sketches were made by individual members of the group. Visioning and storyboarding were done collectively, while we made note of ideas to use in the design of our prototype. We focused on how to make the layout of the screens user friendly with an easy flow, while keeping the critical elements of our key issues from user needs. Using the ideas generated from these meetings, one member created a preliminary prototype design, which was then further modified by the whole group.
B. Modification
During the modification process, the group’s ideas were integrated to create essential elements in the design. For example, we wanted to have a homepage, and other main pages such as messaging and settings that were absent from our preliminary prototype design. From this, we derived the idea to place a fixed menu bar at the bottom of the screen that leads to the main pages of the application, for facilitated navigation throughout the application.
C. Paper Prototype Usability Testing
After the essential ideas for the paper prototype were integrated in the final version, prototype testing began. Each member of the group conducted one paper prototype contextual interview, for a total of eight interviews. All of the buttons and pages of the prototype were printed out and used for the interview. The interviewee was asked to navigate the interface by tapping on the buttons on the paper, which would then be altered accordingly by the interviewer. From these interviews, we were able to further understand the needs of the users and how they interact with the flow of the interface. We were given a variety of useful positive and negative feedback, which we held into consideration for the next step: the design of our high fidelity mockup.
From the paper prototype interviews, we found that users in general experience frustration when a feature is not necessarily intuitive. They do not want to be confused about a function and spend additional time figuring out what they are doing. For example, we used a star symbol to represent the “My Activity” page, which most interviewees only realized after they had “tapped” that button. We tried to substitute another symbol that may better represent the function, but ultimately concluded with an alternative way of solving the problem. Instead of leaving the buttons as symbols alone, we decided it would be best to simply label what each of the buttons are, under the symbols.
Thus, a new user is able to learn the associations between the symbols and the function more quickly, and without any inconveniences. This change was also applied within the “My Activity” page, where the symbols representing tags, comments, and posts were modified by writing the words under them.
Another feature that was similarly changed from the paper prototype to the high fidelity prototype was the “Advanced Search” button. Users from the prototype interviews were unsure on how to get to the page, as the initial design of the search bar did not clearly show how to get to the advanced search page. The search bar in the paper prototype appeared as follows:
The magnifying glass was supposed to lead to the advanced search page, but it was extremely unclear. We considered many ways to make the advanced search button more salient, including thinking of intuitive symbols and using colors, and in the end we resolved to making a button that clearly said “Advanced Search”:
D. Fluid Interface
We learned that the main problems regarding navigation of the interface were the unclear labeling of buttons, leaving many of the users in mild confusion and irritation. What we thought were intuitive aspects, were actually not in the perspective of actual users. Using this information, we made further changes from the paper prototype to the high fidelity mockup, making sure that all buttons of the design were clearly identifiable or labeled when necessary. For the messenger feature, instead of designing a completely new layout, we made it similar to the currently existing Facebook messenger since users are already accustomed to the interface. Having to comprehend novel concepts in an application may drive new users away from using it — thus, our final design has been made as intuitive and user friendly as possible.
Clutter is also an important issue that is addressed in the appearance of the design. It is not ideal for a mobile application to have screens packed with content in such a small area. The use of dropdown menus were used in many parts of the application, including the home page, advanced search, and post submission. This allows for the layout to be more compact, while maintaining a large amount of information that needs to be shown to the user. In addition, it allows the user to have an aspect of control over the application, in that they can customize what they are viewing. For example, in the home page, users have the option of sorting the posts however they want by selecting an option in a dropdown menu. They can also select the types of postings such as “Buying,” “Selling,” or “Free”
This degree of freedom is a positive change from the current FNFS Facebook page, in which none of these sorting features are possible. The users who were interviewed for the prototype found this control more helpful in finding posts that are more catered to their needs.
E. Final Design
The finalized prototype successfully exhibits the design ideas of both the group members and the interviewees. The essence of the design revolves around clarity and efficiency, which allows the users to intuitively navigate the application to suit their needs. The voices of buyers, sellers, casual browsers, and new users are all addressed in the design.
VII. Discussion
A. Summary
Using the method of Rapid Contextual Design, 25 contextual interviews (16 female, 9 male) were conducted. We watched users using the Free and For Sale to buy, sell, and browse items. From this data set we made an affinity diagram from which emerged 6 main areas of interest to our users and thus, by extension, to ourselves. These areas are: organization, privacy/safety, shopping experience, money, communication, and community. Some of these areas already function well on the Facebook platform, but all in all we found users desiring improvement.
We came together to walk our affinity diagram, exploring design ideas and identifying holes in our data. Visioning and storyboarding came next, allowing us to envision how our users could interact with a new buying and selling platform. The personas created (Savvy Opportunist, Reluctant Participant, Altruistic Community Member, and No-Nonsense Consumer) condensed our users into 4 people who we were able to keep in mind as we designed, endeavoring to create an application accessible for a diverse group of users.
As we moved into designing our first prototype we focused on 6 different areas: post submission, search function, notifications, visual clutter, communication, and privacy/safety. We conducted 8 paper prototype interviews and moved on to editing a high fidelity model which continued to incorporate user data and feedback, notably, clarifying button functions and further developing the format of the submission form, the My Activity tab, Triton Trade Messenger, the advanced search option, and the expanded post.
Throughout the research process, user data has emphasized a need for clear organization, a desire to search and find items easily and for items to then have an adequate description providing buyers or sellers with useful information. These needs were addressed through color coding buying, selling, and free posts, improving the search function and making the search bar visible, creating an advanced search option, and making a submission form requiring certain information in each post. Users also want assurance that they are safe as they use Triton Trade, that they can exchange money and trust other users. Accordingly, we kept the link with Facebook, gave each user a profile, and allowed payment options with PayPal and Venmo. Ease of communication and the desire to bid with other users but also privately coordinate prices and meet-ups were also high priorities for users. Therefore, we implemented a comments section on each post for bidding, commenting, and giving advice and we included a messenger function for more private conversations.
B. Problems Encountered
1. Coordinating with COGS121
We unfortunately were not contacted at all by our partner 121 group until 7th week after which they attended one of our meetings. We were able to show them our visioning diagram and talk through our ideas with them but after this our communication was limited to scarce Facebook interaction on a shared Facebook group. This prevented us from true collaboration which means we did not know what programming functions were actually feasible as we were creating our designs. On the other hand, this allowed us to design uninhibitedly.
2. Free and For Sale Administrators
Early on in the design process, we attempted to set up contextual interviews with the FNFS administrators. They instead responded that they would rather just have us send them questions rather than meeting up. After receiving their responses, we did not communicate any further. Near the end of the quarter, they contacted us after discovering our Google Drive folder containing our work, upset that they were not informed of the full scope of our project and claiming that we were purposely deceiving and undermining their authority by creating a real mobile application to compete with FNFS. This led to a rather stressful end to the quarter as they continued to Facebook message our group with complaints and accusations. Fortunately, since their data was not the sort we needed for Rapid Contextual Design, just nice to include, it ultimately did not detract from our design process.
C. Future Plans
In order to continue with the design of Triton Trade, next steps would include further developing our high fidelity model. This means fleshing out all aspects of the design and making screens and specific functions for each button and feature. Features such those under the settings tab and sign-in options are current interests that were not fully developed due to time constraints.
We would next take our current high fidelity design and use a service such as POP to stimulate the flow of our design, and then use this to do our next round of prototype interviews. We would then use this data to make changes to our design and then continue to do one or two more iterations of prototype interviews.
Better communication with our programmers, at this point the 121 group, would be necessary as well to finally create the Triton Trade application.
D. Lessons Learned
Through this research and design process, we learned what Rapid Contextual Design is as well as how to implement it. We discovered the value in performing contextual interviews to gather rich data that showed us the needs, habits, frustrations, desires, roadblocks, tools, and processes of users. We experienced the frustration of cancelled interviews and the challenges of consolidating data and bringing it together to ultimately produce a data-driven design. Through our experience with the FNFS administrators we now know well the importance of informed consent and of having stakeholders invested in your project rather than wary of it. We learned to work well with one another and capitalize on each other’s strength. Through all of these experiences we gained a greater perspective on what it means to do research for data-driven design.
