JobPath

After receiving the initial Adobe XD design, we started the web development project by reviewing and understanding the design. We carefully examined the layout, visual elements, typography, colors, and interactive components specified in the design.

Once we had a clear understanding of the design, we planned the development process. We outlined the project's scope, goals, and timelines, breaking down the design into smaller sections to make the development process more manageable.

To begin translating the design into a functional website, we began by converting and developing the primary navigation from the XD design. The navigation would be fully responsive having two defined states to acommodate all viewports, as we focused on structuring the primary navigation using HTML and applied styles and visual elements using SCSS.

The footer was built with css grid to ensure uniformity across all responsive states, giving us enhanced control over the span and order of elements for the mobile device viewport.

A secondary navigation was required for some internal pages to perform as a quick navigation and to highlight sections for an enhanced user experience. View the highlighted section markers in action in the video below.

Once the static HTML and SCSS were in place, we moved on to implementing interactivity and functionality. We used a JavaScript framework to handle user interactions and animations, and in particular for the function of the mobile menu system and the secondary navigation.

In our initial consultations and meetings with the client, we immediately knew that we wanted to develop custom animations for some of the graphical elements in the design to add interest and stickyness, with this website being aimed at a more youthful demographic.

We set about providing proof of concept to enable the client to fully understand our ideas and to sign off the additional out-of-scope work to be undertaken.

Our main animation concept was regarding the dotted paths that are prevelant throughout the site design. We envisioned these to draw themselves into view, as though they were leading you to your destination, fully embracing the concept of 'choose your path. create you future.' that is synonymous with the JobPath mission statement.

The importance of having a mobile-friendly website cannot be overstated in today's digital landscape as mobile users have different needs and expectations compared to desktop users. This particular web development project would be primarily used by students, so it was essential that particular care and emphasis was given to the mobile experience.

We built the JobPath website to provide this excellent user experience on smaller screens, using touch-based navigation, and optimized content layout. The responsive design ensures that the website looks and functions incredibly well across all devices, making it easier for visitors to navigate, read content, and interact with the site.

The mobile menu was created to side load the nested levels into the viewport on interaction, that was purposefully developed so the user does not have to scroll through accordian items that is a common method for collapsing menus.

The secondary navigation was thoughtfully styled when it came to mobile usage by sticking to the primary navigation on scroll. This was done so the end user can access important content at any given time while scrolling.

Year-over-year comparison (2021 vs 2022)

- 500% increase in campaign clicks
- 20% improvement in impressions
- Increase in organic post engagement (Instagram and Facebook)
- Addition of TikTok

New audience performance

Student and younger audiences’ positive response to this campaign showed promise enough for UATL to agree to more student-forward campaigns in 2023.