menu
Guest Check
date
Todaytable
3server
shannonnumber
2020/2021-
QtyItem$
-
11Product Design Appetizers11000
-
1Primi: Drop-in10000
-
1Secondi: Standard American Playing Cards10000
-
1Hackathon side dish2000
-
15Type, Lettering & Logo Desserts15000
-
-
Check receipt
*** DESIGN DINER ***
Server: Shannon Miwa
Table: Yours
Yrs
Desc
Co
1.5
Senior Product Designer
- small design team
- build consistency in main product
- build/maintain/curate design system
- design new features
- collab. w/eng to build out features
- create groundwork for product to scale
- organize communications & plan projects
Karat
3.5
Senior Product Designer
- one of two designers on sites team
- maintained and improved developer experience
- developer docs/support articles/marketing website product planning
- user research on developers for better DX
- project management work to fill in for lack of PM
- paired with eng & other design to create and test features
- projects range from 1 day to 2 year launch
- designed next generation of docs for GraphQL launch
- kickstarted design system
Braintree
1
Creative Developer
- heavy frontend work
- built out frontend HTML/CSS, Wordpress sites, mobile web app for clients
- learned the ropes of PHP and some JS
- design support for clients without designers
- even used an API to accept donations
Software for Good
5
Designer
- huge range of work
- tranditional graphic design branding, advertising, brochures, logos
- letterpress printed and designed wedding invitations
- worked on web applications and feature proposals for large banking clients
- variety of website coding and design for smaller clients
- project managed letterpress shop and client/printing coordination
Swayspace
A Handful of Tasters
Just some screenshots of end or mid-states for a range of product work.
See the Pen LMqRWg by shannpersand (@shannpersand) on CodePen.
See the Pen make this stupid dropdown flexy work by shannpersand (@shannpersand) on CodePen.
Drop-in: Mini Case Study
Drop-in is a Braintree product that is used for accepting credit card and PayPal payments. As one of my first and longest lasting projects at Braintree, I led the redesign of this product working closely with engineers and other designers, plus many other stakeholders and teams to create a digital product that would have a long shelf life.
The original Drop-in was an isolated iframe that merchants could include on their website as a snippet of code, with a bit of integration. It was a product meant to have a low bar for entry which would allow merchants to accept payments easily while not having to go through a lengthy compliance process.
This was great for merchants, but for Drop-in users, the interface for Drop-in was fairly confusing. There were no clear input borders and the design was pretty opinionated, it didn't always mesh with Merchant's websites. Some Merchnts were even sending out annotated screenshots to their customers explaining how to pay.
I spent much of the first part of the project working on product and feature placement within the Braintree/PayPal ecosystem. There was a lot of research done on how the product could coexist with others and whether it should just be killed.
During this time we were able to establish that the product was actually doing quite a bit of volume and did have brand name recognition, both factors that pushed for a redesign rather than a sunsetting.
The project started as a fairly basic exercise in light visual and UX refinements. There was lots of experiementing with different placements and trying to solve usability issues like making inputs more obvious and less opinionated in order to blend in with Merchant checkouts.
Then, the payment methods started coming out. Left and right, everyone was coming out with their own payment method from Visa Checkout to Apple Pay, all of a sudden we had to prepare Drop-in to accomodate myriad options. Scaling!
We settled on a fancy customized dropdown as the direction. This was in order to minimize the space on the Merchant's checkout and be less of an obtrusive element on the page. There were two main directions we tested, one that was a two step process and another that could be a one step process.
The two step process had the advantage of funneling the user down a path and removing distraction, and the single step process had the advantage of speed.
Between user testing and speaking with the consumer group at PayPal, we found that though usability wise there were no issues with the dropdown, there were other considerations that would affect the design. There was a cognitive cost for a user to open a dropdown, not knowing what is under it and needing to parse out that information.
There were also considerations like Merchants and payment methods wanting their logos to be displayed prominently, and Merchants wanting payment methods to be visible upon page load.
So, we stepped back and did a little loop into some earlier sketches that were based more on a radio/accordion selection process. We re-used the idea of funneling the user down a path for clarity from the dropdown approach, but refined it so that Drop-in now behaved more like an isolated widget all to itself.
Then, we tested the shit out of that version. We built a little fake store with all the directions in them and ran users through different flows getting them to complete checkouts in various ways to make sure there were no issues.
Throughout all this, we were busy refining, refining, refining. The aesthetic got closer and closer to something that was both modern but generic enough to sit on a wide range of pages.
There were mobile web considerations.
And other screen considerations, making assets and icons pixel perfect for display, but also having to code up IE9 fallbacks.
Finally, we hit release after all the perfecting. There was so much more to this than just pushing the code, we needed to create assets and documentation for the new version, tutorials and work with marketing to adjust the website, not to mention communicate to account managers the need for Merchants to upgrade their versions, no small task.
We got Merchants processing millions of dollars to upgrade.
And most of our top selling Drop-in Merchants moved over. Many of their sires looked great with the upgrade.
The product has been out for a while now and, hey now, look at those payment methods scale!
However, as much effort as we put in over this two year project, we never did figure out a way to get absolutely everyone to do the right thing. ¯\_(ツ)_/¯
Standard American Playing Cards
I spent another two years of my career making some playing cards. These cards started as a side project as I was learning to play bridge at work lunches. I thought it would be really nice to create some custom playing cards for our group, but I had no idea it would morph into something so much bigger and more fraught.
I'm sure you've seen these before, just some generic playing cards. I tried to think of how I could make mine unique, but what I started to realize was just how pathetically Eurocentric the 'default' set is.
Every project I do, I approach from a product angle. I spend a lot of time conceptualizing and refining that concept, researching and trying to figure out the core of the project, doesn't matter if it's a deck of cards or a payment product.
I started to sketch with better representation in mind, and it got complicated and confusing. I struggled with making them different and obviously diverse, but at the same time trying to maintain the "traditional" aesthetic, in order to serve as a straight replacement, potentially without anyone really noticing.
Adding the patterns and coloring for each card and making them consistent with one another, but still unique to each face card required so many revisions and sheer willpower to keep going. But as in my regular product design day job, I know through iteration that each version will bring me closer to the aesthetic that's in my mind.
I iterated and iterated on the face cards and kept refining the patterns. There's a lot of back and forth and trying things out, testing things together and letting go of certain parts that just don't work.
I did a fair amount of design system creation, making a custom typeface that included the suit pips and the numerals/letters. Every deck needs the same consistency in its design system to work together as a whole but still allow for easy differentiation.
Sometimes with a design system, I'll take an idea or a sketch like this ace of spades, and the first sketch or idea will almost nearly end up to be the final.
Then, the challenge becomes trying to get that idea to mesh well with others and apply it to other areas of the product effectively in order to grow the system and make a cohesive product.
There's always room for refinement and growth and one of the hardest parts of design is knowing when something is really done.
There's a user interface for physical products, and when designing for print that always needs to be taken into consideration. The way things face or sit on a 3D object and considerations when designing are not so different from anticipating user needs on a web form.
The same sort of detailing and thought goes into these decisions and how interactions work whether it's the lettering on a deck of cards box or the pixels on a credit card icon.
You can sure as hell bet when you go to print there's some damn user testing and prototyping, too. In many ways, 'go to print' is so much harder and irreversible than 'ship it'.
I aim for the same level of thought and care with any design I do, regardless of the qualifier of graphic, UI/UX, product or who knows what else they're gonna come up with next.
And, if you're curious, you can read a thing I wrote about the struggle of it all, because writing is an invaluable design skill, too.
A Hackathon Side Dish
You may be wondering if I do any projects under two years. Well, yes I do! I'm throwing this one in just as a real quick and dirty job in contrast to the two year sagas.
Karat does software engineer interviewing, and a key part of the product is the playback video for each interview. These playback areas show the candidate answering questions and coding. For the hackweek, my team's prompts were to do something with an audio wave form and something with adding chapter markers to an interview video.
Day 1: After one of my teammates fiddled with a plugin for a second on the first day, he'd pretty much completed the prompt by the end of the day. My job then felt like pretty much just adding colors to it.
Everyone was at a bit of a loss for the second portion with the audio wave form, so I started playing around in some sketches trying to figure out where it could fit in.
This is a totally different take than some meatier projects where I started with very clear concepts and research, but in my design process there's room to start from any part of the process and then loop through each one as they come, it's not necessarily linear all the time.
Day 2: In this case, after just playing around with sketches an idea started to form around creating a better playback tool for the page.
Day 3: Working closely with my teammates we figured out a basic structure for things and pulled in the keystroke activity as a third helpful item on the new navigator that would dovetail nicely with the audio waveform.
Day 4: There was some decision making around the styling and things were evolving into a pretty solid concept.
Day 5: The handoff was fast and furious, and the day ended with me shipping a flexbox fix just as the demos were beginning.
Result: We tied for the people's choice award at the end of the day, and in the spirit of doing things out of order discovered an entirely new user group for our hack. That group was so excited that this humble little hack project is headed for the official roadmap.
I love a range of design work, from the two year epics to the week crunch and last minute shipping of the hack project. Of course, most of the day to day falls somewhere inbetween, but everything about my design process and skills can be found in the range of these projects.
Miscellaneous Sweets
