Industry Design Externship: College Thriver™
Delivering Gamification Concepts to an Educational Preparation App
Scroll ↓
College Thriver’s™ mission is to bridge the equity gap for students of color by connecting them to timely college and career preparation tools and resources through technology. The steps and activities to help these students reach the goal of acceptance into college has already been designed into an app. However, the app needed to be more engaging so students would have the desire to continually use the app.
To solve this problem, I was part of a UX team that worked closely with the founder of College Thriver™. Her first idea was to add a type of virtual store to the app in order to use gamification to make the app more entertaining for students. We used this idea as our starting point to find the best solution to make this educational app more exciting.
The Problem
As a member of a four person UX team, my role was primarily focused on the synthesis of the research and testing, I took the lead to design the user flows and style guide. Our team, with none of us knowing each other previously, was given four weeks to help College Thriver™ improve their app.
My Role
Project Plan
Conducting & Synthesizing Research
Our team conducted both User Research and Competitive Analysis to find the best solution for the College Thriver™ app. Our objective was to learn what users of the app would find entertaining and useful, as well as what existing design aspects would be valuable to incorporate into our designs.
Interviews were conducted with five high school students of color who are preparing for college. We found these participants by using our social networks and family ties. My team members completed the interviews and I synthesized all the notes and findings into three main takeaways:
Physical rewards are preferred over virtual. Access to events, courses, or meetings with experts were intriguing to students.
Social engagement within the app would cause students to use the app.
A game type atmosphere, such as a virtual world or an avatar was exciting to users.
User Research
Four different educational or task oriented apps were studied in our competitive research. These apps were Forest, CircleIn, SoloLearn, and Habitica.
Competitive Research
In the Forest app you grow a virtual forest that eventually can be turned into planting trees in real life.
Habitica creates a virtual world with an avatar the user can customize.
There were some design heuristics found in multiple apps that we felt were important in the creation of our game. Virtual awards, such as upgrading an avatar or simply earning a badge, was most commonly used to motivate users. Being part of a team or interacting with others through the app seemed to help keep users accountable.
Both forms of research made our team excited to incorporate our findings into our user story and designs. Unfortunately, after we presented our findings to the founder at College Thriver™, we did not receive much feedback on our research. Instead we were asked to focus on creating some form of video game, preferably with a space theme. She did not love the idea of including a social aspect to the app, which left us as a team unsure what to do next. We wanted to make our client happy, but knew the importance of incorporating the users’ wants.
We decided the best way to move forward and incorporate the client’s ideas with our research was by first creating a user flow and drawing out some sketches. I was in charge of creating the user flow, which regularly changed throughout the entirety of this project as we shared our sketches and received feedback. Shown here is one of the first drafts of the user flow.
User Flows & Sketching
Using the user flow as a base, each member of the team sketched out their ideas. It was great to see everyone’s different ideas and their interpretations of how to include the desires of both our client and the users. We then decided which aspects of each sketch we wanted to incorporate into the wireframes of our designs. Ultimately we created a roadmap game idea with space theming to present to the founder of College Thriver™.
When we presented our ideas through our sketches to our client she appreciated the vision and overall flow of the app. She also loved the idea of having an avatar to represent the student in the app. However, she informed us that she wanted the students to feel like they were “getting away” while using the app and felt as though an island theme would be better.
I personally was a little frustrated at this point because I felt like she wasn’t acknowledging what the users wanted and instead focusing only on her vision. Initially I was unsure how to make both work in our project, but by relying on the other members of my team we were able to figure it out one step at a time.
Client Feedback
We went back to the drawing board and came up with new sketches to fit the island theme. The user flow was also modified to better fit in with the new theme and to incorporate the avatar more into the overall flow of the app. Again, we brought all of our sketches together and decided what elements to incorporate into our low fidelity wireframes.
At this point we only had a week left until our deliverables were due. Much of our time had been spent trying to incorporate changing ideas into our final work. We decided to have an open and realistic conversation with our client about what we could honestly deliver to her by the end of the week. She was understanding and we all agreed that fully developing a complete wireflow with a couple pages of high fidelity visual design examples would be helpful for her company moving forward.
Round Two
Our biggest concern about the overall use of the app was creating a game that would help motivate and propel users forward, and not an obstacle hindering them from completing needed tasks to prepare for college.
We were able to design a game that included game aspects such as the avatar finding the treasure chest with the academic task inside. Also collecting coins, health, and clothing points in the gamification of this app allowed the users to have multiple small successes while using the app that would encourage them to continue forward.
Wireframes
Seen above are more wireframes including the progress and status screen, as well as where the user would go to upgrade and modify their avatar. This was included because in our user research we found that users would find the personalization of an avatar fun and exciting in an app such as College Thriver™.
Our team was able to make the time to conduct three user testing interviews using a simple prototype of the low fidelity screens. A test script was written prior, and feedback from these interviews were given in a report. We learned of three major issues that would need to be addressed in moving forward in high fidelity designs:
Locating in the app where users can go to make changes to their avatar is confusing.
It was initially unclear how to access the previous activities that had already been submitted and make edits.
The purpose of the “shark attack” pop-up between islands was unclear.
In our report of the usability testing findings, we included some solutions to these problems such as being able to tap on the avatar to access the avatar page, and completely deleting the shark attack pop-up game and possibly saving it for a future app upgrade. These ideas and others would need to be investigated deeper, and then tested in the future to ensure best app success.
User Testing
High fidelity designs with the modifications learned from the user testing would be the next tasks to complete. However, due to time constraints the team was only able to complete the low fidelity prototype and a style guide. As an additional service to the client, I worked independently from the team to create a few visual design pages to deliver to the client.
In the final designs we needed to incorporate College Thriver’s™ primary purple color and UI elements they have already established, but then add some complimentary tropical colors based on our new theme. Below are examples of a possible splash page as well as the homepage and progress page. While I was creating the high fidelity screens it was important to me to keep the app bright, fun, and youthful since the primary users are in high school.
Next Steps
I helped complete this project in less than a month with three other designers I didn’t know previously. We were able to quickly come together and collaborate on the designs with very little problems. Delegating the work was key in getting everything done in a short amount of time.
Overall this experience taught me so much on how to work with leaders and stakeholders in a company. Oftentimes they have great ideas, but sometimes those ideas do not always work the best with users. Learning to find the middle ground of giving the client what they want while also honoring the user is difficult, but when achieved is extremely rewarding.