Desafío Fotográfico - ImageMagica

Project Overview

For my final project in the Product Design Studio course through UC Berkeley's School of Information, I had the opportunity to work with an external client, ImageMagica. ImageMagica is a non-profit in Brazil that teaches elementary and middle school-aged children to see their own life from a different perspective and how to tell their own stories through the art of photography. They produce a course called Desafío Fotográfico, which they use to teach students across Brazil about photography. In this course, students learn about different aspects of photography, create their own work, and submit their photos through the Camino app.

ImageMagica was hosting their course materials for Desafío Fotográfico on Google Classroom. Going into the project, they were most interested in developing a learning platform that increased course completion and more closely aligned with their branding, since Google Classroom has constraints on customization. From a business growth perspective, they wanted to increase sponsorships for public school programs and sell their program directly to private schools.

Role: UX / UI Designer, Project Manager

Team: I worked with a team of three from an external nonprofit, ImageMagica, as a solo UX / UI designer and project manager. This collaboration happened remotely.

Users: ImageMagica’s users are students in schools in Brazil, children and teenagers aged 10-17.

Project Kickoff

I kicked off the project by setting up a meeting with ImageMagica to understand their goals, scope, and constraints for redesigning the Desafío Fotográfico learning experience. After my conversation with the client, I learned that they wanted to have stronger branding for the Desafío Fotográfico platform and increase the rate of course completion.

From a business perspective, they were interested in increasing the number of sponsors that they had and wanted to increase funding from private schools.

I wrote a design brief to outline the goals and scope of the project and presented it to the client to ensure we were on the same page moving forward.

Original Course Homepage

Research

With a better understanding of the project goals and scope, I started to research existing educational platforms. I wanted to understand common design patterns and what features were already out there to engage students. I researched some of the most popular educational platforms and conducted a comparative analysis focusing on these main questions:

How do these sites organize courses?
What features do they include?
Do they include any mechanisms to keep users engaged?

With a better understanding of what was out there, I brainstormed ideas for different ways to organize the platform and address the issues ImageMagica was looking to solve with a few "How Might We..." questions. I generated ideas related to course organization, as well as many ideas for how to increase student engagement with the course. I noticed that most of the platforms I researched had a generally linear structure, with a high level overview of the lessons and an indication of progress throughout.

UI Design

After thinking of the different ways I could tackle the goals we were trying to achieve, I started to sketch and prototype my initial ideas for the UI. With my research guiding me about common design patterns for educational platforms, I sketched out how the lessons should be structured.

I wanted to ensure that it was clearly visible which lessons the student had to complete and what the status of completion was. I also started to brainstorm how to lay out mixed media, as the Desafío Fotográfico curriculum had a mix of PDF and video learning material. Finally, I made sure to include a reminder to log onto the Camino app where students are required to submit their photos and captions for the course.

I then created a mid-fidelity prototype to review with my client. They were happy with the direction that the design was going in.

During the review of my mid-fidelity mockups, they asked if it would be possible to add a course landing page into the design. Given that I still had a couple of weeks left until the project deadline, I agreed to incorporate this into the final deliverable.

From the mid-fidelity stage, I started to create high fidelity prototypes with stronger branding that aligned with ImageMagica and the Desafío Fotográfico course in particular.

It was a challenge for me to get the branding right here and not make the design too visually cluttered. I pulled in visual elements like the paper triangles they use in the background of their materials as accents in the UI and a camera on the login page.

Initial Iteration of Course Selection Page

When I was creating the course selection page, I had a difficult time figuring out how to design the UI. I had a concept of each course being a polaroid photograph to tie in the theme, but it wasn’t quite looking right.

I compared my designs to images of real polaroids to understand why my designs looked off. I worked on getting the details of the coloring and the shadows just right so it evoked the visual feel of a polaroid picture.

Final Course Selection Page Design

Finally, I added in some final touches to the UI design for usability, for example including a summary of the estimated time to complete a lesson. This will help a student to determine how much time they need to set aside to do the lesson or if they should do it later.

Final Design

Platform Login and Sign-up Page

Course Selection Page

Lesson Page

Outcomes & Lessons Learned

This was my first solo UX project, so I had to lead the client through the entire design process and be the project manager. I learned a lot about client management and how to structure design projects.

I was able to do very limited user research due to difficulties scheduling interviews with real students and the requirement of having a translator present to conduct user interviews. I had to get creative in the ways that I gathered information and had to be mindful of making assumptions about my users.

I had never designed for a primarily younger user base or for an educational product before, so it was a new experience to think about their needs.