Product Design
UI/UX Design
Product Design
Android Mobile Application Design
Brandon is a hybrid (design/front-end development) leader committed to reducing user friction with technology to provide the best possible UX. He believes consensus-driven decision-making is key to getting the best outcomes while using available data. He is known for clearly explaining the thought processes behind his design decisions and welcomes critical feedback.
Not everyone has experience tending sheep, harvesting produce on a farm and then becoming a CNC programmer/metal worker in a fabrication shop as a teenager. Talk about humble beginnings. It all started in a small-town in Illinois.
Not satisfied with small-town life or being a metal worker, Brandon made a big move to Tampa, FL where his career began as a full-time graphic designer, becoming adept in printed graphics and prepress processes/production while concurrently attending college full-time.
After falling in love with his amazing wife in Tampa, Brandon made his second big move to Washington, DC metro area to be with her and her family. Brandon continued refining his skills as a designer and began working with the web.
Brandon's passion for designing and creating things in the digital realm continues. His experience has expanded to mobile and web applications, always keeping a user-centric focus.
Volunteering made easy.
Yoop is a volunteer facilitation system. Most of these systems are overly complex and expensive, often requiring training and occasionally even a user manual. Yoop aims to make the volunteer management process intuitive at an affordable price for any organization, whether large or small. We have other more ambitious goals, but we are starting simple.
At the very beginning, my colleague presented this project to me as a money-making business venture, providing a unique service. I knew I had to orient the conversation toward user-centered goals to create a successful web application. I also had to limit the scope for the initial design, as it had so many features my head was going to explode.
I asked a few simple questions. Who are the primary, secondary, and tertiary users? What kind of goals do they have? Why would someone want to use this application? We interviewed five non-profit organization managers, a few business owners, and some people that regularly volunteer to learn how they use volunteer applications and their greatest needs.
I dug deeper into researching the market and found quite a few volunteer signup applications on the market. I had to figure out what would separate us from the crowd. Many competitors had bad UI's that appeared busy, dated, and overly complicated with choices. No one was teaming up with local businesses (merchants) or giving rewards for their volunteer time. Many did not offer a good opportunity search engine or their very own personalized landing page. We began to see how we could separate ourselves from the crowd.
Yoop will be an easy-to-use volunteer management system at a reasonable price, being affordable for both large and small non-profit organizations or corporations. Yoop will also provide a way for local businesses to partner with non-profits in their community.
The number of features and level of effort required to get this application off the ground was overwhelming. I had to figure out what was most important (our MVP). Plotting the main high-level features was a good way to work through this. Yoop had to be effective at managing the volunteer recruiting process at a minimum, so that became our focus.
The initial rough wireframes were built using Balsamiq Wireframes to strap the app together as quickly as possible while ignoring the aesthetics. I started with a mobile layout to envision a condensed UI.
The high-fidelity prototypes were built using Sketch and Invision, using the Craft plugin to sync. I changed to a desktop layout since this is the primary use case and to save time.
I created a design system that includes a style guide and Sketch library. The style guide is a "living" style guide, meaning the same code is used for the app and style guide. This provides a single source of truth for what our styles are and makes managing all the moving parts much easier. It also provides the React JS code for fast copy-and-pasting, making it ideal for long-term development.
Being a regular volunteer in my community myself, creating Yoop has been a fulfilling experience. It started with an idea and now we almost have a completed MVP. Taking an idea through the design thinking process is a lot of work, but provides the best outcomes.
Yatri AIS
Yatri AIS, our visa appointment processing system, is an essential part of providing U.S. visas for half the countries with U.S. consulates around the world. After filling out a Form DS-160 on a federal website, many times applicants are required to attend an in-person consulate interview, provide biometric data, and/or submit necessary documents. Yatri AIS facilitates this process.
Many people are not comfortable going through this process and hire third-party processors to do it for them. Whatever the case, I wanted to make it as easy as possible for them. Redesigning the home page is a step toward making things better.
I needed to understand how our users come to our site. I went to Google Analytics to find the data. I learned our main landing page was not getting used hardly at all. This seemed like a waste. Almost all traffic was going directly to our sign-in or country-specific landing pages (50 countries & 23 languages), which made sense. But what if someone goes to our main landing page? Shouldn't they feel comfortable moving forward from there? Absolutely! I was determined to make it happen.
We have only one competitor, CGI, so I wanted to ensure we do a better job than them. It was pretty simple, the site appears dated and only provides information initially. There is no clear user flow from their home page. They are using SalesForce to render a terrible UI to process applicants. We have a custom-built system. We are better.
Although people must use our website to get their US visa, the landing page's purpose will be understood, telling the user what they need to do. The flow to get started is quick and obvious. Users can choose their language and log in from the main landing page after selecting their country and visa type. The page will be dynamic and better than our competitors.
We went through several iterations of layout designs and flows. These images show our quick sketches from one of our sessions. The important stakeholders understood these chicken scratches because we created them together.
I created two high fidelity prototypes. One prototype in Sketch and Invision to demonstrate the flow and visual style. Then I coded another one later in HTML, SCSS, and JavaScript to illustrate all the animations and micro-interactions.
The VisaOps program is hard to brand because it's a federally funded program run by a private contractor, meaning we can't use the DOS brand.Not using the DOS brand can lead to distrusting the authenticity of our website since it's not a ".gov" URL. Convincing the public our site is trustworthy and the official DOS site is an issue I had to address.
To provide user confidence:
The first four steps in our user flow were inefficient. When landing on the main home page the user had to go through four different screens before logging in. Each screen had a different look, making the authenticity appear questionable. Combining the screens to speed up the flow was the solution.
Applying for a visa is a stressful process. It's long and arduous. I wanted to do my best to make users as comfortable as possible while using our site and even possibly provide a glimpse of hope for them to get their visas. I accomplished this by using:
The UI is more intuitive. Select your country. Language changes to country's main language. The Visa type selection and definitions are displayed. Select Visa type. Choose to continue, learn more, sign-in, or read the important announcements.
See the interactions in action by watching the video below. Animations were another delightful enhancement for improving the UX in this new design. Note: The language translation tokens have not been added in the example shown, thus you don't see the language changing.
Many more updates went along with this project. The entire Yatri AIS application was reskinned. There were some UI pattern updates as well, like the page headers on every page and our forms that appear in cards. The color scheme was updated to look American.
Redesigning the home page will help users quickly understand why our service exists and get them moving in the right direction. Taking on this endeavor being the soul designer was a challenge I warmly welcomed. The feedback I received after presenting at our annual conference was super rewarding. They loved it. I can't wait for it to go live.
Web Application Design
Yatri Preload is a small application Brandon designed from the ground up to help consulate personnel "preload" applicant information into their system. He created an interface that allows the user to do the job quickly with ease and also added some fun animations to enhance the user experience.
Android Mobile Application Design
Paperless GEL is an Android mobile application that allows staff users to check in applicants when they come to our facilities. Brandon redesigned the UI for an improved flow and aesthetics using the Material Design style library. This mobile application's UI had to be responsive for tablet and mobile-sized screens.
Web Application Design
Yatri AIS is used by half the U.S. visa applicants around the world to schedule interview appointments, mail documents, and provide biometrics to the U.S. Department of State. Brandon has actively maintained and created new UI's for numerous features added to this application over the years. Some other updates include creating a design system with a style guide, Section 508 compliance (accessibility of UI), complete re-skin, and search engine optimization improvements. Brandon also codes many UI updates himself.
UI/UX Design
Hill's Guide Service specializes in catching huge catfish from lakes in Illinois. Brandon designed and coded this website to put a focus on the services provided and the fun his clients have catching huge fish.
UI/UX Design and Content Management
Brandon designed the UI while collaborating with a broader team on the functional purpose of the home page and other page templates used for the site. He also prepared the prototypes for development by writing technical specifications for developers, creating CSS style guides, and slicing images. He tested the new CMS templates for quality assurance as well as oversaw content production of new pages.
NQF went through three UI design iterations for various parts of the website, including the home page, during Brandon's tenure. The last two used the Bootstrap framework.
Brandon also oversaw the daily maintenance of the website, which included managing a team of Web Producers, mass-email management, hand-coding some HTML and CSS daily, and using the Bootstrap framework.
Web Application Design
Brandon designed the UI while collaborating with a team on the functional design for the Quality Positioning System (QPS) web application.
NQF went through two UI design iterations for QPS during Brandon's tenure.
UI/UX Design
Brandon designed the UI. Brandon also prepared the web designs for development by writing technical specifications, CSS style guides, and slicing images.
UI/UX Design
Brandon designed the graphical user interface (GUI). Brandon also prepared the web designs for development by writing technical specifications; CSS style guides, and slicing images.
UI/UX Design
Brandon designed the UI. Brandon also prepared the web designs for development by writing technical specifications, CSS style guides, and slicing images.
UI/UX Design and Development
Brandon designed and developed the DC Ventures LLC website from scratch, working directly with the client to gather requirements. The development required HTML and CSS.
UI/UX Design
Brandon redesigned and coded the United Bank website, working directly with the client to gather requirements. Development required HTML, CSS, JavaScript and ASP coding.
UI/UX Design & Collateral
Brandon designed and developed the RhemaWord.org website. He also established new branding in various applications for the church including stationery, newsletters, presentations, and flyers. Development required HTML, CSS, JavaScript, and PHP coding.
Brandon also provided the daily maintenance for the website.
UI/UX Design & Collateral
Brandon designed and developed the Wellmade website. He also established new branding including stationery, brochures, sales materials, swatch boards, presentations, flyers, and a trade-show booth. The development required HTML, CSS, and JavaScript coding.
Brandon also provided the daily maintenance for the website.
UI/UX Design & Collateral
Brandon designed and developed the Carpet Concepts website. He also established new branding in various applications including stationery, brochures, flyers, and truck decals. The development required HTML, CSS, and JavaScript coding.
UI/UX Design & Collateral
Brandon designed parts of the BR-111 website. He also designed and produced a micro-site, magazine ads, 100+ page reference manual, flyers, postcards, presentations, and Flash animations.
Tradeshow & Magazine Ad Design
Brandon designed and produced magazine ads and tradeshow signage for the Fashion Week International tradeshow theme.
Tradeshow, Ad, & Collateral Design
Brandon designed and produced magazine ads and tradeshow signage for the Fashion Under Foot brand.
Identity & Magazine Ad Design
Brandon designed and produced the logo, magazine ads, reference manual, and merchandising unit signage for the Essentials brand.
Identity & Magazine Ad Design
Brandon designed and produced the logo, architect library swatch box, sales presentation, reference manual, and merchandising unit signage for the BR-111 Design & Architectural Series brand.
Magazine Ad Design
Brandon designed and produced these magazine and flyer ads for the Antiquity Hand-Scraped Engineered brand.
Website, Video, & HTML Email Design
Brandon designed parts of the BR-111 Foundation website. He also collaborated on the design and produced a promotional video, HTML Email Newsletter, and other related pieces.
Packaging Design
Brandon designed clothing packaging and signage for tradeshows. He also designed and produced sales materials.
