Michelle Chiu
victor-cruz-splash-01.png

Victor Cruz Foundation

Mobile UI/UX Design

2016 JPMorgan Chase Code For Good Challenge 2nd Place



B a c k g r o u n d

As the sole designer in a team of five, I participated in the 2016 JPMorgan Chase Code for Good Challenge in Brooklyn, New York last September. A 24-hour competition, the event labeled itself as an opportunity to collaborate with a non-profit organization to tackle real-world problems. Our team offered our skills to the Victor Cruz Foundation and our final project was ultimately awarded 2nd place out of the 26 teams.

T a s k

The Victor Cruz Foundation is a non-profit organization that fosters after-school programs focused on STEM education through hands-on, impactful curriculum for young adolescents. Their goal is to increase the number of underrepresented students’ interests in career fields related to STEM while simultaneously helping build and reinforce some of the basic core school subjects.

They were seeking help in the design and creation of an application that would translate their after-school programs into a mobile experience for young audiences. The motive was to invoke greater interest in STEM subjects through easy access to engaging modules.

 

P r o c e s s

Defining the Problem

During the competition, I had a chance to interview representatives from the Victor Cruz Foundation to more clearly define the intended goals of the application.

The non-profit wanted to replicate their success from in-person programs by translating the experience into a digital form that specifically elementary and middle school students could easily access. Currently, the curriculum must be facilitated by an in-person instructor who leverages paper materials. The application would eliminate the requirement of having a program in one’s city in order for participation and the limitation of only being able to engage in this type of learning in the classroom. 

From the interviews, I also learned that the success of their current programs with the younger crowd was mostly in part to incorporating “get up and go outside” elements in their curriculum and relating the subject material to topics of interest such as sports. To better understand the structure and content in their current programs, my team was given a sample of six different lessons that they would normally present to students in a classroom setting.

Ultimately, from speaking with the Victor Cruz representatives, I defined several key goals that I wanted the application to achieve:

  • Be a purely digital system

The entire experience should solely be an interactive digital one. While physical props can be used to teach concepts, it cannot involve any paper.

  • Have means to track and visualize a student’s progress

    The Victor Cruz Foundation should be able to track how many people engaged with the application and how far they’ve progressed on it. However, no confidential information on or about kids should be tracked.

  • Influence consistency in educational outcomes

    The digital experience should achieve the same learning outcomes as the paper experience, although the methods of education do not need to be identical to the paper process.

  • Be sufficiently intuitive to use without facilitation

    The digital experience should be able to stand alone and work without a teacher or parent facilitating. Because the target audience is one of young age, designing to make the user experience simple and comprehensible must be taken into account.

  • Be easily modifiable

    The Victor Cruz Foundation should be able to add, modify, or remove modules without impacting the user’s comprehension of the interface.

  • Make unclear if it's work or play

    The application should engage students and not make learning a chore. The entire learning process should genuinely interest the child and make them want to open and utilize the app on their own.

 

I also created personas to characterize the user and stakeholder needs and wants:

S T A K E H O L D E R

U S E R

BIOGRAPHY

Ryan is an 8-year old in the 3rd grade. He enjoys playing football after school with his friends and on Saturdays with his dad at the local park. For fun, he loves creating his own science experiments in his backyard.

Elizabeth is a member of the Victor Cruz Foundation who works to ensure that programs are successful. She sees the impact that the programs have on students and wants to expand it into a mobile experience to reach more kids.

Need(s)

To facilitate his interest in a STEM field, he wants an app that will be able to teach him in a fun, educating way. If possible, he would like it to be more of a supplement to his hands-on learning or even somewhat like a game.

She would like to track how many students sign up and become active, consistent users. She will also possibly use this data to decide which cities to target next for the in-person programs.

Assumption(S)

• Has access to a smartphone or tableOpen to learning outside the classroom 

• Won’t be maintaining codebase
• Will be working with developers to update content
• Understands how to navigate the admin version of app

 

I n s p i r a t i o n

Since the amount of time I had to create the designs were limited, I decided to look at current solutions that had similarily aligned missions.

Splash screens from top educational apps in the iOS App Store

A similar theme between the educational applications was the accessible, pinned bottom navigation. It clearly defined the different actions that a student was able to perform through the different tabs. Additionally, after logging in, the user is always presented with a layout of all the different modules one can enroll in or continue from where one left off.

While exploring the multiple applications, I also noted down aspects that made my user experience a more delightful one. These inspired features in our own application: taking note when a user is struggling with the material, allowing the individual to track progress on their modules, praising the individual on their successful efforts, and unlocking special perks when enough correct answers have been collected. These features made it hard to differentiate between work and play and offered the right amount of guidance to ensure that the learning process matched the child’s level of knowledge. They put the bow on top for creating an invisible UX that made learning enjoyable.

 

F i n a l  P r o d u c t

 
victor-cruz-color-palette
 

I chose primary colors that had an elementary essence to fit our target audience of young children.

Additionally, I created a mosaic background that incorporates elements from football and the sciences.

 

T A K E A W A Y S

From this experience, I learned some important lessons that I can apply to future projects.
 

planning and brainstorming hold weight

Because the competition was extremely limited in the scope of time, outlining clear goals and checkpoints for the project allowed our team to stay on task. Jumping straight into high-fidelity designs was tempting, given that we technically only had less than 24 hours, but--in the grand scheme of things--starting with sketches and low-fidelity mockups to jot down ideas early on was definitely the better approach. It allowed me to carve a solid, initial foundation of all the user interactions I would have to design.


FEEDBACK IS CRUCIAL

As the only designer on the team, I was heavily depended upon for directing the entire visual language of the application. However, despite having more design experience than my other group members, communicating with them throughout the entire process allowed me to see certain areas of improvement in my designs during my iteration processes. The diverse perspectives allowed me to flexibly alter my designs accordingly and pinpoint better ways to enhance the user experience.

 

IF I HAD MORE TIME...

I would have created the interactions for the stakeholders to visualize how a student is progressing in the modules. Additionally, I would expand on how user actions such as "Challenge Friend" and earning student badges would be like on the application. If this were a month-long project, I would also gather user data and feedback on the strength of engagement and level of intuition by studying how well children can navigate the application and how frequently they would use it.