Work: product design, user flows, prototyping, visual design, front-end, animation, chatbot design
Team: The Crazy Ones
Tools & tech: HTML, SCSS, JS, Sketch, Framer, SVG, JS, GSAP, Jade/Pug, GitLab, Cactus, AWS
In the summer of 2016, my partner and I did some prototyping work for an app for rating things called Telepat (not to be confused with Telepat). We also helped the team with their brand identity and website.
Your browser does not support the video tag. Your browser does not support the video tag.
As usual with this type of blue-skies projects, we started with a design sprint based on Google Ventures’ model to narrow our focus and collect the whole team’s thoughts and ideas in one place. After two more weeks, we decided to use a conversational interface mixed with some traditional patterns, so we moved into character design, aiming for an abstract, spirit-like feeling similar to the way Siri and Cortana are represented.
Apart from UX and some light design systems work, I was mostly focused on building a high-fidelity prototype of how the chatbot should look and feel. I’m not a visual designer, but I do enjoy taking a break from systems-related work from time to time. Using GSAP, SVG and good old Cactus (still using it from time to time), I built hi-fi prototypes of the homepage, voting and profile pages, as well as a pattern library that served as an impromptu design system for the dev team. I ended up building a small API for the prototype, allowing everyone on the team to simulate different experiences using simple calls accessible through the browser’s console.
The “face” of the chatbot is also API-controllable. I built a morphing SVG template that allows developers to plug in any monochrome SVG (including text-only SVG for short messages) both client and server-side. Any changes made to the face’s content are morphed smoothly, regardless of the total amount of nodes.
As I mentioned, I also took part in designing and developing the marketing website for the company behind Telepat.
Check out the live prototypes: