case study of Creadly
App & Responsive website for boosting teenagers’ creativity
UX design.
Chris Szwarc
App & Responsive website for boosting creativity
Project overview
Project duration:
December 2022 to January 2022.The product:
CREADLY is a mobile application and responsive website that allows teenagers to boost their creativity through everyday art assignments.
Our goal is to deliver software that engages teenagers and awards
them for a well-made effort. Our typical user is 12-17 years students interested in art or developing their creative thinking.
My role
UX designer designing a mobile app and responsive website for nonprofit organization Creadly -social goods from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wire-framing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs. Visual design and branding.
The goal
Design a user-friendly app and responsive website to help solve everyday creative assignments and develop creative thinking.
the problem
There is not too many free application that helps boost teenagers' creativity through art to help them develop skills they can use to solve problems in a new originative way.
Understanding the user
USER RESearch
personas
problem statments
User journey Maps
Step 2
User research: summary
I conducted interviews and created empathy maps to understand the users I was designing for and their needs. A primary user group identified through research was teenagers who want to learn new skills and solve problems from more creative perspectives.
This user group confirmed initial assumptions about using apps to bust their creativity. Still, research also revealed that access to the application should be free to allow all users to download and use it without any limitations.
We found out that users are interested in some awards for doing a creative task, and we focused on it.
Personas
Problem statement:
Xo is a 14-year-old schoolgirl from the suburb of San Francisco. She attends many after-school activities like clarinet, advanced math, and Chinese.
She is swamped during the day, but she knows that the world is so competitive that she needs to do more than others to succeed.
She would like to train her creativity but doesn’t have much time.
Problem statement:
Helena is a 13-year-old schoolgirl from a big modern city. She loves to draw and makes short cartoon movies. She spends time crafting stories and reading books.
She is frustrated about not having enough resources to develop creativity. She would like a place with creative tasks to work on her imagination.
Starting the design
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
Step 2
Digital wireframes
As the initial design phase continued,
I made sure to base screen designs on feedback and findings from the user research.
step 1
Paper wireframes
Taking the time to draft iterations of each website screen on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
StEP 3
Screen wireframe size variation(s)
Step 4
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of an art assignment usability study as an example of a working website.
Usability study: parameters and findings
Study type:
Unmoderated usability study
Location:
United States, remote
Participants
5 participants
Length:
20-30 minutes
Usability study findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups.
The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings
1
Participants had trouble with deleting selected photo
2
Some texts on buttons have confusing action
3
Users would like to vote for added answers
Round 2 findings
1
Participants had trouble with deleting selected photo
2
Some texts on buttons have confusing action
3
Users would like to vote for added answers
Refining the design
Mockups
High-fidelity prototype
Accessibility
Step 1
Mockups
Early designs didn’t allow to delete of a photo in the uploading process,
but after the usability studies, I added this option because it was a crucial function when the user selected the wrong picture.
Our about
Mockups
Early designs allowed for some customization,
but after the usability studies, I added more blocks on the main page to enable users to have access to the essential information on the main page
Our about
Mockups
Our about
Mockups: screen size variations
I included consideration for additional screen sizes in my mockups based on my earlier wireframes.
Because users can use website in many different situations, I felt it was essential to optimize the browsing experience for a range of device sizes, such as mobile and tablet, so users have the smoothest experience possible.
Our about
High-fidelity prototype
I included consideration for additional screen sizes in my mockups based on my earlier wireframes.
Because users can use website in many different situations, I felt it was essential to optimize the browsing experience for a range of device sizes, such as mobile and tablet, so users have the smoothest experience possible.
Accessibility considerations
1
I used headings with different sized text for clear visual hierarchy
2
I used landmarks to help users navigate the site, including users who rely on assistive technologies
3
Check the colors in the app if they are compatible with a color accessibility guideline
Going forward
Nextsteps
1
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
2
There is not too many free application that helps boost teenagers' creativity through art to help them develop skills they can use to solve problems in a new originative way.
3
There is not too many free application that helps boost teenagers' creativity through art to help them develop skills they can use to solve problems in a new originative way.
Takeaways
What users think
The app makes users feel like they can practice their creative thinking every day. One quote from peer feedback: "I can use the Creadly every day. Even I am on the bus when I go to gymnastics training"
What I learned:
While designing the Creadly App, I learned that the first ideas for the web were only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs and helped to achieve the goal for the users and us as a company.