Website Build, Web Development, Animation Design & Integration

JobPath

JobPath is a workforce development and advocacy agency that helps adult students succeed in job-training programs and start meaningful and lucrative careers.

JobPath partners with colleges and job-training centers to provide wraparound case management and financial support for students in Southern Arizona. They also connect students to mentors, coaches, and communities to help them succeed. Programs of study include industrial trades, health care, and information technology.
Client
Job Path, Tucson, Arizona USA

Deliverables
- Website Build
- Web Development
- Creative Assistance
- Digital Asset Creation
- Animation Design & Integration

The Project

As reputable web developers, we took the opportunity to work on this exciting website build and web development project in collaboration with a digital partner based out of Arizona USA.

This prominent agency in the technology sector, approached our company with a vision to overhaul the online presence for JobPath, one of their clients, by creating a cutting-edge user experience to improve their brand awareness and student journey.

To kick off the project, we collaborated closely with the creative team to gather their requirements and gain a deep understanding of their goals and objectives. We conducted several online meetings and exchanged numerous emails to ensure a clear and comprehensive understanding of their vision.

The Design

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.

The Navigation

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.

Digital Asset Creation

As part of our remit as a web development agency, we offer a range of digital services to help our clients acheive their goals that include creative design and digital asset creation. For the JobPath website we converted, cleaned and redrew where necessary, icons, illustrations and partner brand logos to enable their use as SVG files to ensure their quality regardless of size.
Our knowledge and expertise in this area, and in particular with Adobe Illustrator, enabled us to create a range of dotted paths that were to be placed throughout the website in certain page sections and animated. We also created a suite of graphics to be used as alternative header images for the news items and blog posts for the JobPath team.

Animation Design

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 Mobile Experience

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.

The Desktop Experience

While a great mobile experience is essential, the desktop version of a website should never be overlooked as it is incredibly important, providing a richer and more immersive browsing experience.

The Result

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.

The Result

We're here to skyrocket your business.

Enough talk. You've discovered and learnt about a few of our processes that help digital-first organisations move forward, increase efficiency and delight our customers.

Get in touch to learn how we can help you elevate your online presence.
Let's get to work

Ready for takeoff?

Let's get to work