Kritiq.it

Problem

Asking for feedback on your drawings from your family may have worked when you’re a kid, but when you’re a fledgling designer things may not work out as well. Concepts such as typography, negative space, and accessibility may not be known by the people closest to you. Furthermore they may hold back on the feedback because they don’t want to hurt your feelings. At times like these, having a community of designers to go to is quite useful, but not everyone has that. There are so many apps to connect people to one another, so wouldn’t it be nice to have one specifically for designers?

What is Kritiq.it?

Kritiq.it is a web application that allows fledgling designers to connect to one another and improve their work through collaboration. Users can post their designs onto the site and tag their post with what specifically they want critique on, and other users can then post comments with critiques to the original user.

Processes

In Winter quarter 2021 our team took a class called COGS 121 - Interaction Design, a project-based course where students designed a web application and learned software tools. We were given several weeks to design and create a functioning web application based off of the following topics: Presenting Information, The Quantified Self, Removing Barriers to Learning, Social Technologies, Sound Feedback, Mindulness, and Creative Creativity. Each topic had certain constraints that had to be met, and after much contemplation, our team chose to focus on the collective creativity prompt.

Research

We researched other sites that may be similar to our own web application, such as Dribbble and Behance, and noted features that were missing from them. These sites were often used as portfolio sites, so it would be difficult to receive critques on designs from there. We also researched different frameworks we can use and found that React.js would work best for our purposes.

Design

We first began with creating a paper prototype for our app. We drew out different screens for the application and imagined how one screen would transition to another. Although we were required to use paper prototypes, we found that they were good for iterating over ideas because they were cheap and easy to scrap.

Afterwards, we took what we had from the paper prototypes and converted the screens into wireframes on Figma.

We wanted our web application to be friendly and inviting, so we used bold fonts and bright colors to create a welcoming atmosphere.

Our high fidelity prototypes combined our low fidelity protypes and design systems together.

User Testing

We had three separate students in the same class hop into a zoom meeting with us to test out our paper prototypes. We had one team member act as a "magician" who controlled the paper prototypes, while one other team member instructed the student on what to do.

Takeaways

Overall, we learned quite a bit about the design process through this project! Our team found that although we may not agree with the processes taught in the class, they were still beneficial for getting used to iterating. For example, coding the UI after designing low fidelity prototypes turned out to be troublesome for our developers because their code needed to be revamped after we created the high fidelity prototypes.

In the future, we would like to add a way for users to highlight certain parts on designs that they want to call attention to when they create their critiques.