What I Did
- Designed and animated a prototype for an educational app about UX design
- Coded a demo of the app’s tutorial section
- Conducted research on a target audience of pre-teens and parents to create a persona and plan initial designs for the application
- Ran a usability test with children and their parents during COVID-19
- Tools Used: Adobe Illustrator, Sketch, Principle, Figma, SwiftUI
The Need: More Kids Wanting to Learn UX Design
UX design, the process of making products easier to use for other people, is one of the most important fields of our time. The websites, apps, and other experiences created in the field and its different specializations have a massive control over our lives. From entertainment to privacy and politics, many hotbed issues are driven by how users experience digital technology
This is a responsibility that is about as important as the work of a firefighter or doctor, but kids actually learn about those positions when they are younger. Most UX designers only discover the field when they’re already adults in different careers.
As I have described in my first blog article about Fix the Stuff!, the public’s lack of awareness of UX design is a major problem. It is harder for the average person to demand accountability for unethical design practices when they are only starting to learn how they are being manipulated.
Additionally, kids could be ignoring a highly rewarding and profitable technology field because they have never heard of it. Given the shortage of qualified UX designers in the industry, making children more aware of the field could increase the chance that they decide to start learning UX design earlier than most people today.
There are apps that teach kids how to code, but none that teach them how to design a user experience and there are almost no resources that explain the field in words children can understand. An app that could introduce kids to UX design would be an excellent way to start.
The Figma version of the Fix the Stuff! Prototype
The Puzzle App for Pre-Teens
Fix the Stuff! is an app designed for iOS that teaches pre-teen kids UX design terms, principles, and laws through cartoony puzzles.
I chose to focus on pre-teens that are seven to 12 years old because this is the age where children typically get their first smartphones and start exploring their autonomy. Part of this autonomy includes thinking about their place in the world and what they want to accomplish in it.
In the puzzles, the user has to fix a broken or poorly-designed household object to make it smile again. The puzzles are inspired by Don Norman’s The Design of Everyday Things. Norman’s 1988 novel introduces its readers to design with examples of everyday objects that are frustrating to use.
The Process
When I started planning this app, I did research on how pre-teens interact with technology and its affects on their relationship with their parents.
This research taught me that apps are highly effective eLearning tools for children. I also learned that making the app appeal to parents is just as important as making it fun for pre-teens.
I then made a persona, app map, and user journey based on how I thought users would interact with the app based on my research.
After wire framing my Fix the Stuff!, crafting its style guide, and desining an initial prototype, I tested the interface remotely on five children with their parent’s permission.
The form for the test was a usability test script that let parents read questions out to their children. They could then write down how they responded while they scrolled through a non-interactive prototype document I made. I had to do this because the coronavirus pandemic made in-person testing impossible.
The children liked the app, but they thought the menu option for a list of websites where they could learn more about UX would lead them to a tutorial.
They also did not see the point of the link list, so I removed that screen entirely. I turned its button into a link for the tutorial. I also removed the pop-up that appeared when they clicked the play button asking if they wanted a tutorial.
If you want to learn more about the remote usability test, please read my article about what conducting this test taught me.
I added all of these changes and more to the second prototype to make it more intuitive for pre-teen users. I created more puzzles as well. When this was done, I transferred the Fix the Stuff! prototype to Principle so I could add more advanced animations to the app.
I also coded a short demo of the app’s tutorial in SwiftUI to see how the app could look as a fully developed product. Prototypes made with design tools are not perfectly accurate to how the app would function in reality. This made learning how to bring part of my app to life in Xcode a lot of fun.
Once finalized, I transferred my prototype from Sketch to Figma so I could embed it on this page. Additionally, I screen-recorded my Principle prototype and Xcode tutorial demo.
The Result
Overall, this was a very satisfying project to work on. I learned two design tools and one coding tool at the same time. This made me feel more confident in my eLearning design skills.
Testing the app from home might not be what I expected to do for this project. However, nobody expected COVID-19 to shutdown in-person interaction before 2020 started. In retrospect, this experience prepared me for remote work after graduating from Elon University with my M.A. in Interactive Media.
Featured Image: Promotional image of Fix the Stuff! using a mockup of the iPhone 8 created by Affan Bajwa.
