October 2021 - April 2022

Frome Digital Trails

Front-End Web Developer

Overview

Working under the Design Enterprise Studio alongside a coursemate (Ksenya Shnurova), we were tasked with creating a digital trails webapp for the Winterbourne and Frome Valley Environmental Group.

This webapp would host a pilot walking route and contain text, video and audio information about specific points along each route - accessed when users scan a physical QR code at said points.

The project necessitated developing our project brief, greenlighting it with the client and iterating on design ideas. As the client was open to any ideas we had, We were reliant on each other to critically test and challenge our own ideas to achieve the best results. This resulted in an agile development cycle with sprints to develop each feature.

Process

  • Ideation
  • Coding and Technical Research

Tools

  • HTML, CSS, JS
  • Tailwind CSS
  • Alpine JS
  • Github (version control)
Frome Valley Digital Trails landing page Frome Valley Digital Trails landing page

Ideation

During the ideation stage, we considered; the form the final product should take - a dedicated application or webapp, the target audience, the amount of information to be displayed and the visual theme of the project.

Additionally, we were presented with a design requirement that the project be developed such that the Frome Valley team could create new routes in the future.

Thus the initial stages consisted of gathering information from the client themselves and refining their idea into a consolidated design brief outlining the must haves and should haves for the webapp.

Coding and Technical Research

Working as a front-end developer for this project required me to stretch my boundaries and learn a lot of new techniques in a short amount of time.

Since the client's existing website used Tailwind CSS, I took it upon myself to do the same and learn how to use Tailwind.
I was successful in my application of this framework and have even started using it in other projects.

Perhaps the most challenging element was establishing how I would develop what the client described as a "collectable" feature - the idea that as a user walks through a route, they can get something back by using the QR codes.

During ideation, I proposed the idea of a quiz that could reward users with a sticker. This would normally require the construction of a back-end system to verify and validate users, but I shifted direction and instead learnt how to use local storage. This bypasses the need for a login system entirely and thus any potential ethical concerns that would arise from tracking user data.

The Y Shaped Tree, before and after a sticker is granted to the user

Conclusion

Working for a client for the first time has been an enlightening experience. I was kept on my toes throughout the development process, constantly seeking out solutions and methods for implementing key features.

This was also my first time properly working alongside a UX designer, collaborating on feasibility and supporting each other throughout the design and development process.

Overall I have deepened my enjoyment of developing for the web and learnt a great deal about the relationship between a UX/web developer and their clients.
Check out the project's final form here!