Technovation
Technovation is an organization aimed at teaching young girls how to be leaders in tech spaces. Girls in middle school and high school form teams, find a mentor, identify a problem in their community, and build a mobile app to solve that problem. As a volunteer mentor, I helped teach a group of girls how to code, and how to build a business plan for their app. The girls had to identify a problem, develop a solution, and complete market research.
My team (Team CyberCats) was comprised of 3 middle school girls with experience ranging from no programming to comfortable with Python. The girls decided they wanted to learn Swift, instead of using App Inventor, a block based coding platform. We worked together over the course of 2 months to build an app that helped promote reading.
Goals
Research and identify a problem in the community
The girls were first asked to think critically about their own communities and find a problem they were interested in solving. They were then asked to distill the issue into a problem statement, and identify their target audience and consumers.
Design and develop a mobile app
Once the issue was well researched, the girls had to brainstorm a solution and begin building an app. They were responsible for coming up with user stories, designing the UI, and actually building the app.
Identify a problem
In order to keep the girls motivated and excited about this project, I wanted to help the girls pick a problem they were passionate about, but also a problem they could solve. We spent a weekend brainstorming different problems the girls encountered in their lives- we spoke about mental health in their school, climate change, and the drought in the Bay Area. Potential solutions ranged from de-stressing exercises and meditation apps to apps that could help identify if a material was recyclable or not.
Ultimately, we settled on something a little closer to home. I met these girls mainly over the weekend at their local public library. They had all noticed that most people were on computers, rather than reading. The girls decided that they wanted to help people put down their phones and pick up books.
“I spent a total of 5 hours sitting in the San Jose Public Library, next to 5 women and men all absorbed in their phones or computers. We were surrounded by books, but no one was actually reading any of them.”
Research the Problem
In order to understand the problem, think about it critically, and ultimately design a solution, the girls had to answer the following questions.
Why is this a problem?
“With so many digital games, people stop reading in exchange for addictive electronic games. Even little toddlers are seen staring mesmerized at their tablets, instead of playing with their toys. Reading helps people’s imagination and has many other benefits such as higher intelligence, boosted empathy, and can even fight Alzheimer's Disease.”
Who does this problem affect?
“This problem affects almost everyone. For example, adults and teens are so busy caught up social media and business emails. Prolonged screen time can even have bad physical effects. It can lead to poor posture, eyesight, and concentration. By not reading, people also lose the chance to sharpen their imagination and critical thinking skills.”
What do they need to solve this?
“We, Team Cybercats, believe that our users should develop the desire to read by themselves with means of motivation, such as friendly competition and encouragement. We believe our users will respond best to a game-like system, where they receive points for completing books of their choice.”
Define the Problem Statement
After all the girls’ research into the effects of prolonged screen time and benefits of reading, they were asked to distill their issue into a 2-3 sentence problem statement. The statement would help guide our development of the app.
“As more video games and sources of entertainment become available, reading is disappearing from everyday lives. Our team hopes to restore the love for reading in people’s lives. Our mission is to encourage people to read for fun and not because they have to.”
Propose a Solution
Once we had a problem statement, it was time to start coming up with solutions that could solve this problem. The girls came up with the following:
“The solution to the problem is an app, tailored to each user, to motivate them to read. It can use a multitude of tactics such as points for finishing books and book recommendations fitted to the user’s taste. We can also try connecting with Facebook, to help get more people involved.”
Designing the App
Defining Basic Functionality
Once we had the problem statement and a specific solution to that problem in mind, it was time to start designing the app. I asked the girls to list out different “tasks” within the app they wanted users to perform and how they envisioned their users completing these tasks. In doing so, the girls were able to brainstorm and discuss what the core functionality of their app was. By putting themselves in the shoes of the user, the girls were able to draw upon their experiences with other apps to help them build the workflow for their own app. Segmenting the app functionality into these user stories would also help us begin to implement the actual app.
Writing out the steps may seem like a simple task, but it forced the girls to break down large abstract concepts like “logging in” into discrete components. It also made them think about how different screens may be related (choosing your age in screen 2 will change the information you see in a later screen). During these discussions, the girls naturally started sketching out what various screens of the app might look like.
Building a Visual Language
I wanted to expose the girls to some parts of the design process. More generally, I wanted to show the girls that working in tech isn’t just programming- there are countless careers they could have where they wouldn’t need to write a single line of code. To accomplish this, I had them complete a simple design task, building a visual schema. I asked the girls to research different apps in this space and note the color schemes used. I also asked them to read up on the relationship between color and emotion. Once they completed this, we discussed what kind of “mood” they wanted their app to convey and what colors best represented this mood. When this was finalized, we moved onto fonts. The girls had discovered they all liked the minimalist, flat UI look, so they wanted to keep their fonts simple. We discussed what their header/paragraph fonts were and what font sizes should be used. By the end of this meeting, they had built a whole visual language for their app and could refer back to this when implementing it.
Creating a Logo
The final design task for the girls was to come up with an app name and a logo. Since the app is about books, they researched various words around books. They landed on Biblio, the Greek prefix meaning “book”. For the logo, they knew they wanted books to be featured in some way. Since our team name was CyberCats, they also wanted to incorporate a cat in the logo. Thus, they came up with our logo- a bookshelf with a cat as bookends.
Developing the App
Learning the Basics
The girls learned how to code in parallel to performing their research and designing the app. Technovation provided a guide for what concepts to teach during each week that we met. However, their guides were for App Inventor, a block-based coding platform. The girls wanted to learn how to code in a language that’s used in industry. Since the goal was to create a mobile app, I decided to teach them Swift and make heavy use of the Storyboard feature in XCode. This would allow the girls to worry less about creating UI components and focus more on coding the backend logic. We still followed the Technovation guides, but I developed sample projects in Swift that helped the girls learn the same concepts. By the time we were ready to start building the app, the girls were comfortable with concepts like arrays, loops, conditionals, variables, and responding to user input. One of the three girls had some experience programming, so I had her focus on more advanced topics, like maps and Swift TableViewControllers, in order to ensure she was still learning new things.
Data Modeling
Once the girls had their design and were comfortable with the basics of coding, we moved onto data structures and how to store information in their app. I asked the girls to pick out nouns from their user stories. The two main nouns they identified were “user” and “book”. We then talked about what kind of information we would need to know about these 2 nouns. For example, in order to recommend books to the user, we would need to know the user’s name, age, and genre preferences. In order to display a book, we would need to know the book’s title, author, a cover image, and more.
Once we had a list of information for each noun, we got more specific- how should each piece of information be represented in code? (A name is a string, an age is a number, etc.) The girls also wanted to restrict the genres available to the user based on their age. Since this relationship involves 3 things- the user age, the genres available for that age, and the books available within that genre, I had them model this relationship as well. By the end of this discussion, we had a well defined group of objects that would make up our app.
Pseudocoding
Ultimately, I wanted the girls to go through the process of forming an idea, breaking down that idea into discrete steps, and then making it happen. It’s a useful skill that goes beyond coding and I felt that teaching this mindset was incredibly important. As a part of their design work, the girls wrote user stories. The next step in bringing this to fruition was pseudocoding. I asked the girls to break down each user story into steps that could easily translate into code.
Step 1: Storyboard the workflow.
Step 2: Write out the workflow.
Step 3: Break down the workflow even further, into something easily coded.
Coding
The division of labor between the girls fell quite naturally. There were 3 main models in our app, each with a varying amount of complexity. One girl had absolutely no experience with coding before this, so she worked on implementing everything related to building the user profile. She handled the onboarding workflow and a simple login system. One girl had a lot of programming experience, so she was tasked with implementing everything related to the book model. I was able to get a CSV of books off Amazon, so I helped this girl build a CSV parser, create a dataset of books separated by genre, and use the Swift TableViewController to display a list of books. The last girl had some programming experience, so she was tasked with defining the relationship between books, genres, and age. She took the work of the first two girls, and tied it all together. She took the user profile data, figured out which genres were appropriate to show, and then had the recommendation show the books for each selected genre. When you clicked on a book, it would move to a new screen which was populated with all the data stored in the book object.
Reflection
Looking Back
The biggest lesson I hoped to impart was being able to formulate an idea and execute upon it. I think I was ultimately successful in teaching the girls how to break an idea down into steps and complete each of those easier tasks. In terms of learning programming, I wish that I had more time to ensure that the girls fully understood each concept. While learning Swift was certainly a noble cause, it might have been too much for the girls to handle at once. They had so many more ideas for the app, but weren’t able to complete them since they struggled a lot with learning Swift and connecting the UI to their data sources. Perhaps they would’ve felt more satisfied with their product if we had used the block language, which had blocks for things like social integration and voice recognition.
Moving Forward
The girls had so many ideas for where they could take their app next. One of their main goals was incentivizing their users to read more. They wanted to allow users to have competitions with their friends, or have a reward point system based on how often you completed a book, and how long or difficult the book was. They wanted to connect the app with a user’s local library, so the recommendations were based on books that were available in the library. Ultimately, these girls enjoyed their experience learning how to program, and mentioned that they would be interested in taking more coding classes and building upon these skills.