Project Overview
Project Duration: One week
Team: 3 designers
Tools: Adobe XD, Adobe Illustrator, Adobe Photoshop
Skillset: Product design, design thinking, UX/UI design, logo design, user research, user flow design, wireframing, prototyping.
Team: 3 designers
Tools: Adobe XD, Adobe Illustrator, Adobe Photoshop
Skillset: Product design, design thinking, UX/UI design, logo design, user research, user flow design, wireframing, prototyping.
Context
Palette is an iPad app that my team designed for high school students. It is an online club platform for high schoolers who are interested in design and want to take their first step into the world of design. What Palette does is to build an online community for them to get inspired and to learn. The users can build up their first portfolio easily, explore others' works, attend various events, and take design related classes.
My Roles
As one of the 3 designers in my team, I addressed the whole idea of building a community for high schoolers, did research to confirm user pain points and user journey map, and designed the product from sketch to prototype. Also, I designed the logo and motion part of Palette.
User Pain Points
Many high school students are interested in learning design, but most schools do not offer related courses, neither can they find a peer community (both online or in real life). Whether they have foundations in design or not, these are the huge obstacles for them when applying for design colleges or trying to do some hands-on jobs.
User Persona
Vanchy is a grade 11 high school student studying at the The Bearley School in the New York City. She loves design, especially graphic design since middle school. Now she is considering to learn it systemically and get prepared for college application. Also, since she needs some hands-on design experience, and there is not much chance for a high school student to get a part-time job as a designer, she really wants to engage some community or clubs where she can try to work with some real customers or businesses. When she is not at school or designing, she loves browsing Tik Tok and listening to Spotify music.
Why iPad?
According to research, these are some of the major situations when people use iPad:
• Media consumption(Netflix/Twitch/YouTube)
• Socials (Reddit/Twitter)
• Note taking and browsing
• Reading magazines
• Group Projects
• Podcasts and Music
• Media consumption(Netflix/Twitch/YouTube)
• Socials (Reddit/Twitter)
• Note taking and browsing
• Reading magazines
• Group Projects
• Podcasts and Music
Therefore, iPad is a perfect media for browsing and learning, especially for design related content because the size of screen is friendly to view works clearly with good mobility. Also, the screen size and mobility of iPad is suitable for small group sharing, so that the student can browse the app content with friends or family members.
Popular Apps Among High Schoolers
According to the popular apps among high school students, there are some obvious similarities:
• Visually driven
• Simple and straightforward
• Shareability and interactivity
• "Cool" and "Chic"
As a result, Palette emphasized on these features as well.
• Visually driven
• Simple and straightforward
• Shareability and interactivity
• "Cool" and "Chic"
As a result, Palette emphasized on these features as well.
User Journey Map
I found some small pain points with the user journey map. For example, if the user does not have design experience at all, it's hard to build up any portfolio because of the lack of works and skills. Also, the user will be afraid of attending events or reach out to experienced peers. Last but not least, the user also don't have ideas about which courses to take. So Palette will make an impact on solving these problems.
Palette User Journey Map
Solutions
Palette is my team's solution for the user pain points. By building up the following features, it becomes a home for young to-be-designers.
• Community - Palette offers a complete online community as virtual clubs to provide various events, design challenges, and community design jobs
• Share & Show - The user can view others' works, connect with others, and build up portfolios easily using the built-inside tools, or even sell their works' commercial licenses
• Learning - Palette has various courses offered by mentors in the industry. The students can transit the course certificates into their high school credits after finishing them
• Level up - Palette has a level system from Lv. 1 to Lv. 5. The students can take a placement quiz to find out their levels, and participating in different events to get leveled up
• Community - Palette offers a complete online community as virtual clubs to provide various events, design challenges, and community design jobs
• Share & Show - The user can view others' works, connect with others, and build up portfolios easily using the built-inside tools, or even sell their works' commercial licenses
• Learning - Palette has various courses offered by mentors in the industry. The students can transit the course certificates into their high school credits after finishing them
• Level up - Palette has a level system from Lv. 1 to Lv. 5. The students can take a placement quiz to find out their levels, and participating in different events to get leveled up
Information Architecture
The whole app is divided into four major sections beside the onboarding part - Trends, Gallery, Portfolio, and Learning. The Trends part is a dashboard where the user can find what's new and what's recommended to him/her. Gallery is a section where the user can browse others' works and get connected with others, or even buy the licensing to use others' works legally. Portfolio is a show board of the user, including his/her portfolios, works, groups, and more. Learning is a place where the user can have courses in their design levels and improve their levels by finishing courses.
Palette Information Architecture
Sketches
Palette Sketch
Wireframe
Palette Wireframe
Design Guides
Palette Design Guides
Design Highlights
1. Onboarding Experience
The onboarding experience of Palette is divided into two user flows - One for non-experienced designers, and one for experienced designers. For new designers, Palette will make sure what the user is interested in by showing different images instead of academic terms at first, and then lead the user to the content that they may be interested in.
For students with some design experiences, the onboarding experience is continued with a placement quiz, where the user can know what design level he/she is in, so that Palette can recommend featured content for the user. And all users can take the quiz anytime again to have a re-placement whenever they think they deserve a level-up.
2. Create New Portfolio
No matter the user has portfolio building skillset or not, Palette offers an easy way to create new portfolios! With simple drag and drop, the iPad will be the canvas for anyone!
3. Visually Driven Re-designs
In the first version, there were more content on one page than the current version. After testing it with some users, I got the feedback that high school students do not want to think over complicatedly when using an app, and visual content is more preferred than text (and the academic terms should be removed as much as possible). So my team decided to remove secondary content on the homepage, making the user browse one work at a time, and replaced text in the quiz/onboarding part with images.
Logo Design
The name of the app - Palette - Means that the young designers can draw their own pictures here, and they can blend, change, improve with any color. The logo involved from a cloud-like palette (because Palette is an online club and think tank for the users, so I wanted to make it a cloud shaped icon) and wordmark with a painting brush to the pure wordmark version because I believe it can speak for itself (and the cloud seems to be a little bit too childish for high school students).
Outcome
Within the one week's design process, my team built a relatively completed platform for high school students who want to become a designer, and offered them multiple ways to approach their goals. By putting myself in the users' shoes, the final product perfectly solved the users' pain points. But due to time limitation, some user flows are not finished yet, and also more user research/usability tests are needed to make Palette better.
