SupplyEd - App Concept Design
UX Team Design
SupplyEd was a team concept design based on social responsibility. My team decided to tackle the issue of school supplies for teachers.
We were also tasked with picking a major corporation as a sponsor for our app, which would lend to our overall branding. My team picked Target as our sponsor. Through research and synthesis, we came up with an overall goal. “SupplyED is a simple and easy one stop solution for your back-to-school shopping needs all while supporting your local educators.” 2 Week Concept Project
Discovery
My Team
Our team decided to split up responsibilities for the project
Kayla Paredes - Usability Testing Manager, Competitive Analysis, and Visual Design Lead
Scott Moffatt - Project Manager, Information Architecture, and Content Strategy Lead
and Me - User Research and Interaction Design Lead
I took the role of leading the User Research and Interaction Design.
User Research and Synthesis went directly into deciding some of the Interaction Design choices.
I accomplished by tasks using these processes:
User Interviews
Surveys
Affinity Mapping
Minimum Viable Product Matrix
Persona
User Flow
Sketches
Paper Prototypes
Wireframes
…and these tools:
The classic whiteboard
Old faithful, paper and pen
Post-it Notes
Sketch (app… RIP)
Google Docs
iPhone with Sketch Mirror
PROBLEM STATEMENT & HYPOTHESIS
Teachers are underfunded and have to pay out-of-pocket for supplies. They need a way to raise awareness of their funding needs as well as having their funding goals met. With high unemployment 30 million students are currently enrolled in free or reduced meal programs. Teachers and parents are often unable to afford basic supplies.
We Believe that by partnering with ‘Target’ to sponsor our app we can leverage existing storefront of school supply checklist. By creating an app that will enable teachers to create a wishlist from our sponsors products and receive items through the sponsor donated by participating customers who are incentivized by varied offers. We’ll know when this is true when teacher’s wish lists are fulfilled. Our sponsor will see added engagement directed from the usage of our app.
Research
Interviews
For user research, I really focused on user interviews as the main point of interest. My team had a big network of teachers that we knew, and having insight into what teacher’s needs were was important information into our design choices. While we knew we wanted to tackle the issue of school supplies for teachers, we weren’t 100% sure of how to accomplish this goal with a mobile app. First, I created a survey to gather some overall data that would help us in our design decisions. These surveys also helped us to screen who would be interviewed. I created a list of questions that would be used in user interviews. These questions were focused on finding information on what school supplies were needed and how school supplies were acquired. Four interviews were conducted.
Synthesis and Affinity Mapping
Competitive Research was a main point of research. Looking at what was successful for similar businesses was a great way to figure out what features would be useful in the redesign. I looked at 4 different online stores. The Space Needle Gift Shop and Chihuly Gift Shop were chosen for proximity similarity, SubPop Shop and Hot Topic were chosen for similar items sold. I made a list of features employed by all the sites, and ranked how well these features were implemented on the sites.
There was a lot of emphasis on the IA of the redesign. One of the major pain points of the current website was bad navigation, especially the amount of categories, and how they labeled their search filters. In order to create a better experience, the IA needed a lot of work.
MVP
Affinity mapping allowed me to create a list of features, and these features were put into an MVP matrix. Initially, a map was an important feature, along with a wishlist and teacher profile. After more research and different iterations, the map and decided Teacher 2 Teacher (which would end up being the bulletin board feature) and Donations to teachers were much more important. This also is how the final “Token” idea was arrived upon.
Interaction Design
User Flows
In order to figure out what screens would be needed, I started our User Flow. My first iteration of the user flow was having a teacher make a wishlist and ends with having the wishlist fulfilled. That basically stayed the same, although our definition of “wishlist” fulfilled went from a 1 item to 1 item donation system to having a funding goal based off of a wishlist idea (this will be expanded on later). Also, the steps in between greatly changed.
Sketches
Using the user flow as a guideline, I started to sketch out screens that we would need for a user to complete their task. This was done on whiteboard so I could quickly get my ideas out, and change easily. It also allowed for my team members to add their insights, such as navigation schema. As a team, we also did a design studio to come with an idea for the bulletin board feature. Some of the key features I sketched out was how different elements would look in list items and how the token system would work.
From sketches I had a good idea of how I wanted the screens to look. I made some paper prototypes so we could do some first rounds of usability testing and change based on what we gathered. The teacher path and bulletin board path had good usability in our user flow from our first few usability tests, but there was a lot of confusion in the parent flow, and needed a few different iterations. I did a few more in paper prototypes before moving to wireframes where we iterated that flow more.
Wireframes
Usability tests were done with the paper prototypes, and produced low System Usability Scale scores. We did get valuable feedback for where people were confused, however, and were able to start iterating from there. For example, it was unclear for some what the correct way to donate using the tokens, and it was unclear who they were donating to. From the paper prototype iterations, I started digital wireframes. Along with insight from Information Architecture, I could start making it clearer to the user how they should complete our tasks. I made clickable prototypes from the wireframes, and usability testing was done by UT Manager.
High Fidelity Mock-ups
From the wireframes, I made some medium fidelity mockups, in order to make more clearer our content, such the token button. SUS scores were up a little bit after more Usability Testing. We still had some issues. Our biggest iteration was doing onboarding screens, which helped, but also we still were having troubles with making our token donation screen fully understandable. We did a few iterations by adding better headlines, moving/removing buttons and other items on the screen, and users were finally able to get through our tasks with much ease, and our SUS scores skyrocketed. Visual Design took these and made our high fidelity mockups for every screen that was in wireframes and medium fidelity prototypes
What's next…
This project showcases my ability to take research and synthesis and directly apply it to interaction design. Interviewing teachers gave a lot of insight into issues they are facing, especially when it comes to school supplies. My team did face issues in coming up with our initial problem statement and hypothesis, but through research and synthesis we agreed on a solution. There are a few more features my team would like to implement in the future, mainly really looking at making our bulletin board feature more flushed out.