--- title: Work | JS Design --- Work | JS Design [Skip to content](https://www.jakestringfellow.design/portfolio/js-design#main-content) [![JS Design Logo](https://www.jakestringfellow.design/hubfs/Logo/JS%20Design%20Logo.svg "JS Design Logo")](https://www.jakestringfellow.design/?hsLang=en) [Resume](https://www.jakestringfellow.design/hubfs/Jake%20Stringfellow%20Resume%20-%20Product%20Designer.pdf?hsLang=en) [Work](https://www.jakestringfellow.design/work?hsLang=en) [![](https://www.jakestringfellow.design/hubfs/Icons/LinkedIn%20Icon.svg)](https://www.linkedin.com/in/jacobdstringfellow-636008118/) - [Home](https://www.jakestringfellow.design?hsLang=en) - [About](https://www.jakestringfellow.design/about?hsLang=en) - [Work](https://www.jakestringfellow.design/work?hsLang=en) - [Play](https://www.jakestringfellow.design/portfolio/tulum-aesthetics?hsLang=en) # JS Design ## Design Systems | Brand Identity Thank you so much for visiting! ![JS Design laptop mockup with home page screenshot](https://www.jakestringfellow.design/hs-fs/hubfs/Portfolio/JS%20Design/JS%20Design%20laptop%20mockup%20with%20home%20page%20screenshot.jpg?noresize&width=1163&height=1139&name=JS%20Design%20laptop%20mockup%20with%20home%20page%20screenshot.jpg) ## Overview The goal of the **Museum of American Armor** (MOAA) is to bring the sights and sounds of American history to a new generation, and thereby pay tribute to those who have dedicated their lives to defending our freedoms. Their exhibits and interactive reenactments present a virtual time machine designed to assist in telling the seminal story of American courage, valor, and sacrifice. Overview  JS Design is a brand I've championed to represent my own design skills and abilities. RESPONSIBILITIES - Branding - Design Systems - Web Design SOLUTIONS For the brand styling I utilized contrasting color combinations. I've always taken great notice of balanced design and greatly appreciate the right contrast and accents in brand identity. The light and dark color combinations along with the vertical and horizontal layout options provide more than one design solution. CHALLENGE I enjoy designing minimally complex design assets. I wanted to implement this approach in business cards to represent my abilities and skills, along with my own personality and individual style. I also enjoy balanced design and options, I enjoy having more than one option for design solutions. The Final When creating the logo, my goal was to establish a professional, yet innovative look. The negative space creates a small J along with the geometric style J on the outside. By using simple straight-forward shapes, the innovative professional look was satisfied. ![JS Design logo concepts from sketch to digital](https://www.jakestringfellow.design/hs-fs/hubfs/Old%20Porfolio/JS%20Design/JS%20Design%20logo%20concepts%20from%20sketch%20to%20digital.jpg?noresize&height=2000&name=JS%20Design%20logo%20concepts%20from%20sketch%20to%20digital.jpg) ![JS Design logo concepts with color scheme](https://www.jakestringfellow.design/hs-fs/hubfs/Old%20Porfolio/JS%20Design/JS%20Design%20logo%20concepts%20with%20color%20scheme.jpg?noresize&width=1828&height=1942&name=JS%20Design%20logo%20concepts%20with%20color%20scheme.jpg) ![JS Design typography and button styles](https://www.jakestringfellow.design/hs-fs/hubfs/Old%20Porfolio/JS%20Design/JS%20Design%20typography%20and%20button%20styles.jpg?noresize&width=1832&height=1284&name=JS%20Design%20typography%20and%20button%20styles.jpg) ![JS Design business card mockup](https://www.jakestringfellow.design/hs-fs/hubfs/Old%20Porfolio/JS%20Design/JS%20Design%20business%20card%20mockup.jpg?noresize&width=1830&height=1928&name=JS%20Design%20business%20card%20mockup.jpg) ## Typography ## ![Brand Font choices - Primary - Address Sans Pro & Secondary - Abril Display](https://www.jakestringfellow.design/hs-fs/hubfs/Portfolio/MOAA/Brand%20Font%20choices%20-%20Primary%20-%20Address%20Sans%20Pro%20%26%20Secondary%20-%20Abril%20Display.jpg?width=300&height=167&name=Brand%20Font%20choices%20-%20Primary%20-%20Address%20Sans%20Pro%20%26%20Secondary%20-%20Abril%20Display.jpg) ## Color Palette #EDBF4A #847965 #252e2d #242D2B #e8e8e8 ## Challenges MOAA was suffering from a severely outdated, archaic website and online presence when I first started this project. This lack of branding, design, and UX architecture was limiting the museums ability to reach online users, get in-person visitors and gain new volunteers. - Visual Design: Stuck in the early 90's. Poor design fundamentals, hierarchy, and site architecture. - User Experience: Lacking excitement and engagement opportunities. No expression of an experience or storytelling. - Brand Identity: Virtually no brand consistency or identity. Dated color palette, typeface and logo. ## Solutions The strength of MOAA is the experience they have to offer. My goal was to tell their story by creating an interactive, valuable experience for the user to enjoy. I also wanted to increase engagement and SEO to reach the end goal of more visitors and volunteers for the museum itself. - **Visual Design:** I implemented a modern, clean design to the website through effective white space usage, intentional typefaces and a new consistent design system. - **User Experience:** Working collaboratively with the Content team, we revamped the navigation and created strategically placed CTA's and forms for engagement. - **Brand Identity:** The client wanted to maintain their logo, which introduced a possible obstacle, however I was able to maintain the logo while still building and reestablishing the brand through a new color palette, style guides and consistent layouts throughout the site. ![Screenshot of old MOAA website with dated design and architecture](https://www.jakestringfellow.design/hs-fs/hubfs/Portfolio/MOAA/Screenshot%20of%20old%20MOAA%20website%20with%20dated%20design%20and%20architecture.jpg?noresize&width=1351&height=1409&name=Screenshot%20of%20old%20MOAA%20website%20with%20dated%20design%20and%20architecture.jpg) ## Pain Points - ##### Lack of Engagement Opportunities - ##### Not Mobile Responsive - ##### Lack of Hierarchy - ##### No Engaging, Compelling Visuals - ##### Poor Site Architecture - ##### Lackluster Brand Styling ## Wireframing ###### FEATURED CTA'S Users need a simple "in-your-face" way to engage with the museum. ###### EXHIBITS FEATURE The biggest attraction, visually and historically for the museum is the range of operable exhibits (vehicles, artillery, etc.). This needed to be interactively featured as near to the fold as possible. ###### VISUALS ARE KEY Exhibits are best expressed visually. Incorporating high quality image placeholders in the wireframe was important. Both in the hero and in the modules below. ###### REUSABLE MODULES Each exhibit category has it's own coded interactive slider for shuffling through exhibit info and imagery. This gives the user options for exploring while also organizing information in an easily digestible way ![Wireframing of MOAA home and exhibit pages](https://www.jakestringfellow.design/hs-fs/hubfs/Portfolio/MOAA/Wireframing%20of%20MOAA%20home%20and%20exhibit%20pages.jpg?noresize&width=1000&height=951&name=Wireframing%20of%20MOAA%20home%20and%20exhibit%20pages.jpg) ![Mobile screenshot of MOAA homepage](https://www.jakestringfellow.design/hs-fs/hubfs/Portfolio/MOAA/Mobile%20screenshot%20of%20MOAA%20homepage.png?noresize&width=528&height=998&name=Mobile%20screenshot%20of%20MOAA%20homepage.png) ## Mobile Optimized ![Mobile Screenshot of MOAA Contact Us page](https://www.jakestringfellow.design/hs-fs/hubfs/Portfolio/MOAA/Mobile%20Screenshot%20of%20MOAA%20Contact%20Us%20page.png?noresize&width=528&height=998&name=Mobile%20Screenshot%20of%20MOAA%20Contact%20Us%20page.png) #### Engaging, Quality Visuals Communicating a *unique experience* is accomplished in the redesign by simply utilizing images of the museum and events. ![Mobile Screenshot of MOAA Navigation menu](https://www.jakestringfellow.design/hs-fs/hubfs/Portfolio/MOAA/Mobile%20Screenshot%20of%20MOAA%20Navigation%20menu.png?noresize&width=528&height=998&name=Mobile%20Screenshot%20of%20MOAA%20Navigation%20menu.png) #### Increased Engagement Opportunities Forms were incorporated for all pages as well as calls-to-action for contacting, volunteering and donating to the museum and its work. ## Impact After launch of the redesigned website, user engagement increased by 66%. Strategic interaction design called for more engagement opportunities (CTAs and forms) and the implementation of these opportunities resulted in more in-person visitors, donors, and volunteers. Incorporating compelling, engaging visuals allowed users to see the *unique experience* the museum has to offer as a consistent, compelling, modern brand. ![Experience History MOAA Homepage screenshot in macbook](https://www.jakestringfellow.design/hs-fs/hubfs/Portfolio/MOAA/Experience%20History%20MOAA%20Homepage%20screenshot%20in%20macbook.jpg?noresize&width=1715&height=1442&name=Experience%20History%20MOAA%20Homepage%20screenshot%20in%20macbook.jpg) # More Work #### [![FinPay Mockup with logo ghosted on green background](https://www.jakestringfellow.design/hubfs/Portfolio/FinPay/FinPay%20Mockup%20with%20logo%20ghosted%20on%20green%20background.jpg) FinPay Web Design | UX | AI Generation](https://www.jakestringfellow.design/portfolio/finpay?hsLang=en) #### [![Pure Source Foods mockups on iphone](https://www.jakestringfellow.design/hubfs/Portfolio/Pure%20Source/Pure%20Source%20Foods%20mockups%20on%20iphone.jpg) Pure Source Foods Brand Design | Design Systems](https://www.jakestringfellow.design/portfolio/pure-source-foods?hsLang=en) #### [![Screenshots of MOAA website](https://www.jakestringfellow.design/hubfs/Portfolio/MOAA/MOAA%20Redesign%20homepage%20screenshot.jpg) MOAA Redesign Visual Design | UX](https://www.jakestringfellow.design/portfolio/moaa?hsLang=en) #### [![Screenshots of Clear Energy website](https://www.jakestringfellow.design/hubfs/Portfolio/Clear%20Energy/Clear-Energy-Solar-Mockups.jpg) Clear Energy USA Brand Identity](https://www.jakestringfellow.design/portfolio/clear-energy?hsLang=en) ## Some of our happy customers ![Logo placeholder one](https://7528302.fs1.hubspotusercontent-na1.net/hubfs/7528302/raw_assets/public/mV0_d-cms-growth-theme_hubspot/growth/images/industry-images/customer-logo-one.png) ![Logo placeholder two](https://7528315.fs1.hubspotusercontent-na1.net/hubfs/7528315/raw_assets/public/mV0_d-cms-growth-theme_hubspot/growth/images/industry-images/customer-logo-two.png) ![Logo placeholder three](https://7528309.fs1.hubspotusercontent-na1.net/hubfs/7528309/raw_assets/public/mV0_d-cms-growth-theme_hubspot/growth/images/industry-images/customer-logo-three.png) ![Logo placeholder four](https://7528304.fs1.hubspotusercontent-na1.net/hubfs/7528304/raw_assets/public/mV0_d-cms-growth-theme_hubspot/growth/images/industry-images/customer-logo-four.png) ## Built with you in mind Lorem ipsum dolor sit amet, consectetur adipiscing elit. ### Quick setup Lorem ipsum dolor sit amet, consectetur adipiscing elit. ### Easy to use Lorem ipsum dolor sit amet, consectetur adipiscing elit. ### Customizable Lorem ipsum dolor sit amet, consectetur adipiscing elit. Get started ## See things in action Lorem ipsum dolor sit amet, consectetur adipiscing elit. No video selected Select a video type in the sidebar. ### A suite of tools at your disposal Lorem ipsum dolor sit amet, consectetur adipiscing elit. ![Product name](https://7528304.fs1.hubspotusercontent-na1.net/hub/7528304/hubfs/raw_assets/public/mV0_d-cms-growth-theme_hubspot/growth/images/industry-images/feature-one.jpg?width=500&height=300&name=feature-one.jpg "Product name") ### Product name Lorem ipsum dolor sit amet, consectetur adipiscing elit. Learn more ### Product name Lorem ipsum dolor sit amet, consectetur adipiscing elit. Learn more ![Product name](https://7528309.fs1.hubspotusercontent-na1.net/hub/7528309/hubfs/raw_assets/public/mV0_d-cms-growth-theme_hubspot/growth/images/industry-images/feature-two.jpg?width=500&height=300&name=feature-two.jpg "Product name") ![Product name](https://7528311.fs1.hubspotusercontent-na1.net/hub/7528311/hubfs/raw_assets/public/mV0_d-cms-growth-theme_hubspot/growth/images/industry-images/feature-three.jpg?width=500&height=300&name=feature-three.jpg "Product name") ### Product name Lorem ipsum dolor sit amet, consectetur adipiscing elit. Learn more > “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis accumsan velit sit amet sagittis malesuada.” > > ![Shaun Benson, Marketing Manager, Agriflora Inc.](https://7528311.fs1.hubspotusercontent-na1.net/hubfs/7528311/raw_assets/public/mV0_d-cms-growth-theme_hubspot/growth/images/testimonial.jpg) > > Shaun Benson, Marketing Manager, Agriflora Inc. ## Latest posts Lorem ipsum dolor sit amet, consectetur adipiscing elit. ## Contact us Lorem ipsum dolor sit amet, consectetur adipiscing elit. facebook-f icon linkedin-in icon Twitter icon instagram icon - Menu Item 1 - Sub-menu Item 1 - Another Item - Sub-menu Item 2 - Menu Item 2 - Yet Another Item - Menu Item 3 - Menu Item 4 --- [![JS Design Logo](https://www.jakestringfellow.design/hubfs/Logo/JS%20Design%20Logo.svg "JS Design Logo")](http:/?hsLang=en) Huntington, NY, 11746 j[acobdstringfellow@gmail.com](mailto:jacobdstringfellow@gmail.com) Copyright © 2024, Jacob Stringfellow