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
Ali Lauzon | Stakeholder
Mobile view of homepage
I collaborated with an engineer and designed the YPI website. A modular, scalable interface that empowers stakeholders to edit content in tandem with the growth of the organization.
I interviewed stakeholders and performed site audits of industry competitors, synthesizing findings to build features and establish business goals. One of the essential business goals was to create a product that YPI could successfully manage and operate on its own. The long-term impact of this would be time and money saved on design and site maintenance fees.
I collaborated with an engineer and designed the YPI website. A modular, scalable interface that empowers stakeholders to edit content in tandem with the growth of the organization.
I interviewed stakeholders and performed site audits of industry competitors, synthesizing findings to build features and establish business goals. One of the essential business goals was to create a product that YPI could successfully manage and operate on its own. The long-term impact of this would be time and money saved on design and site maintenance fees.
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 Leadership (stakeholder) • Current members + partners • Potential members + partners
Two content types: one is mission driven and stable, and one based in dynamic programming initiatives.
• 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.
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.
Mid-fidelity prototypes created in adobe illustrator
How might we 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.
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.
Questa Sans
Typographic scale
Color system
Button styling
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.
Presenting high-fidelity prototypes to drive decision making:
Presenting high-fidelity prototypes to drive decision making:
Presenting high-fidelity prototypes to drive decision making:
Homepage
About
Member detail
Event Calendar
Event detail
Membership
Join now
Going live and launching the network.
Going live and launching the network.
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.