User Experience | User Interface
+ Company: VMLY&R +Programs: Sketch | Invisionapp
+ Duration: May 2021- November 2021 + Role: UI Designer + Deliverables: Desktop and Mobile solutions
The YMCA Louisville
Website and Mobile Site
The YMCA Louisville hopes to echo the same presence and transformation the YMCA National site experienced in their website. YMCA hopes to make sure all their local YMCA sites to look unified and connected.
Overview
In 2020, the national site for the YMCA had gone through a transformation in their branding and site to an intuitive place to navigate through. This leaves YMCA Louisville site along with other YMCA local sites to look antiquated and not affiliated with the national site.
Problem
Discoverability
From looking at the analytics, we were able to see that the returning user percentage might be decent,
we wanted to decrease the amount of bounce percentage.
By using the components created for the national site, the team plans to echo the same visual approach to the Y Louisville site.
• Refine color palette perspective and approach
• Iconography should leverage single color zones and lean on full shapes rather than outlines
• Previous feedback from Y team incorporated into set up & inspiration
Goals & Solution
Mood boarding and Concepting
A system as impactful as we are
The Y has a well-defined identity and a number of additional discovery inputs to help guide the new digital direction. Rather than exploring multiple concepts, we’d like to evolve every aspect of the existing global guidelines to focus on - and consistently convey- ownable brand attributes that ladder back up to foundational principles. This effort will not only inform the national site redesign, but also will complement and cleanly segue into the digital style guide effort.
The Y brand guide leans heavily on a wide, bold color spectrum combined with high-energy photography. How can we translate these ownable characteristics into a website experience that is clean, friendly, contemporary, and above all usable?
User Flows
Wireframing
We had multiple sprints to create different page wireframes on the site map.
We had weekly meetings to refine these wireframes before starting the UI.
High Fidelity Screens
After having our crux reviews with the client and showing them a few screens from each sprint,
we worked with developers to finalize on components.
Final look
Next steps
• Our next steps would be to find a way to combine the new components built on YMCA Louisville to the components library on YMCA National site.
• Create a component or a page where finding YMCA Lousiville’s most popular and summer events would be simpler to navigate instead of having to use the search component.