.png)
Tough Walls
Tough Walls is mobile app concept born out of a passion project to change the approach around alternative education. This is a teaching and learning platform meant to engage students who are at-risk and need more motivation to invest in their education. Many current educational platforms do not target this specific learner group.
Tough Stuff fills this gap by presenting learning in a more interactive format that focuses on gamifying the lessons and sharing their artwork Lessons can be self-paced or live and presented in a more interactive interface imitating a game world so that it doesn’t look like a traditional learning management system.
Some details in the case study may be vague. All information in this case study is my own and does not reflect the views of any particular school district or program.
my role
UX Designer
Timeline
4 weeks
type
Mobile app concept
skills
User Research
Interaction Design
Visual Design
Highlights
Tough Walls focuses on engaging students by gamifying the lessons and retaining engagement by allowing students to share their work. Students are drawn into the platform through its visual design, imitating a more interactive game-like interface rather than a traditional learning management system. The platform will first center on art lessons, featuring BIPOC artists that connect to the identities of the students in the target population.
Note: The content for this platform will be essential and needs to be further researched. The case study will focus on the user experience.
.png)
Revitalizing education for students in alternative programs
Context
During my time as an educator, I taught for 3 years as an art teacher at an alternative program. Alternative programs serve students who are not achieving at their potential for a wide variety of reasons, including behavior and/or attendance problems, as well as students who have been involved in a serious disciplinary action that warranted a recommendation for expulsion.
While at alternative programs, I saw many students who had grown defiant or tired of the education system. At this point in their educational career, many students had given up on education as a priority. The traditional educational system has failed these students.
Problem
Many digital education products cater to the typical student. Traditional online learning platforms like traditional schooling systems will not work with students at alternative programs.
Students in alternative programs make up only 1% of the student population in the United States, but that 1% equals 369,000 students. That’s 369,000 students who deserve as much attention as the other millions in a traditional school setting. How might we motivate disheartened students and encourage them to invest in their education again?
Narrowing the target user and time frame
Persona
This concept will focus on how the platform will engage and retain our student persona, Anthony. This persona is the culmination of observational research gathered between myself and two other teachers. This persona will be used to guide all design decisions as well as directions in the product going forward.
Anthony’s persona
Anthony's school journey
By analyzing a user journey of Anthony’s four year high school career, there is a huge decrease in motivation between 10th grade and 11th grade.
.png)
Sample journey map of Anthony's 4-year high school journey
A single year of school
Anthony is also much more motivated at the beginning of the year. However, it’s harder for him to maintain that motivation and continue his work by the middle of the year. In addition, these feelings compound during his sophomore year because he realizes he still has two more years of high school to complete, which seems like a lot. The work he puts in seems like too much compared to the reward.
.png)
Sample journey map of Anthony's school year
Opportunities
01
The solution will focus on reaching Anthony at the point when his motivation seems the lowest and he doesn’t have the desire to continue to learn.
02
I am not going to focus on the onboarding part of the flow as there is a high chance that Anthony will sign up and log into the app because it’s necessary for the school, especially at the beginning of the year. The difficult part will be to ensure Anthony continues to engage with the platform.
Thus, this solution would best be introduced in the middle of the year during his sophomore year when Anthony has lost the most motivation.
Mapping out the journey
Anthony's user journey
I had a general idea of how Anthony would move through the app.
Sample of sketches
User flow
Thus, the overarching flow could be categories into three main phases: onboarding, completing the lesson, sharing artwork with a focus on the latter two flows.
Preview of overarching flow
Narrowing down what the tool could solve for
Three guiding principles
01
Centralization
Users need one central place to find everything they need about test accounts.
02
Ease of use
User need an easy way to create test accounts with the attributes they need.
03
Maintenance
Users need an easy way to track the test accounts that have been created.
Focusing the target audience to less technical users
Casting a wide net
Two categories of users emerged from the research. By focusing the tool on a less technical user, we could design a tool made for a wider audience.
Test account tool scope of audience
Analyzing the competition
Questions to answer
There were three overarching phases to the flow but I wasn’t exactly what the interactions would look like. I conducted a competitive analysis of other mobile games and learning platforms. I assessed the following in my competitive analysis:
- What does the home screen look like? What components were necessary on the home screen?
- How do other mobile games and learning platforms engage their users? What gamification principles are used to ensure users complete lessons?
- How do learning platforms retain learners and ensure they return to the platform?
Home screen
Because I wanted the interface to appear more game-like, I drew inspiration from mobile games such as Behind the Frame, Jenny LeClue, and Tsuki Odyssey.
I made note of the following patterns from the other mobile games and incorporated them into Tough Walls:
- The games would have characters collect information and put artifacts into a journal or sketchbook. Students using Tough Walls could complete lesson challenges in their sketchbooks.
- Artwork would be displayed in a gallery-like format. Tough Walls would allow students to view all their artwork in a gallery like format.
- Avatar profiles would appear in the corner of the screen so the user could see their character’s xp and level, making mental notes of their progress. Tough Walls would display the student’s avatar like a game profile, allowing the student to also track their character xp and level.
Preview of inspiration notes for the home screen
Engaging and retaining users
I focused on principles of gamification in mobile games as well as other learning platforms to see how I might use those principles to engage my users during the lesson completion interaction on the app.
I also looked at other learning platforms to see how they retain their learners. While referencing the persona, I looked at social media platforms such as TikTok and Instagram in addition to current mobile learning apps to see how they get users to return.
By looking at patterns across other apps, I felt it was most important to include the following to engage and retain the user:
- The ability for students to share their artwork and show off their virtual spaces.
- Instant positive reinforcement and a way to track their own progress
I wanted to incorporate aspects of gamification in the lesson interaction. Providing small victories and motivating them towards their larger goal is important.
In addition, students need an extra level of social connection to feel like they belong. By allowing them to share their artwork and interact with each other through a digital platform, they will be held accountable for completing their challenges. Students should be given opportunities to foster self-respect to succeed.
Duolingo
The progress bar at the top indicates how many you have gotten correct so far (streaks - 4 in a row).
You receive instant feedback to check your answer and have opportunities to correct yourself.
A quick summary of your accomplishment is displayed at the end.
Complete challenges to get higher up on the leaderboard.
Nearpod
Instant feedback to check your answer.
Instant positive reinforcement after getting the answer correct.
Ability to share class answers.
DiY
Acquire gems and xp points for completing challenges.
Buy items from the store with the gems.
Share your artwork and get comments from other users with like-minded interests.
Mimo
Progress bar at the top
Instant positive reinforcement when you get the answer correct.
.png)
Community aspect of quickly sharing stories and reels with friends, allowing users to get that instant connection to each other.
Buy items from the store with the gems.
Immediately post art challenges.
PicsArt
Set up art challenges where users post artwork and vote on their favorite artwork.
The best artwork will gain more exposure by appearing in the Winner’s Gallery.
Finding the balance between learning and gaming
Introduction
Using what I noted from the competitive analysis, I began sketching out different ideas for the home screen, the completing the lesson interaction, and the sharing the artwork interaction.
Deciding the layout
I explored the possibilities of a horizontal vs. a vertical layout.
I ultimately settled on flipping between the horizontal layout and the vertical layout. It’s not ideal for the user experience, but each layout was necessary depending on what the user was doing in the app:
- The horizontal layout would only be used when students were completing a lesson.
- The vertical layout would be used for everything else.
Horizontal layout
More game-like experience
Present content in a slide format which is normally how teachers present content so it will look familiar for students and teachers.
It might be hard for students to utilize some of the social interaction features. You can’t reach all parts of the phone screen with one hand.
Vertical layout
Read information more easily and scroll down to view content.
Easier to touch every part of the screen with one hand.
It’s not conducive to making lessons and it’s not a familiar format for teachers when presenting content which is something that should be taken into consideration if this platform were to scale.
Preview of sketches for the home screen
Wireframes
I explored different possibilities of what the home screen, the completing the lesson experience, and the sharing the artwork experience would look like.
Home Screen
I explored two options for the home screen and I chose Option B because it made the most of the screen space that was available while still allowing students to display their artwork and share it.
Options for the home screen
Completing the lesson
Based on the competitive analysis, I tried to incorporate multiple areas in the experience when instant positive reinforcement could occur.
Sharing artwork
The competitive analysis revealed that it was important that students share artwork and interact with each other to retain their engagement. I explored different options for this experience.
I chose option D because it made for the most seamless user experience, and it utilized the available screen space the best to maximize readability. I didn’t think the other three options were optimal for displaying the work by having it appear on a smaller phone screen. By also visiting other student spaces, an extra personalization factor could be added by allowing students to customize the background or interface of their home screen.
Options for the sharing artwork experience
Imitating a game-like surface
Brand direction
Tough Stuff’s branding was focused on Anthony’s interests. I focused on what art styles and artists interested Anthony. Anthony gravitates toward street art, contrasting colors, and an urban aesthetic. I leaned towards making visual design choices that displayed these visual motifs.
Moodboard
Logo
The logotype follows the urban retro aesthetic of the visuals while using a simple bold font to emulate the logos of many game studios.
Style guide
The color palette was largely inspired by the reoccurring red and blue themes from the mood board inspiration. Red is a favorite color for many students so I knew it would be necessary.
Because a portion of the experience would all happen within a sketchbook, I wanted to use a handwritten font. To increase legibility, I used a sans serif font from the video game I took inspiration from for the body font.
Style guide
Elevating learning experiences in the final designs
Things to consider
The final product focuses on an engaging lesson experience incorporating elements of gamified learning and instant positive reinforcement with a community component added to increase user retention.
These were some of the things I kept in mind while creating the final design:
- The visual interface has to connect back to Anthony as the target persona.
- I want to create a more game-like experience without throwing out some familiarities of learning management systems altogether so that it would still be familiar for teachers to use as well.
- The experience of the lessons itself would be engaging. Still, the added component of exploring other students’ studios would help keep students accountable for coming back to continue their challenges and show off their artwork.
Introduction screens
Completing a lesson screens
Sharing artwork screens
Next Steps
01
Since no testing was done, getting student feedback on this product would be important to make the experience as seamless as possible. Getting students to test the product would be nice, but it is also very hard to do that as permission would have to be granted, and I am no longer a teacher.
02
I completed a lot of research to understand the problem space and leaned on a lot of past experience and the experiences of the colleagues I spoke with. However, getting more teacher feedback on the final product would also be good. I created a teacher persona that helped me decide what direction to go with the solution, but I did not flesh out any of the flows or design screens specifically for the teacher persona.