Young Professionals in Infrastructure

Young Professionals in Infrastructure

YPI is an industry-focused nonprofit organization that was founded in 2015 by young professionals active in the US infrastructure space. The website is for members & partners to register for events, participate in fellowship programs, and stay up to date with organizational initiatives. I acted as a consultant for YPI and led UX and art direction for the site redesign.

ROLE & DURATION

Lead UX Designer | Sep - Nov 2019
Art direction, Information Architecture, Interaction, Brand & Identity, Prototyping

 

 
TEAM

John MacDonald | Engineer

YPI-MobileHero

Mobile view of homepage

I collaborated with an engineer and designed the YPI website. A modular, scalable interface that empowers stakeholders to restrategize content in tandem with the growth of the organization.

I collaborated with an engineer and designed the YPI website. A modular, scalable interface that empowers stakeholders to restrategize content in tandem with the growth of the organization.

I collaborated with an engineer and designed the YPI website. A modular, scalable interface that empowers stakeholders to restrategize content in tandem with the growth of the organization.

The project framework was based on user personas, content, and stakeholder needs.

ypinfrastructure.com allows users to learn and engage with the organization. The site is focused around two key use cases - one is mission-driven and stable, and one is based in dynamic programming initiatives.

The project framework was based on user personas, content, and stakeholder needs.

ypinfrastructure.com allows users to learn and engage with the organization. The site is focused around two key use cases - one is mission-driven and stable, and one is based in dynamic programming initiatives.

YPI-User

• YPI Leadership (stakeholder)  • Current members + partners • Potential members + partners

YPI-Content

Two content types: one is mission driven and stable, and one based in dynamic programming initiatives.

YPI-Needs

• Ability to edit content + programs • Filter/search feature for events • Member and Newsletter CTA

Analysis of industry and aspirational competitors showed that users expect powerful imagery, comprehensive mission content, plus event and membership initiatives.

Analysis of industry and aspirational competitors showed that users expect powerful imagery, comprehensive mission content, plus event and membership initiatives.

Analysis of industry and aspirational competitors showed that users expect powerful imagery, comprehensive mission content, plus event and membership initiatives.

Analysis of industry and aspirational competitors showed that users expect powerful imagery, comprehensive mission content, plus event and membership initiatives.

YPI-Navigation

User flows changed over time.

Content grew as stakeholders received feedback from members. Page categories were added and started to overwhelm the navigation. It became clear we needed to restructure the site map.

I worked with stakeholders to prioritize content and consolidate it into 4 pages.

User flows changed over time.

Content grew as stakeholders received feedback from members. Page categories were added and started to overwhelm the navigation. It became clear we needed to restructure the site map.

I worked with stakeholders to prioritize content and consolidate it into 4 pages.

Crafting UX with a product prototype:

I presented mid-fidelity site prototypes and discussed page interactions and modals with the Engineer. We collaborated to ensure stakeholder requirements were achievable within the project timeline.

Crafting UX with a product prototype:

I presented mid-fidelity site prototypes and discussed page interactions and modals with the Engineer. We collaborated to ensure stakeholder requirements were achievable within the project timeline.

YPI-Wireframes

Mid-fidelity prototypes created in adobe illustrator

How can I add some more structure to the page?

Combining menu items created more opportunities to develop a narrative with dynamic visuals, but also lead to a lengthy vertical scroll. Instead of category dropdowns, I chose in-page navigation. This allowed me to lay out a large amount of information in a vertical space and helped different users orient themselves on the page.

How can I add some more structure to the page?

Combining menu items created more opportunities to develop a narrative with dynamic visuals, but also lead to a lengthy vertical scroll. Instead of category dropdowns, I chose in-page navigation. This allowed me to lay out a large amount of information in a vertical space and helped different users orient themselves on the page.

YPI-InpageNav

Final site design showing in-page navigation

Establishing our story by creating a visual identity.

I use visual design as a tool to help me understand stakeholders and empower them to make decisions. Following research and consultations with the stakeholders and engineer, I created a style guide and UI kit.

Establishing our story by creating a visual identity.

I use visual design as a tool to help me understand stakeholders and empower them to make decisions. Following research and consultations with the stakeholders and engineer, I created a style guide and UI kit.

QuestaAlphabet

Questa Sans

YPI-Typescale

Typographic scale

YPI-Color

Color system

YPI-Buttons

Button styling

YPI-InfrastructureImages

Dynamic photographs of the industry support our narrative.

Dynamic photographs of the industry support our narrative.

Members are highlighted with genuine and inclusive imagery.

Members should feel represented through authentic images. We document our events and source photographs that showcase our diverse and engaging community.

Members are highlighted with genuine and inclusive imagery.

Members should feel represented through authentic images. We document our events and source photographs that showcase our diverse and engaging community.

YPI-MemberImages

Presenting high-fidelity prototypes to drive decision making:

Presenting high-fidelity prototypes to drive decision making:

Presenting high-fidelity prototypes to drive decision making:

YPI-Homepage-01

Homepage

YPI-About

About

YPI-MemberDetail

Member detail

YPI-Events

Event Calendar

YPI-EventsDetail

Event detail

YPI-Membership

Membership

YPI-JoinNow

Join now

Going live and launching the network.

Going live and launching the network.

YPI-EventScreenhero

Event page desktop and mobile view

Home - desktop scroll

About - desktop scroll

Membership - desktop scroll

Conclusion

The redesigned website resulted in a member acquisition increase by over 100% within the first month. Along with an Engineer, I was able to fully integrate an events calendar with filtering options based on location and event type. Executives from Young Professionals in Infrastructure continue to successfully update events and programming initiatives and the user flow and design remain intact.

Members are highlighted with genuine and inclusive imagery.

Members should feel represented through authentic images. We document our events and source photographs that showcase our diverse and engaging community.