Aaron is a multi-disciplinary designer with a focus on product design. With over 15+ years in the field, he’s had the opportunity to work with agencies, consultancies, in-house and non-profits but currently prefers helping out smaller start-up teams. Some previous experiences include IDEO, Google, R/GA, Frog, Verizon, Citi, GE, Betaworks and Instapaper.
At the moment he resides in California with his wife Tina and two parrots, Taco and Burrito.
aaronkapor@gmail.com
209.604.7702
About This Site
This site is an evolving work-in-progress with selected samples from current and past projects. Equal parts process and final deliverables, it’s meant to showcase thought patterns that are unique for each project in order to create a true variety of work. It was coded and compiled with Jekyll.
Kudos is a feature that lets users send quick, unsolicited feedback – not exclusive to, but catered towards the workplace – between coworkers and/or team members.
Kudos are cards that animate with predefined themes and can include user-added messages to correspond with the theme’s headline.
Matter is a service that allows professionals to send and receive quick feedback from their peers and collegues. Members are able to choose from an assortment of skills and set-up recurring feedback on a cadence of their choosing. Designing the feedback process was a fun challenge but this was one the few places where I was helping improve an existing design system, instead of owning it myself.
There was 4 phases to this second iteration of the feature.
Selection (Themes)
Illustration
Animation
User Interaction (UX/UI)
1. Selection (Themes)
There was only a few of us that were a part of this naming exploration and our contrasting sensibilities were on full display.
Three on the list were part of the original batch (Amazing Job, Team Player and Thank You) that users already had access to, so it made sense to keep those free. We chose 8 for the in-app upsell pack and focused more on those (and the wildcard back-ups) during sketch sessions.
2. Illustration / Sketching
Given Matter's preexisting color pallete and overall aesthetic, I decided very early on to try a style in the vein of paper cut-outs – reminiscent of Matisse's later works or even David Hockney. Obviously nowhere near the level of those two but mostly trying to use the right references in coordination with what Matter had given us to work with.
Simple, quick (average of 5 min), mostly flat sketches.
3. Animation
We had an in-house animator who would be handling most of the production but it's always good to comp some animatics for reference in regards to style, cadence and timing. Two of the main factors we considered were the following.
Easily Animated – Simple enough to work as an animated svg/gif?
Scalability – Iconic enough to read at smaller sizes within the feed?
Figuring out how these would work within the app took a lot of trial and error with testing and prototyping. I got it down to a simple system that was in line with the Feed Item project I was working on in unison to this one.
The initial state would be static with the animation being triggered by the user – temporarily fading out the message. For desktop it would be triggered on hover and on mobile when scrolled into view.
4. User Interaction (UX/UI)
Along with the revamped Kudos feature, I was updating our composer – the main mechanism for sending/requesting feedback (hightlighted below).
The new design uses a large tabbed menu at the top with Kudos intergrated as one of the main three feedback-related actions.
Each tab has an expanded state triggered differently.
Request opens when the "Customize Settings" CTA is selected
Give opens when a name or email is entered
Kudos reveals more options upon clicking "Show More"
As part of the Workspaces package the expanded state displays upsell themes that can be unlocked when an account gets upgraded.
Working with the FE engineer, we threw in a contextual drop-down menu within the message box to quickly toggle themes and preview the locked ones as well.
Feed-item density was a concern on my part. One of my main goals from the beginning was to try to tone down Matter's overall aesthetic (quite the battle) because when everything on the screen is demanding your attention simultaneously, the UX obviously suffers.
Since these were being designed as bolder headlines and shoutouts within the feed, we wanted them to stand out but also being conscious that they had the ability to take over and overwhelm (as seen below).
A cap for truncation needed to be figured out within the feed and the character limit for when the message is expanded. We landed with 3 lines for the initial view and an overall limit of 300 char.
Entry/access points were pretty straightforward for this since it was bundled up with other user actions throughout the app. Between the two main sections - personal and workspace – and the shared composer module (which was redesigned along with this project), the UI is essentially the same.
