Bryce Watson's Design Portfolio

Role

UX Designer

Company

Elavon, subsidiary of U.S. Bank

Time Frame

Aug 2018 - Jan 2020

Team Style

Solo Designer

Tools

Sketch, Figma, UserTesting.com, Adobe Illustrator, After Effects

Elavon, subsidiary of U.S. Bank

Designer Version

How do we make our documentation as helpful as possible?

As any developer will tell you, coding without documentation is a bit like flying without a radar. Having clear, concise, and approachable technical documentation not only makes devs lives easier, but it can be used by our sales team as a powerful marketing tool. The previous documentation hub, known as Developer Portal, was lacking in several aspects: visual clarity, performance, accessibility, and the technology had several layers of technical debt. The decision was made to scrap the previous site entirely, and build something completely new: an AWS integrated, markdown powered CMS running on Grav. Elavon has thousands of pages of technical documentation, so converting it from PDF and organizing it was no small undertaking.

I worked with our digital Illustrator Keith Rosemond and my manager Robbie Beers on this project.

This page covers my work as an accessibility specialist. If you are looking for my designer work, you can go here:

Goals

Quickly Browse

Our documentation was originally written for paper, making the content about 50% longer than we needed it to be for web. Quick navigation also requires consistent headings, tables, and diagrams which were not present in the original.

Integrated Code

Syntax highlighted code snippets and executable code samples were a key target for bringing the documentation in line with modern standards. Redoc was used to maintain consistency in our RESTful API specs.

Focus on self-service

We sought to optimize several processes that currently require a phone call, from scoping a customer's payment integration to getting test card data to run dummy transactions.

Information Architecture

Style Guide

Personas

Persona 1 - Katherine works for a small business and has been asked to set up a website. She knows her limits and will try to limit larger, more complex requirements that will require more time than she has. She prefers to use commerical off the shelf software to fill gaps in her implementation to reduce overall level of effort

Persona 2 - Sami loves solving hard problems. He expects RESTful APIs in line with modern standards, but he is faimliar with other varieties. He expects clean designs, clear techincal communication, and he wont call a customer support line unless someone really twists his arm.

Persona 3 - Olivia leads a team of developers. She recives daily updates about their progress. She is making commitments to business stakeholders regarding launch dates and when features become available. She determines whether an integration partner is leading to success.

Persona 4 - Sophia has always loved reading, so her fading eyesight is a real sorrow to her. She tried recorded books, but she didn’t like listening instead of seeing the words in front of her. As a bookkeeper for 25 years, she made the transition from ledgers to a software program, so she’s happy to use the computer. She has an oldhome computer, which she uses the same way she always did her work—carefully checking everything as she goes. She loves getting emails fromher grandkids (and a few friends). She likes reading magazine articlesonline, especially when they are free. Last year, she discovered that shecould get her prescriptions more cheaply online, and now she buys somethings from the web.

Persona 5 - Jacob is a paralegal in a large law firm. He reviews cases and writes summaries, cross-referencing them to the firm’s own cases and clients. He’s building expertise in his area of law and is hoping to go to law school in a year or so.As far as Jacob is concerned, it’s the technology that’s handicapped, not him. When everything is in place, he can work just as fast and just as effectively as anyone in his office. He’s a bit of a gadget geek, always trying out new tools, looking for a little edge and something new.

Persona 6 - The nice thing about being a graphic artist is that most of the time his work can speak for itself.When he first started working, most reviews were done in meetings, but more and more his agency works with clients using online workspaces. He’s had some projects recently where all of the communication was through the web. Although he likes seeing live reactions, it’s easier for him to participate in the project forum discussions using text rather than audio. His iPhone has also been important. It was his first phone with a good way to do video chat so he could talk to his friends who sign.

Persona 7 - Lea was on track to become the editor of the magazine she worked for when she started having numbness in her hands and feeling completely fatigued by the middle of the afternoon. She tried medications and exercise and getting enough sleep, but finally she had to make a change in her life.She found a job where she could work from home, on her own schedule. When she has good days, it’s like nothing is wrong. But on bad days, she measures every action so she can make it through the day. She’s lucky: the company understands that it’s a real disability. With aninvisible disability like fibromyalgia, some people just don’t get it.

Persona 8 - After graduating from Indian Institute of Technology, Madras,Dyia went to a postgraduate program at UC Berkeley. Her work on visualizing data landed her a job with a multinationalmedical technology company. Diya was diagnosed with glaucoma and her eyes have been getting steadily worse, despite treatment. She can adjust her monitor and her phone, but many of the technical programs she uses don’t have many options, so she has started using a screen magnifier and high-contrast mode.

Persona 9 - Trevor is a bright 18-year-old who plays games and watches music videos on his laptop. He lives at home with his parents and younger sister. He attends a special school where the teachers and staff can help with his social and communication challenges from his Autism Spectrum Disorder, while he works to pass his high school exams.He has problems with visual information and recognizing things on the page, and his reading skills are not helped by his trouble concentrating on the page or screen long enough to read. His teachers showed him how to make the text bigger on the page, and told him how to use a printable view to hide all the ads with moving images that distract him, because he reads every word on the page very carefully and literally. He can be easily confused by colloquialisms and metaphors. He can also be overwhelmed by sites that offer too many choices.

User Journey

Sketches

Landing page

Landing page continued

Products

Transaction APIs

404 page not found

Plugin marketplace

Let's get in touch

Sign on/sign up

Password reset

Forgot password

Low Fidelity Mockups

Product Documentation Home Page Low Fidelity Mockup

High Fidelity Mockups

Product Documentation Home Page High Fidelity Mockup

Product Detail Page High Fidelity Mockup

Dark Mode

Contact Us Page Dark High Fidelity Mockup

Product Documentation Home Page Dark High Fidelity Mockup

Marketplace Page Dark High Fidelity Mockup

Product Detail Page Dark High Fidelity Mockup

Mobile High Fidelity Mockups

All designs in this project were required to be fully responsive. 4K and tablet designs are omitted for brevity.

Home

API Products

Customer Service

Transaction APIs

Contact Form

Animations

Animations to enhance the API product categories.

Tools: Adobe Ilustrator, After Effects

Animations to add movement to U.S. Bank's icon catalog

Mobile Prototype

Takeaways

Communication is key

We tried several methods of design hand off, and eventually settled on a two lane hand off stream - Zeplin for business or marketing folks that just wanted a preview, and a Bitbucket based Sketch repo for the developers to see a responsive view of the designs. Once the output streams were settled, there weren't any kinks in the hand off process.

Flexibility is a requirement

There were times when I was coordinating the two different sites - in the EU and North America - where requirements would come down and no one could say where they came from. Often times they were from a EU stakeholder I had never met, but you can't let a little variety ruin your mojo. I worked with stakeholders on calls to make sure that the EU team was satisfied, even if it meant somewhat splintering the designs from each other in the short run.

Good teamwork is essential

Often the blockers on this project were caused by developers trying to be Superman - only to end in sliding schedules. The best results come from Development and UX working in tandem.

Elavon, subsidiary of U.S. Bank

How do we make our documentation as helpful as possible?

Goals

Quickly Browse

Integrated Code

Focus on self-service

Information Architecture

Style Guide

Personas

User Journey

Sketches

Low Fidelity Mockups

High Fidelity Mockups

Dark Mode

Mobile High Fidelity Mockups

Animations

Animations to enhance the API product categories.

Animations to add movement to U.S. Bank's icon catalog

Mobile Prototype

Takeaways

Communication is key

Flexibility is a requirement

Good teamwork is essential

Thank you for reading!