This is a different case study
Portfolios are usually all about those shiny success stories, Well, I'm gonna write about some epic fails I've had as a designer. At first, I tried to sweep those oops moments under the rug and only show off the shiny stuff.
But then I thought, along with the story of building tangibl i will mention about my mistakes too.
First what is tangibl
Tangibl is an app for learning conversational skills. Here, users can join role plays, debates, or discussions anonymously. They can receive peer reviews and reports on their soft skills. They can also get advice and reports from certified mentors to improve these skills.
I helped the team create the brand identity, design the interface, and make prototypes.
Chapter one
Challenges
I was provided the following needs and constraints
- A way for users to speak without the fear of being judged
- Past events in the session must be accessible at any time
- Interface must be simple to use and understand
- Metrics about the sessions should be available to understand and improve
What did I do
Working as the only designer at an early-stage startup during the middle of a pandemic brought its own set of personal and professional challenges. I’d be remiss to not mention that here first and foremost.
During my 8 months with Tangibl, I was all things design. This included designs and interaction across the entire product, design System, branding, a share of marketing, website design, onboarding + an overwhelming amount of other shelved ideas that still live scattered throughout my Figma files today.
Chapter two
Obsessive Components Disorder
In the early days my workflow was very linear. I would work with components in a file, create dummy screens, and take my time to build the components. Later, I would combine all the components into the final screen, present them on slides, explain the flow, and get approval.
I learned that not everything has to be a component, and not every element needs a million properties. Even a large application can run smoothly with just a few components and a detailed style sheet. Without detailed documentation or close collaboration, your screens and flows are just pixels, nothing more.
Chapter two
Key features that we built
Anonymity was a core principle that we brought to the identity of Tangibl. We wanted our users to speak without bias or revealing their identity. So we brought in avatars and Pseudo naming system.
In a session, participant do have some magic with them. They can save a voice clip of the last 40 seconds or toss in a live comment for the speaker. I made around five different versions of these interactions. Juggling interactions on dynamic elements can be a bit of a headache with all the potential outcomes.
The actual creation part is not the tough bit. It's thinking past the first step. It’s what really ties it all together.
What starts it off ?
What if you bail on the app ?
What if it doesn't quite make it to the finish line ?
How do you put a stop to it ?
In short, I kinda wish I had these things in mind when I was piecing them together.
The testing and dev phase
I built all the screens based on the wireframes provided and worked on the interactions. But, getting the developers to understand these concepts was a tough cookie. They got the flow, but the detailed animations I made for every screen component slipped through the gaps - they just weren't aware they existed.
Prototypes were super important to get a feel for how your project's gonna work, and to test things out without having to build the whole thing. No doubt! But remember, they don’t have to be a carbon copy of the app with every last pixel covered, including those tiny interactions and flashy animations that just make it unworkable!
Closing things
Observation in the end
We spotted things we missed in our Testflight builds and Beta Testing modes, which was super handy for making tweaks on the fly. One sweet spot we managed to hit was improving the interaction for Insta feedback and Claps.
We slid in a hint text for the speakers for their first three sessions, letting them know they can double-tap a speaker to give a Clap and save the last half-minute of the session. And with this tiny maneuver we saw a 30% increase in engagement on Claps.
A final note: Learn from the past. Embrace it. Take what worked. Leave behind what didn’t. But, learn the why behind both.
Unfortunately, Tangibl faced some scaling challenges and had to cease operations by the end of 2023.
Up next