Redesigning a Global Bank to hold onto their local community & roots
![laptop screen mockup of the business checking webpage for Bank of the West](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/80bdce66-a691-43cb-920a-573f1fafbfde_rw_1920.jpg?h=da5236fae773402423762029826bc113)
Project Role
User Interface Designer
Visual Designer
Design & User Experience Strategist
Visual Designer
Design & User Experience Strategist
Project Scope
Six months of design for agency with a large-scale banking website client, and directly responsible for Business Checking and About Us/Policy sections of the website. Involved in image curation, editing, and visual design to meet brand voice guidelines sitewide. Strategic consultant and UI designer for site layout design and component use and creation within the brand design system. Coordinated with designers in other areas to maintain UI and design system unity across all website sections.
Awards
![three iphone mockups showing parts of the Bank of the West business checking website](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/ecfa0bec-8896-43c4-9073-601be2f5a63e_rw_1920.jpg?h=0bba763ea002ad5600b17443b4aa9673)
Building a Brand Voice for Supporting local businesses that "break out of the box"
Bank of the West entered this redesign project with a focus on their stance and desire to be a leader among the sustainable banking movement. This provided a clear direction for voice and tone. Working on the small business sections of the site gave me the opportunity to directly guide and build up that voice. This process started with image curation where I strove to find diverse imagery that represented a wide range of small business interests ranging from individuals to independent enterprise. Working beyond the basic images, I worked to develop a cutout style treatment where the final form of images would be seen cut "out of the box" to represent their new way of thinking. This format was used to break up square "corporate" feeling images and create a sense of natural connection.
![photocollage of images taken to build a sense of brand voice. Images show a range of diverse people engaging in small business feeling objectives and nature focused outdoors activities](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/7e39f624-5c4f-4cca-862a-c44b7881621d_rw_1920.jpg?h=d4eea2b8b2999f98ece6beb453eb9a1e)
![snowboarder sitting on the snow. they image has been cropped so that parts of the snowboarder extend beyond the square frame and appear to break out of the box.](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/4d63dd98-2b25-4102-9bd5-3a8110d07036_rw_600.png?h=8da8e905c3ccf062c568085e4e785567)
Building graphics that show customers the real tech and the real impact of the bank
I created a wide range of graphics and digital mockups to represent technology options available to customers and business owners. I also developed graphics based on annual report information to include in informational company mission pages.
![Card option with rewards that give back to environmental causes](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/8dd7799c-9d5b-4bf5-852b-c542b3226a15_rw_600.png?h=fde1fdb61cd06d28767bb3888984cada)
Card option with rewards that give back to environmental causes
![mockup of a business account app](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/6789608b-8185-407c-ae41-2869b6ffbb50_rw_1200.png?h=9e8f00a73c08744021d619863c42d33a)
mockup of a business account app
![mockup of business checkout devices and hardware](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/0a2c91e1-9fee-4643-a4e6-c1a6bb1130e7_rw_1200.png?h=7c62cc97c9a9224ed633c7302a179c54)
mockup of business checkout devices and hardware
![graphic chart showing where the bank invests community resources.](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/ca152f7f-83f2-4bcb-a18f-e616efa791c7_rw_1200.png?h=0c6352670e529492065292dd829cd5fa)
graphic chart showing where the bank invests community resources.
Pairing partner graphics to their impact areas and showing where your bank invests your money for good
Part of the Bank of the West mission involved partnership with organizations across the wide range of environmental causes they championed. In creating these graphics, I researched each partner org and developed treatments for highlighting them in a unified style either as hero images or badges used across the site.
![Alvéole: Urban Beekeeping](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/7323c5a9-8579-4a69-88c6-38e774243924_rw_600.jpg?h=1c3800834286f51ea7f6516f8f9a5115)
Alvéole: Urban Beekeeping
![The Conservation Alliance: background natural cave formations](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/bd51bc0c-96e9-45ed-8d6c-e7c8f6385480_rw_600.jpg?h=3a153ba98a7d22ba44ebfbaef27da34f)
The Conservation Alliance: background natural cave formations
![1% For the Planet: Business giving with an environmental focus](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/55a9fea5-85cc-42ba-bd27-f0726ab8a4a0_rw_600.jpg?h=014d1d921a6dd1583b65abc60959171b)
1% For the Planet: Business giving with an environmental focus
![Protect Our Winters: Outdoor recreation conservation](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/fa5227a9-67ff-40f3-b27b-fda250840ae3_rw_600.jpg?h=cb8385d062075759baa1815ed82d7884)
Protect Our Winters: Outdoor recreation conservation
![](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/fedaff89-67b9-443b-8bd6-ca8d8d96312f_rw_1200.png?h=605db4a6b23a4adce632f1497223d0e0)
Expanding the Design System while building lo-fi pages
The low fidelity concepts primarily explored how to best show information heavy pages without overwhelming visitors. I displayed concepts using existing component structures and patterns and also developed multiple new patterns and design system components to serve specific information needs. I was later tasked with fully developing the new components to be documented in the Bank of the West design system.
![Lo-Fi Company Overview](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/f95335d3-68bc-46cc-b123-df4a206c573f_rw_1920.png?h=7531148dbb89e36f9d72ddbd71f6c1f0)
Lo-Fi Company Overview
![Lo-Fi Policies Concept](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/6683e84e-dc88-4c2d-96fb-d1cdf2e37928_rw_1920.png?h=88d482051416c2be6fc44771974fdfa8)
Lo-Fi Policies Concept
![Lo-Fi Expanded Policies](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/71ecc31c-1d5e-48af-ac0f-daad4b46dbf3_rw_1920.png?h=6113a4a897b51c6827163591dc68e0a7)
Lo-Fi Expanded Policies
![Lo-Fi Nested Policies](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/e21eb312-5eef-4726-8945-f7cb9a5af2c0_rw_1920.png?h=7ccfb90c29e509c160a56a9a7d3b9896)
Lo-Fi Nested Policies
![Lo-Fi Community Impact](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/c2221fa7-527e-4d65-b186-46b48cb454b4_rw_1920.png?h=f49bf9d2d01a2aa4cd00beb5d1e31da8)
Lo-Fi Community Impact
![Lo-Fi DEI](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/0f8c16c9-4b0f-4657-8196-3d9c91d40cb4_rw_1920.png?h=26028514e47f22efee868af49e3c6bc0)
Lo-Fi DEI
Bringing the Voice & character to design concepts
In the hi-fidelity stage I began to incorporate images and graphics into the concepts, while collaborating with the bank team on discussing voice and specific image choices. I was also implementing new patterns for cards, tables, other specialized components I worked on such as a horizontal accordion window. Following image conversations and approval I would create the cutout treatment used in the final website.
Business Checking Section
![Striking a balance between friendly character and important information](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/498968b5-f952-4ddd-b9ff-634945fc730f_rw_1920.jpg?h=f4b748bd35b00d96ea793cc8129b5a5e)
Striking a balance between friendly character and important information
![Organizing important information for readability](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/8163edc6-86be-4e91-aa83-d660678a38c3_rw_1920.jpg?h=3065550b5e95dff4cb4f43e636bf966d)
Organizing important information for readability
![Reusable Modules show throughout the site](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/ebf1ccfd-b03b-4584-9d1d-f155030c6928_rw_1920.jpg?h=92fcf8aaf2a366553066634bdf783e11)
Reusable Modules show throughout the site
Why Us Section
![Using infographics with the words of the president to highlight Community Impact](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/576ffb28-04f8-4f85-8d2e-e43fe8ca7e4f_rw_1920.jpg?h=083dd553d105622c7933167919f1eb0a)
Using infographics with the words of the president to highlight Community Impact
![Graphic visualizations of impact paired with new Design components deliver important initiative information](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/58b03a64-5f54-4c9d-af36-9279086597f1_rw_1920.jpg?h=ba4e8d8026831ca8c0eb76bb89a32c47)
Graphic visualizations of impact paired with new Design components deliver important initiative information
![Partner graphics drive to important bank initiatives](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/e827b68c-d359-4aa7-a314-be06e2dbbb77_rw_1920.jpg?h=4508bd7ba1576517665087d0bc69fdae)
Partner graphics drive to important bank initiatives
Final designs for a fundamentally different bank
![photo mockup of the Why Us webpage for bank of the west as seen on a laptop screen showing the headline "we are a fundamentally different bank"](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/8feb4ba4-fd19-44c8-bcae-df2ec06abd2d_rw_1920.jpg?h=459f7e62a647c35ef6a02f5c52ce5e9e)
![Website page describing why Bank of the West is different than other banks, showing environmental focuses, testimonial video previews and messages from the president. The image has been cut into 3 pieces for size considerations.](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/de0df9ba-cd18-4435-b07d-50da6c909936_rw_1920.jpg?h=3e431045ce0c8ed250d2f08083f15904)
![3rd photo in a series of 3 showing the Website page describing why Bank of the West is different than other banks, showing environmental focuses, testimonial video previews and messages from the president.](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/cf3f4fac-9360-4a0b-8341-909941f10817_rw_1920.jpg?h=91b000675cf58f0bad133bc961eff20b)
![](https://cdn.myportfolio.com/3c620df0-0fbc-405f-a18c-ae1bfeb6bdf8/dc2605c5-95e5-403c-acbd-6b1c1e382d72_rw_1920.jpg?h=24a2b3ff81e335a84b79a6238e72bff9)