Teens Create
App and Responsive Website
Case Study
01
Project Overview
Teens Create is an app designed to be a space where teens can find work and creative mentoring that fits their scholastic schedule while providing a safe learning environment.
There are numerous freelance we sitesites for creatives to pick up work, and many do not seem to have a minimum age limit. Because of this, teenagers would be competing for projects against full time creatives, potentially underbidding and overstretching themselves to find gigs, all while still learning the ropes of being a creative entrepreneur.
Teens Create is designed to allow teens to apply for gigs in an environment structured to account for their growing skill level and scholastic needs while also providing opportunities to learn through mentoring and peer support. Teens Create came about due to my Google UX coursework but answers a real world need that could help build the next generation of creatives.
Problem Statement
Creative teens do not have a safe platform online dedicated to protecting them as well as helping to manage their time as students. They have to compete with seasoned freelancers while also “learning the ropes” on becoming an entrepreneur.
The Goal
Teens Create is an app and website designed to give teens a safe place to begin freelancing while managing their studies. It also connects them to tutorials, mentors, and creative peers for support so that they can grow their skills.
The Team
Since the project was a part of the Google UX course, I had access to group chat of other UX designers, tutorials, and Coursera staff.
My Role
I was the Solo UX and graphic designer for the Teams Create app and responsive website, responsible for conducting user interviews, paper and digital wireframing, creating low and high fidelity mockups and prototypes, accounting for accessibility, and ideating on designs.
02
Understanding the User
To begin understanding how teens might use the app and how to meet their needs, I undertook user interviews. From these, I created an affinity map and distilled insights and themes. These results helped me create user personas with problem statements to solve. Finally, I created user journey maps to find additional pain points that could be solved for users.
User Interviews
Five creative teens were interviewed in the initial phase to determine their experiences with trying to find freelance work online. They discussed their fears of balancing school and work, being taken advantage of, and frustrating with competing against much more senior freelancers. From this, two personas were developed.
Pain Points
Not Knowing Where to Start
Teens are interested in freelancing and earning money on their creative skills, but many do not know where to start, how to find gigs, what is expected of them, and are nervous about being taken advantage of.
Competition
A few teens who have experimented with freelancing have found that it is really hard to complete for gigs against experienced designers. They’ve taken jobs they didn’t think paid a fair amount just to get started.
Workload
Along with competing with adult/experienced creatives, several teens had a difficult time with expectations. They have school work and activities, but felt hesitant to speak up to push back deadlines because they didn’t want to lose the gig.
Chances to Learn
All the teens I talked to expressed a desire to learn more and grow their skills. They would love a mentor or be able to talk to other teens about different techniques. Many try to over social media, but they also feel hesitant to share online where all their schoolmates, etc can see.
Personas
Based on user interviews and pain points, I created two personas to guide the app development.
User Journey Map
I created user journey maps to look for additional improvement opportunities for my two personas that the user interviews had not revealed.
Competitor Audit
As part of the research phase, I completed a competitor audit to see what was available currently and where I could create something better for users.
03
Low Fidelity Wireframes
With the user research completed, I began ideating with several brain storming exercises, developed paper wireframes before moving to wireframes in Figma, and then ran a Usability Study on the low-fidelity prototype.
Ideating
Using the Crazy8’s exercise, I brainstormed different designs that might appeal to a teen user using a mobile app.
Figma Low Fidelity Wireframes
With the brainstorming on layout complete, I kept the user personas and their needs in mind as I created the digital wireframes.
Functionality that made important tasks, such as finishing a gig, were prioritized over mentoring or group comments. However, since I wanted learning and developing skills to be of high priority, I kept mentoring high on the screen and kept looking for a new gig lower.
Lo-Fidelity Prototype
A new user begins at the splash screen and moves on to create a new account, answering a few onboarding questions, before arriving at the “first visit” Dashboard. From there, they can check out mentors, tutorials, groups, or gigs, which they can apply for. When they have landed a gig, an updated dashboard provides information on progress and deadlines.
Try out the Low Fidelity Prototype (version post user testing)
(tip: click on the prototype and click F to go to fullscreen mode)
04
User Testing
To begin understanding how teens might use the app and how to meet their needs, I undertook user interviews. From these, I created an affinity map and distilled insights and themes. These results helped me create user personas with problem statements to solve. Finally, I created user journey maps to find additional pain points that could be solved for users.
User Interviews
With a low fidelity prototype ready to go, I undertook usability testing, starting with creating a test plan and questions, running the usability test, creating an affinity map, and ranking improvements before beginning iteration development.
Usability Study Details
Research Questions
- Do teens feel like they’d use this app?
- Are the app’s rules of use and limit in number of gigs too restrictive?
- Is the onboarding flow too long?
- Does the initial dashboard help in navigation?
- Are any main areas that teens need missing?
Participants
5 participants
2 teenage boys and 3 teenage girls aged between 14 and 17. All with creative interests such as design, music, coding, etc.
Methodology
20-30 minutes
USA, remote (1 user was located overseas)
Unmoderated usability study
Users were asked to perform tasks in a low-fidelity prototype
Usability Study Themes
Theme 1
4 out of 5 users want to be able to filter gigs, groups, and tutorials and not be limited by the onboarding questions.
“I want to be able to filter the gigs and not have them filtered for me based on the setup questions.”
Before
After
Theme 2
3 out of 5 users want to be able to test out the app before answering onboarding questions.
“As long as the onboarding is short, it seems fine. But it would be nice to skip the questions too.“
Before
After
Theme 3
1 out of 5 users felt the limit of one gig at a time felt too limiting. They wanted a clearer explanation of the rules and how the limits change.
“I want to be able to have more than one job at a time as this is going to be my ‘after school’ job.“
Before
After
05
High Fidelity Design
With the usability testing complete on the low fideling prototype, I went to work updating the wireframes to high fidelity, making changes recommended by users as I went. Though, to start, a brand guide including colors, fonts, and a logo needed to be created.
Brand Guide
I wanted the app to be fun for teens and did some research on colors that teens gravitate toward. A dark screen (rather than simply a dark mode) felt edgy and neon colors worked well with it. With that sort of scheme in mind, I developed a color palatte, logos, and component sheet.
Sticker Sheet
High Fidelity Wireframes
High Fidelity Prototype
Animation of the Teens Create app prototype
Clickable Figma prototype
(tip: click prototype and press F for fullscreen mode)
06
Responsive Website
Teens interested in being hired for creative gigs in a safe and learning environment is only half the equation. I also need a way for people seeking to hire or mentor teens to log in, be vetted, and get connected.
Since most professionals have laptops as part of their professional work, I decided to create a responsive website as their Teens Create hub, changing some of the look and feel to better suit adult creative vibes.
Sitemap
To start, I mapped out the information architecture of the website. The responsive website is designed for users looking to hire creative teens for projects. From the informative homepage, a user can sign up to post gigs or check in on projects. An area for teens expands on the app with more in depth tutorials.
Low Fidelity Responsive Design
Professionals who might want to hire or mentor a teen creator are often on the go as well, so I started the responsive design in a mobile screen size first before transitioning up to a laptop.
Low Fidelity Mobile Wireframes
Low Fidelity Laptop Wireframes
Low Fidelity Prototypes
To test the design, I wired prototypes of both the mobile and laptop wireframes.
Try out the clickable prototypes (tip: click the prototype and press “F” to go to fullscreen mode)
High Fidelity Design
To transfer the low fidelity wireframes to high fidelity, I kept a similar color scheme to the Teens Create app, but decided to switch to a white background and lighten the colors.
High Fidelity Mobile Wireframes
High Fidelity Laptop Wireframes
High Fidelity Prototypes
I updated the prototypes to high fidelity once the designs were complete.
Try out the clickable prototypes (tip: click the prototype and press “F” to go to fullscreen mode)
07
Lessons Learned
Teens are passionate about learning and growing and many said schools did not offer enough support or training on how to start a career. But this is also a big problem with a lot of things to balance like legality, schooling for students, connections to banks, protecting students and more!
This app would fill that gap, allowing students to begin exploring a creative career years ahead of graduating while pursuing opportunities to improve through mentoring and peer support.
Testers were excited about the support the app offered as well as the ability to not compete against more advanced, adult freelancers. One user said, “I want this app to exist. It would help me figure out how to market my designs online safely!”
There is still more to be done to get this website and app handed off to developers. There are other user flows that were not completed with the responsive website and no user testing was completed. Plus, some difficult issues that arise when allowing adults to interact with minors via a computer interface really need to be worked out.
But in concept, I think this app could help a lot of teens improve their skills and earn some money, which will boost their confidence.