Campii

UX/UI Case Study
a game-like design camp application designed for
high school students to know about, experience, and like design
Keywords: design pedagogy, remote education, connection, communication, collaboration, friendship, camping, UX/UI case study
UX Design Challenge for Amazon
Our project was shortlisted as one of the honorable mention teams.
  • Time: Sep. 10 - Sep. 17, 2020
  • Team:  Olivia Chao, Yiko Liu, Juii Ye (me, team leader & art director)
  • Tools: paper, white board, post-it notes, camera, printer
  • Software: Adobe XD, Illustrator, Miro
1. Project Brief
How might 9th & 10th grade students come to know about, experience, and discover they like design in an intensive virtual summer camp supported through partnerships with universities and companies? Comprehensively researching our targeted users in interviews, we discovered high school students DO want to learn about design right alongside their friends. Experiencing design packaged in a fun participatory way is an attractive proposition. Talking to professional designers and learning about the design industry is essential to their choosing a major in the future.
Post-analysis, we created and prototyped the iPad application Campii, a fun, fast-paced engaging summer camp, that jumpstarts their knowledge and experiences in the design profession. Campii seeks to collaborate with universities and companies to teach and lead game-like design activities virtually. It’s like the students are attending a real, sleep-away camp because camp is all about making friends, connecting with mentors, and experiencing new things.

Prototypes

Click below link to play with the iPad prototype.
iPad Prototypes
2. Research

Users & competitors

After talking to some interviewees, we analyzed the needs and challenges of high school students. We listed and grouped their needs, and thought of ways to solve their challenges. From our research, we found out that these students do want to learn basic design tools with friends, and they want to learn design in a fun way. They are tired of just reading articles and listening to lectures. They want to learn by playing.
We also did some research into potential competitors of different learning applications that target at high school students.
User Research and Competitor Analysis
More than an application, Campii is a platform where students can meet with people from different design backgrounds. Along with getting resources from both static and interactive activities, they will get connections to other high school students, college design major students, professional designers, as well as institutes, universities, and companies. In this web, our users can get extensive design experiences with mentorship provided by professionals., which will help them better understand design and become interested in choosing design as a major or even a career.
Platform Functions

Quotes

We defined our target users as 9th and 10th-grade students. Compared to junior high school students, they have comparatively clearer idea of future paths. We want them to experience the design world before the final year at high school choosing future majors. Here are some quotes from our interviewees, which helped us to synthesize pain points.
Quotes

Pain Points

From the result of the interviews, we synthesized some pain points we wanted to deal with and directions to solve them.
Pain Points

Problem statement

Here is the problem statement which the design process focused on.
3. Design Development

Sketches

After deciding the user flow, I started to sketch out ideas of each stage. This gave us a clear overview and guidance which we followed and iterated later.
Wireframe Sketches

wireframes

After the testing, we iterated our prototype and created a wireframe in Figma. We tested it again with 2 users before we stepped into the UI design phase.
Wireframes

Prototypes for ipad

As the target consumers are high school students, we kept the color theme of a delightful and playful atmosphere to design the UI for Campii. We used dark theme to simulate a real camp feeling. Below are detailed explanations of our features and why we designed it like this.
After animated splash page, 3 preview pages introduce our main features.
Introducing Pages

A. Camp ground

Camp Ground section is the start of the journey. Students can view, choose, and join any camps they are interested in. The can share the links to earn gifts, which are S’mores in this case.
Camp Ground Front Page
Entering each camp, students (or campers) will have an overview of the schedules, tasks, mentors (or camp directors), and what they will get from the experiences.
Camp Details
Campers need to sign up before registering for a camp.
Sign Up and Enroll
Choose Outfits, Get Rewards, and Share

B. my camps

In My Camps section, campers can view schedules and tasks for each day. Daily activities are designed like game levels. Only when campers finish today’s task can they unlock the next level. Tasks of each day are customized to provide campers a combination of lectures, workshops, and group works.
To keep young students engaged through out the process, it’s important to provide warm-up sessions for them to make friends, allow for enough breaks between sessions, and give them rewards after each exercise.
Daily Activities and First Class
To keep campers interested and energetic, we provide breaks after each session. There is a countdown clock at the end of breaks to alert them to get ready.
Breaks
Tasks and Rewards
At the end of each camp, campers will get a special badge as well as a course certificate provided by companies.
Graduation, Badges, and Certificates

C. Community

Community is where students can connect with each other as well as mentors. The post section is for students to share their experiences and thoughts. We customize a match function for students to find someone with similar interests to camp together.
Community
Some questions and choices are provided to search for a match. We encourage students to get in pairs and join camps by giving extra S’mores. There are 3 levels of campers: beginner, explorer, and adventurer. Students can choose a level they want to connect with.
Search for a Camp Partner
Campers will get more S’mores when they sign up for a camp together. Are you ready?
Search Results and Rewards

Illustration References


https://blog.reedsy.com/character-name-generator/language/english/
https://icons8.com/vector-creator/dashboard
https://thenounproject.com/
https://unsplash.com/
https://www.freepik.com/home