Resi

Junior front-end developer and UI/UX designer

June 2020 - present

Resi is a full-service home rennovation startup based in Brixton, London. I joined in 2020 as a hybrid UI/UX designer and front-end developer within the product team. Below is a collection of my work for Resi since June.

Resi Architectionary

There's a lot of jargon in the design and planning process that will be unfamiliar to most first-time renovators. I collaborated with the marketing team to produce the Resi Architectionary, a searchable glossary of the most common terms our customers encounter during their time with us.

Design

I found the clearest way to present the information was to arrange the entries as clickable cards. Each card triggers a small modal revealing the full definition. When the user arrives at the page all the entries are visible so users can browser or search as they prefer.

Development

I collaborated with our Rails engineers to create a page that’s managed using Contentful CMS, allowing the marketing team to add and update entries independently.

CSS Grid allowed me to generate an implicitly responsive layout rather than rely on brittle breakpoints.

Happy Homes podcast page

In August we launched a short podcast series called Happy Homes and I built the landing page for our marketing website. A challenge here was implementing the playful, floating-image hero section without relying on a ‘magic numbers’ solution. I used our 12-column grid and negative margins to position and responsively scale the svg illustrations.

Instagram ads landing page

Previously, Instagram adverts had linked to our Quick Quote tool (see section below) but the completion rate of this tool from the ads was very low. We found that potential customers clicked on an ad showing them beautiful, modern home renovations and were disapointed when they were shown a form asking for information about their home that was missing context about who Resi are and the services we provide.

To remedy this, I designed a landing page that was centred about more beautiful images of our work and gave the customer more information about the services we offer before recommending them get a Quick Quote or book themselves a call with our sales team.

Resi CRM messaging app

I was tasked with redesigning the admin messaging system as it became apparent the existing interface was no longer fit for purpose. Over time, many features had been added to the page without questioning the overall structure.

This design applied our new visual language defined in the customer dashboard and began to apply it to the custom Resi CRM. I collaborated with the product's users (our architectural designers and account managers) to build a clean, new interface using their suggestions and feedback.

Customer dashboard - marketing and data capture tools

At the core of Resi’s offering is the customer dashboard. It allows customers to manage their project, communicate with their designer and store all the necessary files needed for planning submission and hand over to contractors on site.

The dashboard also has a marketing function. New customers can sign up and complete a suite of tools that returned useful information and captured relevant data for our sales team. I redesigned a number of these tools for our dashboard 3.0.

Design

In order to rapidly develop new form components across the customer dashboard, I created a set of template components in Figma. These could be duplicated and customised to suit the required context.

We launched an MVP to a test group of customers, solicited their feedback and reshaped the dashboard’s forms for a more navigable experience.

Development

Prior to my involvement, the front-end development at Resi was implemented by backend engineers, so I was able to bring my front-end specialism, plus an eye for design, to their process.

Among other accessibility wins, I built all of the new form components so that users can tab through, fill out and submit the forms using just their keyboard.

Customer dashboard - messaging page

I applied message styling defined during the admin messaging redesign to create a new customer messaging interface.

Previously, messages had been in a 1/4 width modal sidebar that was ill-suited to longer messages with many file uploads.

To remedy a common pain point of customers feeling they're passed around too many representatives, this interface includes a breakdown of the different Resi team members in the conversation.