User Research
Speedy Eights
Storyboards
Paper Wireframes
High-Fi Mockups
Overview
Key User Actions
Sitemap
Wireframes
Value Proposition
RESEARCH FINDINGS
In order to make sure our product resonated/ matched our target users, we conducted a series of design sprints to determine their scope, needs, priorities, and design trends. We conducted a series of interviews with existing users (both active and inactive) and competitive analyses of similar products in order to understand how to better support our users. These helped inform our value proposition boards.
Takeaways from user research:
-
Participants had a hard time understanding how to request and sign up for a session
-
Learners felt like there was not much community amongst themselves
-
There was no ability for tutors and learners to communicate outside of sessions.
Value Proposition Boards
Based on the research findings, we created value proposition boards to help us personify our users. We identified 3 potential users: high school students, potential teachers who want to become tutors, and college students who want to become tutors. From our user research, we decided on specific goals that each user might have and the gains, pains, tasks that they might have. We also looked into products and services we could create in order to create more gains for them as well as relieve their pain points. These value boards served as inspiration for Speedy Eights.
SPEEDY EIGHTS
In order to come up with ideas for what should appear on a product's interface, we did a Speedy Eights sprint. A group of four of us came up with as many ideas as we could in 16 minutes for what our interface might include. After that, we all voted for our favorite ideas using stickers on Figma and came up with a compilation of eight ideas that had the most votes. These eight ideas helped serve as inspiration when brainstorming our key user actions. See the document below to see our combined Speedy Eight boards.
User Research
Paper Wireframes
Storyboards
Speedy Eights
Overview
High-Fi Mockups
Value Proposition
Key User Actions
Sitemap
Wireframes
Key User Actions
From our user research, we brainstormed the key actions that a user may take on the site as well as what problems/ issues they might face when performing these actions. This exercise made us put on our thinking hats in order to come up with ways that a user may utilize/ use the site. These actions helped with coming up with scenarios for our storyboards. Take a look at the image gallery above to see the actions we came up with.
STORYBOARDS
Once we finalized the key actions, we constructed storyboards that simulate possible scenarios in which a user might perform those actions. The storyboard helped us figure out the most important requirements in the making of our site map.
Site Map
Key user actions were translated into necessary features of the web application and were then placed as branches of the site map. We deiced to have some features like the signup, frequently asked question page, volunteer, about, and testimonials page viewable to the public. We chose other features like signing up for sessions, becoming a tutor, and a profile page to be accessible when logged in to make sure our sessions are safe from malicious users who may cause disruptions in sessions or discussion forums.
Overview
Paper Wireframes
Storyboards
Journey Map
User Research
High-Fi Mockups
Value Proposition
Key User Actions
Sitemap
Wireframes
PAPER WIREFRAMES
We then created paper wireframes and uploaded them to Figma for critique upon what aspects could be improved before transforming them to digital wireframes. We utilized the site map to wireframe the most important screens and then slowly went down to wireframing the pages with lower priority. In this gallery view, you can see our paper wireframes for the landing page.
WIREFRAMES
We then constructed wireframes for the entire web application. These wireframes helped with visualizing the visual hierarchy and layout of each page without focusing on the details. We experimented with several iterations included a card and swipe view but ultimately decided on going with a list view as it allowed for information to be presented in a cleaner way. Feedback from the paper wireframes was taken into account when designing digital wireframes. These wireframes served as a draft for our high-fidelity mock-up screens.
HIGH-FIDELITY MOCK UPS
We then created high-fidelity mock-ups of key screens in our app. We performed competitive analyses again to help design these high-fidelity mockups in order to make them look visually appealing and follow design trends in the industry to make them appeal to the target users.
REFLECTION
This project was conducted during the COVID 19 pandemic so everything was conducted online so it was hard to get everyone together at one point so we ended up dividing the project into specific subteams focused on different parts of the design. I was involved in all of the work shown in the previous pages presented in this portfolio. All designing and brainstorming exercises were done on Figma.
One of the challenges with this project was that we hired an engineering team right as we got started on designing branding and different pages for the web app. We had just finished conducting user research through interviews and surveys. The engineering team was constantly on their toes waiting for us to hand off our designs. We had to create a schedule on what was going to be released to them each day to keep us accountable on track to meet their needs.
If I had more time, I would have added more time towards design critique/ iterating upon designs. With our tight timeline, we would send things off to the engineers and later end up changing up some details and ended up having to tell the engineers to change things as they were engineering things.
Despite these challenges, however, we believe that we succeeded in this project in three ways: 1. We created a solution that was innovative, 2. captured all the user's motivations and mitigated some of their pain points, and 3. leveraged volunteers and free resources to safely support the growth of students seeking aid with math..