UI/UX, Branding + Identity
Critical
A platform and identity for online critique.
Overview
0-1 Design for Critical, a critique platform. As a researcher and designer, I planned and conducted research, synthesized results, and developed the interface. Additionally, I created a complementary brand identity.
Timeline
9 Weeks Winter 2024
Team
4 designers / researchers
Roles
User Researcher, Product + Visual Designer
Tools
Figma, Lottie, Photoshop, Illustrator
Problem Space
Critique is critical in the design process
Our Idea
Showcase
Meet Critical
Your all in one hub for everything critique
UPLOAD PROJECTS
Submit a request for either a written evaluation with a single media piece, or a preference poll for multiple versions.
GIVE CRITIQUE
Offer feedback to individuals globally, and to those in circles.
VIEW FEEDBACK
Examine AI-analyzed summaries of both textual and survey responses.
TAKE ACTION
DESIGN SYSTEM
RESEARCH
We began our research with a competitive analysis of existing channels for critique. We analyzed Canvas, Discord, CritiqueCircle, and MarkUp.io. I focued on Canvas, an educational management platform.
Pain points include
Only instructors can set up critiques.
Comments get lost in the Canvas interface.
Only one piece of media can be submitted.
comments are difficult to see
Secondary
Secondary research though literature was used to supplement our findings and ground our assumptions. We found that:
Peer/informal critique is perceived as a positive experience (McDonald, 2018).
Online platforms for critique have been tried in the past and have been successful (Hatziapostolou, 2010).
Critique is essential in industry, however is inherently uncomfortable (Gibbons, 2023).
Critique can foster friendship and community through interdependence (Wang, 2023).
Primary
Primary research was conducted through 5 one-on-one semi-structured interviews. Qualitative analysis was conducted using transcripts.
"the biggest thing you can take out of [Critique] is just like the improvement in feedback that comes afterwards." - LP1
"…on this person's account, there's a sense of… community almost being fostered to, like help this video to get to its best motion design, aspects and aesthetic." - AD1
"Bad experiences are people not giving any feedback or giving feedback that doesn't make much sense." - CS1
"…channels for receiving criticism may be limited." - AD1
"I am a big poll person. I'm a huge fan of A/B testing." - KP1
Insights
Critique to Build Community
Critique, especially in a classroom, provide a space for honesty and feedback, leading to more meaningful interactions between people.
The Importance of Context
Context is needed to inform people that are giving critique benchmarks to measure work, and to ensure the general objective is not warped.
Area of Need
Echoing insights from our competitive analysis and secondary research, a dedicated platform for critique was desired, with A/B testing as well.
Personas
We synthesized our research to create two personas, and by doing so, were able to gain a better understanding of our target demographic. We used our findings to define their characteristics, objectives, pain points, and desires.
We synthesized our research, and created a how might we statement.
Problem Statement
How might we create a dedicated and organized space to critique openly?
DESIGN
Ideation
After discussion between executing through a physical or digital medium, our team settled on a website. We focused on desktop screen sizes due to concerns we had with content legibility on small screens.
Our team did a crazy 8’s sprint exercise, and came up with a lot of ideas for the direction of our platform.
We critiqued and filtered to end up with 3 main ideas:
A sprint function to incentivize action from critiques, using a time limit.
A project archive with dates and project iterations.
A pop-up profile card for added context.
Wireframe
Usability Testing + Iterations
From our wireframe, we created 3 main user flows to use for usability testing with 4 participants. These flows represent core functions of our platform: uploading a project, critiquing a project, and viewing feedback.
Sprint Function
Participants were confused about the sprint button, there was too much information on the screen, and we had concerns regarding development viability with having a native editor.
Viewing Feedback
Viewing feedback was decentralized and confusing for participants.
We centralized feedback and added AI summarization for synthesis.
Clarity + Context
Navigation was unclear, with no universal nav bar.
High Fidelity Screens
We wanted a fresh interface to appeal to our target demographic. Our prototype was crafted to be fully interactive using smart animate. Additionally, we used Figma boolean variables + conditionals to ensure conditions are met before uploading a project and submitting a critique. We also included the following features:
Personal profiles
Project archive
Hero + onboarding pages
BRANDING
Logo
We took inspiration in a critical hit from a video game or comic. As critique is inherently uncomfortable, we positioned our visual identity to be vibrant and inspiring.
Style Guide
Degular Variable by OH no Type Company was used as the main typeface as it is variable and has ink traps. The logo was made using Altivo.
Reflection
This was my first real end-to-end design project with the entire process. There were a lot of things I learned, including:
Critique Often, Critique Always
We received a lot of informal critique from over 20 people! Huge thank you to everyone that helped guide our design and choices. Critique is immensely important in the design process, however our major lacked in critique culture. We found lots of interesting insights into critique, and we have hopes that critique can become more integrated into our major and beyond.
More Figma!
Aesthetics were sacrificed for the sake of prototype interactivity for the text fields. This was also my first fully fleshed out design system, and it was so nice to utilize Figma variables for consistency and responsiveness.
Visual Direction is Key
Branding and visual direction is important, especially because our product space is competitive, so I learned more Photoshop and Illustrator... Honestly it was a lot of fun creating designs, especially the animated logo, and mockups for the brand. I grew a lot as a visual designer, and this project turned out to be super fun!
