Design Nation:
Tablet App for High School Students to Learn and Understand the Design industry
Design Nation is a UX design competition project done by Team [ ]. We designed a table app prototype offering a platform for high school students to learn and understand the design industry.
Date
2020/9/10 - 2020/9/22
Achievement
Winning teams - 2nd place (out of 655 teams)
Skills
UX research, UX design, Branding, UI design
Team
[ ]: Amber Li, Aryan Prinjha, Hanyi Wang
Category
Group project, App prototype, Design competition
I. Overview
Challenge Brief
In this Creative Jam, the teams (2-3 people) need to design a tablet app for high school students to explore the fields of design and learn about design thinking, preparing for their future careers. The teams have one week to finish 15+ unique prototype frames using Adobe Xd.
Our team had three undergraduate students majoring in Product Design (Amber), Computer Science (Aryan), and Cognitive Science (me) - which was a diverse combination for our task. We successfully made most of (95%) our ideas into prototypes and submitted the materials on time.
Team’s Final Work
Design Nation is an iPad app that introduces high school students to the various fields of design and encourages them to kickstart their careers in the arts. This is achieved through a curated content catalog that provides information on the different fields of design, software proficiencies required for each, and project examples from industry veterans. This is complemented by 12 weekly challenges, running every quarter, that utilize gamification principles to keep students engaged and learning. Finishing these challenges provides some perks, like 3-months of free Illustrator access. A daily design quiz provides insight into design thinking. A vibrant warm color scheme caters to the youth culture of today as well as provides an easy navigation experience. The overall navigation of the app is simple and intuitive with a sidebar containing the different resources our site has to offer. Pages include Home, Career, Create, Competition, Community, and Saved
II. My Contribution
1. Brainstorm
Pointed out the main focus should be on designing a systematic and structural learning guide instead of an app rich in information but difficult to start with or engage in.
Sign-up Survey: a series of questions aiming at generating news and events the user might be interested in.
News: the latest information happens in the design fields.
Design Encyclopedia: a key feature offering clear and comprehensive information on different design fields, including valuable resources, sample works, commonly used tools, ultimate questions those designers are trying to solve, etc.
Monthly Challenges: another key feature encouraging and guiding teenagers to start to learn and experiment with the things in everyday life.
2. Paper Prototyping
paper prototype by Amber (black) with my comment (red and blue)
3. User Interview
I had a 20-minute interview with a high school student in California showing him the paper prototyping sketch and asking for his opinion and expectation for this app.
The overall feedback was positive. The interviewee liked the features of the Community and Competitions, which showed the need for the latest information.
The student pointed out that the Design Encyclopedia ("Career" in the final version) should offer organized and structural information that was well in accord with the main goal I expected.
Besides interviewing the target users. I was also assigned to do some research on the common parameters of the iPad Pro screen side we chose.
4. UI Information research
5. Wireframing
I helped Amber create the wireframes in Adobe Xd based on the paper sketches.
6. Brand Design
I named the app Design Nation based on its similarity with the word "designation" (which connects with the meaning of landing a job) and our goal of providing a well-organized place with structural information to let the students freely explore.
We chose the color theme of warm orange and red to create an energetic and exciting environment attractive to the high school students.
The logo came from the Internet.
7. Prototyping
Aryan and I completed the prototyping of the Xd document after Amber made the visual designs.
Main motions include:
sidebar exit and entering
layout transformation
pop-out window scrolling
III. Conclusion
Successfully controlled the proper amount of information (not too less or too much) displayed on the screen.
Maintaining simplicity and user intuition is not an easy job, and the app made it.
Suggestions for Hamburger menu: Some important and valuable features got hidden deep in the Hamburger. Perhaps try to put some guide on the home page to lead users to those valuable sections.
Comments from Judges
Reflection
Things I learned
This is the second time I participated in Adobe Creative Jam and I think I learned and improved a lot with more practice and the help of my teammates. Amber was quite an experienced UX designer so during this competition, I got to learn every step of creating UX prototypes, which was a very valuable experience. Therefore, after this event, I thought I was able to work on small projects on my own.
For the brainstorming part, the team thought my idea of making a user account into a portfolio was thought to be a bit off the goal we were focusing on. The explanation is an app should not be "good at everything" or it will be good at nothing, which I agreed that I did not pay much attention to. However, I am now still debating on whether there should be a simple feature for concluding the activity or achievement the user makes in an app, saving the time of manually collecting the information from different corners of the app. I will perhaps do some further experiments on this question.
The notion of gamification was well-researched and applied by my two teammates. They were much more sensitive to the link of the teenager - education - gamification than I did.
This was also the first time I got to do UX design for the tablet (our team chose to use iPad Pro 12.9’’ which was pretty big). It should be noticed that the screen size and common font sizes should be carefully researched ahead.
Things to improve
Similar to last time, my main work was focused on offering content ideas and prototyping. The visual design part was done by the more experienced teammates. However, I realized I made a mistake in the order of prototyping (animation) and the visual design. Instead of prototyping the screens as soon as they are designed to look "complete," the prototyping should be put at the very end after almost all the visual design and its future editing is finished. I spent too much time on prototyping the unfinished design which was not very helpful for the team's whole speed.
Although we all agree the final work showed around 95% of our ideas, it was sure that there was still space for improvement. Some detailed but unique ideas I came up with were not incorporated into our demonstration when I actually had the ability to ask for adding them. For example, the "ask questions" part mentioned by the high school student I interviewed and the "ultimate question" I brought up at the very beginning. I believe adding some unique details could give the app more personality and help it stand out among the apps with similar content and qualities. It can be understood that with so many new tasks to try in a very short time, it was hard to focus on small details, but, in the future, I will use my projects to reflect this idea.