For my Design for Usability class, we were assigned a long-term project that explored the several project phases for creating, researching, prototyping, testing and ideating a Human-Centered design.
This project was completed with my 2 classmates, Sneha & Hannah.
I will briefly go over each stage of the process our team undertook below and include presentations, media, and materials we created to help guide the process.
Brainstorming
Every great idea begins with brainstorming. In our case, we wanted to brainstorm an idea for our project as a group. I always like to start with the following statements to guide my idea generation:
“What do I find annoying about the things I have to do everyday and the systems I have to interact with?”
“I wish that ______ existed so that doing _____ wouldn’t be so hard”.
“______ is a big problem in our society, I wonder how we could make it better.”
With these things in mind, our team set out to brainstorm ideas in 3 categories:
- Societal & Personal Problems to Solve
- Things we really wanted to make
- Areas we have wanted to explore
After 3 minutes of initial brainstorming we gave ourselves 1 minute each to pick our top 3 ideas from the long list, then repeated the process again with the remaining choices.
Our final shortlist was:
- Help people have better access to information
- Promote in person communication and meetings
- Help promote vibrant streets and communities
We then used the How Might We method to break down different aspects of the problems. The How Might We’s for our final choice are listed below (we selected the one in bold).
- HMW: Help adults in NYC access information about important social services such as food stamps, health care, housing etc.
- HMW: Help active and engaged adults participate more fully in their local community/neighborhood
- HMW: Help disabled individuals access information about travel opportunities throughout the city.
- HMW: Help citizens better access information about local politics and how they can participate in the political process
- HMW: Help new residents to NYC find information about interesting events and activities that pertain to their interests.
- HMW: Help promote the sharing economy by helping people access information about how to find and share items that are used, discounted, free etc. and services.
Our final choice to explore was:
How might we help promote the sharing economy by helping people access information about how to find and share items that are used, discounted, free etc. and services.
To further expand how we were thinking about the problem, we then broke down this last question and tried to ask it in several different ways to guide our how we will phrase our design question/challenge,
- Emphasize Good: HMW use the items as a tool to promote more trust and value in the sharing economy
- Remove Bad: How might we ensure the quality, ease-of-use, accessibility and user-friendliness of on-campus sharing services?
- Opposite: HMW make trading or donating items be valuable or rewarding experience?
- Question Assumption: HMW observe whether the items given away have been useful or wasted?
- Adjectives??? How might we make sharing items on campus simple, fun, engaging and useful vs complicated, boring, too hard to finish, and not useful for most people?
- Unexpected Resource ID: How might we leverage faculty, staff, administrators and already existing campus resources/networks to make sharing items easier?
- Analogy from need/context: How might we make sharing items on campus more like a dating website/app, or a bazaar?
- Play POV vs. challenge: How might we make it so that student wants to share anything extra because it is so easy/fun/rewarding?
- Change status quo: How might we make sharing items simple and elegant vs. confusing?
- Break POV into pieces: How might we help students access free items on campus? How might we help students share free items they have? How might we create a marketplace for sharing where either side can be benefited?
To complete the brainstorming portion of the process (at least the first iteration) we rephrased our final choice as a challenge and a Point of View Statement to inform our user-research and prepare us to identify user characteristics of people we wanted to interview.
Chosen HMW: Help promote the sharing economy by helping people access information about how to find and share items that are used, discounted, free etc. and services at university.
Rephrased as a Challenge: Facilitate on campus sharing economy to assist people both find and share/exchange/trade items and services
Point of View Statement:
A young college student, April is 23, she is from Iran and studying fashion at The New School. She has left over materials, clothing and items she wants to give away, donate or trade because she has limited space at home and can’t continue to store all the extra items. She also needs some extra money to buy more materials, or would trade for new materials she could use for new projects.
She has trouble finding a centralized way to advertise these items on campus. She has tried hanging up flyers in the University Center where most of her classes take place, but no one has contacted her. She wants to reach out to students from other programs and other buildings than her own to spread the reach.
Interviews
Using the characteristics identified above we wrote a screener to help us make sure we were interviewing the right people. Our screener allowed us to rule out people who did not fit the profile of those we wanted to research.
| Who do you want to talk to? | What exact criteria will identify the people you want to talk to? | What screening questions will you ask? (Questions shouldn’t reveal “right” answers.) |
| Physically able New School students of any gender and nationality. | New School Student, Looks physically fit enough to carry materials |
|
| Students who believe in the sharing economy, trust their fellow students, and want to save money by sharing/selling/trading extra project materials and goods | Students who typically have materials/items to share, |
|
| Students who are familiar with digital technologies (smartphones, laptops) and are comfortable conducting business over the internet. | Students who own and regularly use a smartphone and/or computer, students who have used e-commerce before |
|
| Students who have a mid-high level of English literacy and are able to read a simple and clear digital interface. | Students who self-rate their English as good/excellent, students who feel they can read most current commerce sites in English (amazon, google shopping etc.) |
|
We also generated a script for our interview so that we could use consistent introductory language explaining the project and question wording throughout.
You can view our full script at this PDF.
Insight from our Interviews
We also did on-site research to get an understanding of how students were using New School spaces around campus using the AEIOU method of site research, pulling out things that were happening using the following sensory framework:
- Actions
- Environment
- Interactions
- Objects
- Users
Personas
After collecting our interview and AEIOU research into a compiled document, we were ready to start analyzing it.
In order to figure out the important goals, motivations, and needs of the people we talked to, we had to see where their behaviors overlapped. If we could find clusters of behaviors among those we talked to, we could then design a solution with those behaviors and associated goals in mind.
The end goal for this process is to create a persona, a fake character based on observations, motivations, and behaviors of the real people that we interviewed or researched. A persona is a type of model, meaning that it helps us to represent complicated information with a useful abstraction allowing us to find insights, correlations, and relationships.
To do this we used the following steps:
- Looked for behavior clusters among our interviews based on the questions we asked them (e.g. someone who never buys materials for projects, avoids doing so by making digital projects).
- Used these clusters to form the basis for behavior archetypes, a rough sketch of a type of one type of behavior or personality from our behavior clusters (e.g. the saver, the perfectionist, the sharer)
- Used these archetypes to help us build a more complicated persona that represented a mixture of these behaviors. (e.g. Janet is 75% a saver, 25% sharer).
- Used Alan Cooper’s method for creating personas to understand which primary, secondary and other types of personas were needed and identified a persona for our primary focus (e.g. the user, the administrator of information, the friend of the user who benefits)
We created three different personas using this method. Below is a sample of one of them, Bob.
With these personas in hand we were more able to empathize with the needs, wants, goals, motivations and pain points of our target users, allowing us to start framing a solution to answer our earlier design challenge.
After another round of brainstorming how to address these issues, we arrived with a design statement for a high-level idea of a solution we wanted to try prototyping.
Our Solution will Focus On:
- Facilitation of information
- Central Place/system for all sharing needs, not scattered among different digital platforms
- Digital space connected to physical
- Overcoming trust issues about sharing and ROI
Issues to Address
- Real-time and historical Info
- Inventory of items. (variety, layout)
- Facilitating communication
Solution: Freebox 2.0 will facilitate on-campus sharing by providing info about what/how/where to find/share materials in an efficient, timely, and secure manner.
Scenarios
Now that we had a potential solution to test out with users, we had to start building a prototype. As I’ve learned throughout my time here, prototypes are best when they attempt to solve questions in a certain area: how solution will fit into users life, how solution looks/feels, how solution will be implemented. Given the nature of our research and the early stage of the process, we chose to only prototype the user-interface as to see how our solution would work in a user’s daily life. We didn’t worry about the look/feel of the product or implementation issues beyond those necessary for supporting our user-testing.
Before building out the actual solution, we needed to figure out how our users might be using it in their everyday lives. We don’t have any users just yet, but fortunately, we have 3 amazing personas that we can harness to help us imagine how our solution will work.
With these personas in hand, we started to develop scenarios, storyboard like representations of how our product would work with different types of users.
Requirements
These allowed us to start thinking about the core functionality or requirements of our solution so we could start building a prototype.
We at first decided we needed both a website and mobile app to support different types of users, but due to time restrictions, we later moved on with just user testing a mobile version first.
First Prototypes
For our first round of prototyping we decided to create a simple mobile website/application (at first we weren’t sure which it would but later settled on app due to usability issues).
Before we created any interfaces, we made a map of how our app would be structured to help us imagine the flow of the pages.
We then built a black/white/grey wireframe of our mobile app using Sketch. We then used MarvelApp to make it interactive and shareable for user testing.
Check out our first interactive wireframe here:
https://marvelapp.com/gia7gd?emb=1
User Testing
A big part of this project was learning how to conduct useful user tests, meaning that the test is structured in such a way as to obtain maximum feedback from participants without any bias. This is accomplished in several ways, however we were instructed to follow the process outlined in Handbook of Usability Testing: How to Plan, Design and Conduct Effective Tests (2nd Edition) by Jeff Rubin and Dana Chisnell.
I was very excited about this part of the project and volunteered to focus on writing out the test questions using the described methodology. Although the deliverable was just questions for interviews, I found it much more useful to follow the book’s steps for creating a full testing plan, as each step leads into the other and helps to define what is needed.
At the end of this test plan, we had important tools and guidelines to help us conduct great tests and receive feedback to guide our further iterations of the app. You can see our full testing plan here: Freebox 2.0 Test Plan
Note: After this plan is when we decided to drop web-platform for testing due to time constraints, so testing questions and tasks for web are included but were not tested.
Finally, we defined 7 questions we wanted to be able to answer after our user tests:
- Where do users go to search for the mobile menu?
- How easily and successfully do users navigate site using the provided menu?
- Do users use the bottom navigation links on mobile pages that have them?
- How easily and successfully can users post a message to the message board?
- How easily and successfully can users respond to a message on the message board?
- How easily and successfully can users check their current messages?
- How easily and successfully can users set, view and dismiss notifications?
We also created three really useful tools to help us collect consistent information and found an app that allowed us to record the users taps on our test app & their face while doing so.
| Task | State | Successful Completion Criteria | Benchmark |
| Open the mobile site (link provided) and check the Free Box stream at D12. | Mobile Site with Home Page listing Free Box Streams and Hamburger Mobile Navigation Menu | Participant finds Free Box Stream on Home Page and clicks on it | Participant taps on Free Box stream on first try |
| Navigate to the message board. | Message Board Page with Displayed Messages and Message Post Section | Participant finds the Message Board page, navigates to it. | Participant navigates to Message Board on one tap. |
| Post a message to the message board. | Message Board Page with Displayed Messages and Message Post Section | Participant posts a message. | Participant taps on correct post message section First Time |
| Respond to an already posted message. | Message Board Page with Displayed Messages and Message Post Section | Participant replies to an already posted message. | Participant taps on the reply button of an already existing message on first try. |
Sample from our Task List
Task List for User Testing: List of tasks and desired outcomes to help answer questions above. Used a google form to record our information. We created two versions of this with the questions in different orders so that we could eliminate chance of users figuring things out only because tasks took place in a certain order. You can see the full list in the above test plan, or check out our recording form here: http://goo.gl/forms/Nzzsx5GsQi.
Usability Preference Survey: A short survey about overall usability of site. Made sure to use lots of multiple choice questions, scales, ratings etc. so user wouldn’t find too annoying to take. Also helped us create really nice visualizations with one-click, so we could look for relationships in the data. Check out the form we used to record answers here, questions are also in above test plan: http://goo.gl/forms/SvV8s3xVUt.
Screener: A short statement to be read before every usability test so that we could make sure we had a consistent explanation for every user of what they were doing, why, and how we wanted them to speak aloud as they went. (see beginning of the task list recording form, we put it here to make it easier to not switch between documents)
Feedback from int
Feedback & Recommendations
After completing our user tests, this project was theoretically over, however we had several great results from our interviews that allowed us to understand what was wrong with the design and start generating recommendations for how we might reframe our solution and make interface/content changes to increase usability.
We collected both quantitative and qualitative feedback about usability issues and time-on task using the tools outlined above.
Here are some examples of our different types of user feedback about the Message Board:
Check out this video taken with LookBack the app we used to record our user-testing sessions.
Identified Usability Issues on Message Board
- Expanding messages was a pain point for many users (3:36 in video)
- Confused about how to reply to messages when not readily apparent from beginning
- Confused about what the icons mean, no tags to explain them (free, swap etc.)
From this feedback, we were able to make some recommendations both about how we should conduct testing in the future, and critical things we needed to change for the next round of prototypes and tests.
Implications of Results for Next Round of Prototyping
Solution: Mobile website or an app
Need to be more clear on which solution is best. Conventions must be observed for whichever platform is chosen.
Iterative prototyping poses challenges with live prototypes
Can be helpful for time purposes, but can be difficult to make quick changes that work correctly. Do more users in between tests next time to alleviate this.
Google Forms
The test design was successful to collect data. However, it was easier to read the preferences quiz aloud than have user take it themselves. Combine screener into task sheet to simplify.
Conveying setup of physical space livestream
The live stream wasn’t connecting for people in our introduction to the project. After further explaining post-testing, they better understood.
Recommendations for next round of prototyping
Standard app conventions
Make sure to pick standard app conventions and use them to make navigation easier (menu direction, tables in menu etc.)
Streamline menu page
So that all items are the same; eg. text, no top icons for alerts. Use same red circles to show updates to status.
Messaging for different sections of the site
“Inbox” was very successful rapid change over “Messages”. Look at changing “Freebox streams” to just “Freeboxes” or “Boxes”
Moving Forward
Although this was the end of Freebox 2.0 for Design for Usability, Sneha and I had a great opportunity to continue with the next round of prototypes in our Mobile Media class which focuses on UI/UX design.
We have since made several improvements to FreeBox 2.0 that can be read about in the Mobile Media category of this blog.
To jump right to our most current design for the app, you can check it out on Marvel. This is a combination of a look/feel prototype and a usability prototype as we have worked out many usability issues and want to start to bring in design elements for testing as well.
After the last round of tests with Mobile Media, we scored a 4/5 on how easy app was to use, a huge increase since the version portrayed in this blog post.
https://marvelapp.com/11fa26d?emb=1
At the end of the day, this was probably one of the most useful projects I have undertaken at Parsons so far as I finally had a chance to participate in the design process from start to finish and was exposed to tools and frameworks along the way that I will be able to harness for problem-solving exercises, developing solutions, and generating effective testing environments.After the last round of tests with Mobile Media, we scored a 4/5 on how easy app was to use, a huge increase since the version portrayed in this blog post.
To see our in-class presentation for this project, see below:
Dana Martens 
2 thoughts on “Paper Me Usable | Final Project Write-Up”