LawBite Ltd - Web App Responsive Redesign

What was needed

Historically, Lawbite's user base had been desktop only - a similar demographic to that of Pandle. LawBite had launched a standalone mobile app a couple of years earlier, but it had become difficult to maintain as, aside from the tech lead, no members of the original team were still involved in the project. As is often the case, this had led to inconsistencies in branding, design and functionality when compared to the desktop version.

This short contract was to allow for the implementation of planned changes to the desktop-only legal services portal ahead of the legacy mobile app being retired. The v1 app was never designed with mobile in mind - this was never needed when considering the standalone mobile app - so the most pressing task was to convert the older web app to a nicer looking, more user-friendly responsive app. If time allowed after the highest priority work was completed, there was also a v2 redesign ready to go.

What I did

As time was short, my first port of call was to familiarise myself with LawBite's preferred tech stack - in this case it was Ruby on Rails - a framework I was already familiar with, but further enhanced on the front-end with Stimulus and TailwindCSS, for interactivity and styling respectively.

The next stage was to catch up with the UI designer working on the redesign in order to understand his workflow and what assets were available to me. This was also a good opportunity to get a really in-depth idea of the scope of the project and, additionally, see his plans for V2 of the web app.

After I'd spent a few days getting to grips with the Figma component library, the tech stack and the structure of the app, it was time to commit my first bit of code to the repository. If I remember correctly it was updating the company button (visible in the top-left of the screenshot below) to bring it in line with the new Figma icon button component.

Once that first bit of code was committed, it became like any other front-end development project - work closely with the component library and the design team and check in with other developers and leads to make sure we're all pulling in the same direction. It goes without saying, too, that liaising regularly with any other stakeholders to ensure expectations are managed and the relevant information is flowing freely is also a critical part of a project of this nature.

Results

Initially this was only budgeted to be a three month project, with the bulk of the work taking place in months two and three. Thankfully though, my experience with both Figma and RoR meant I was able to hit the ground running - within the first couple of weeks on the project my first few changes had been pushed to the live branch.

As a result of the early progress made, the team were keen to keep me around a little longer. Consequently, the contract was extended to the end of the year, with the extra time allowing for rollout of stage one of the V2 designs. To cut a long story short, The app launched on time and - last time I checked - is a great, pretty seamless experience on mobile and tablet in addition to desktop.

This was my first contract as a self-employed UX developer and it proved to be a great opportunity to learn some new front-end frameworks (namely TailwindCSS and Stimulus) to complement my existing Ruby on Rails knowledge. It also provided me with valuable insight into the core loop of a contractor - join an agile team, quickly get a handle on the tech stack and any other useful resources and start adding value as soon as the situation allows.