Oli Grimsey-Jones

Design, UX & Front-end development

I design and build accessible websites and services that are lightning fast

Thrift +

Thrift+

Design lead on a revamped shopping platform for the UK's leading preloved clothing platform

Read more

Thrift+

I worked with Thrift+, the B Corp-certified second-hand clothing platform to redesign their buyer and seller experience at an integral time of growth.

Thrift+ enables customers to send in bags of their unwanted clothes and take out the hassle of selling by photographing and processing them in their specialist warehouses. Each purchase of a preloved item then earns points which can be spent on other preloved items, partner rewards or donated to charity.

Thrift
Problem
  • Their current Shopify website was performing poorly
  • The business were loosing customers in their conversion funnel
  • They also weren’t attracting enough new users of their seller service
  • Existing customers weren’t engaged enough to want to sell via their customer account
Goal
  • Increase conversion for the purchase of preloved clothing
  • Increase the uptake of their seller service for new customers
  • Implement a new look & feel based on rebrand
  • Improve customers’ ability to earn points from selling and spend points on rewards or charitable donations
Solution

I carried out a total redesign and restructure of their Shopify platform, including both key e-commerce functionality and customer resell accounts. As a result:

  • The website conversion rate has more than doubled
  • Total sales are up by 3%

See Thrift+ store


Design process

Understanding the problem
Thrift
  • My first step was to identify friction points and opportunity areas in the existing website via an audit
  • My metrics analysis exposed clear issues in the UX of the mobile conversion journey
  • Lighthouse also showed that the load time of the site was painfully slow – when customers were shopping on older mobile devices they were far less likely to convert (in purchase and resell)
  • After implementing UX improvements to the existing site and monitoring performance, it became clear that a redesign was needed
  • I put together a content audit and sitemap so that we could track key content over the course of the project
Market research - competitor analysis
  • As a starting point to the project (and because I had already done a deep dive on existing analytics) I looked at Thrift+’s competitors and put together an audit
  • In an effort to avoid reinventing the wheel, I also looked to well-established ecommerce platforms (like ASOS) that set the industry standard and cherry picked patterns and best practices that were right for Thrift+
Understanding Thrift+ users and their needs
  • Together with the Thrift+ team, I created customer personas based on a their own market research and survey data
  • Some shoppers were clearly motivated by finding a pre-loved bargain, ome were environmentally conscious, some were time poor and so appreciate the “clear out” service Thrift+ offered, some appreciated the ability to donate to charity
  • Balancing these needs on a platform redesign the size of Thrift+ was always going to be tricky - to focus my design decisions I had these personas within my Figma design doc as a constant reference
Prototyping customer journeys
Thrift
  • I used the customer personas we had already created and put together user journeys for each, focusing my efforts on a happy path to conversion
  • I created a taxonomy map for the product meta available after garments are processed by the Thrift+ warehouse team
  • Filtering UX was based on the taxonomy map and best practices found on industry-leading sites (i.e. the concept of consistent disclosure in the drawer)
  • I designed in low-fidelity (i.e. greyscale, no imagery etc…) to focus the testing on functionality
  • Screens were also mobile only as 78% of Thrift+ customers were shopping on mobile devices
  • A joint decision was made to divide content by gender and default to women – this was because analytics from existing customers showed over 80% were female
  • This business decision also meant that the overall UX was far less cluttered (compeitior sites were clumsily having to offer male/female CTAs on page level components)
  • When the prototype was ready, I put together user interview scripts that we used for consistency across each round of testing
Testing & iterating
  • Initial testing was very positive and participants were able to purchase items easily
  • Some participants initially struggled to find the switch between genders so I ended up moving the links out of the main navigation and into a defacto “toggle” at the top of the homepage
  • The theme of browsing started to come through in later rounds of testing - I started exploring more conventional favourited/liked item lists but settled on the concept of “watching” an item as each garment is unique and can be tracked in a similar fashion to eBay
  • Introducing this then opened up exploring concepts like price alerts or notifying customers when an item had sold or come back onto the market – an important objective for the business in the onward shopper journey
Thrift
Focusing on unique design challenges
Thrift
  • The reseller experience was unique to the Thrift+ business - it’s what sets them apart from their competitors
  • I created a frictionless seller experience, focused on taking the hassle out of customers clearing out their wardrobe
  • Customers get to quickly review photos, pricing and the meta data of all their items to be sold
  • Once an items sells, customers earn points which they can use to purchase other people’s preloved items on the Thrift+ platform, or exchange for rewards with partner brands like ASOS or donate the points value to charity
Creating a visual language
Thrift
  • I interpreted the offline creative from the branding agency into a digital design language fit for the Thrift+ platform and influenced Marketing team to make recommended improvements on and offline
  • I then layered this visual design language onto the Figma prototype and documented interactive states and behaviours of components within Figma for the development team
Results
Thrift
  • The website conversion rate has more than doubled
  • Total sales are up by 3%
Barnardo's

Barnardo's

Design lead for the largest children's charity in the UK

Read more

Barnardo's

I led the re-design of a new Barnardo's website as part of their digital transformation programme. I also contributed to the creation of a design system to enable the UK’s leading children’s charity to build future digital products and services cost-effectively.

Barnardo's
Problem
  • The current Barnardo’s website was poorly designed and built by an external agency
  • Users were complaining of slow loading times and they were having trouble finding information
  • The charity wasn’t making enough from online donations and analytics suggested friction for users
  • Building products and services within the charity was scattergun and fragmented
Goal
  • Ensure a WACAG level AA of accessibility is met across the website and any other products and services built
  • Increase the level of online donations
  • Ensure brand consistency and empower employees to easily implement
  • Save charity money by designing and building products and services more efficiently
Solution
  • I redesigned the Barnardo’s website to be WACAG-level AA-compliant, brand consistent, easily navigated and fast-loading
  • I redesigned the online donations process which resulted in an 8% uplift in online donations for the charity
  • I also contributed to the Barnardo’s design system to ensure that the charity was able to leverage the same design language used on the website and build products and services cost-effectively

See the Barnardo's website

Design process

Understanding the problem

My first priority was picking up the pieces of a brand new website that was designed and built by an external media agency, but had some serious flaws:

  • Best practices were ignored to accommodate design patterns that hadn't been validated (see consolidated "menu/search" button over the top of content-managed imagery that triggers a modal for the main menu)
  • Accessibility standards were poor and tests clearly hadn't taken place
  • Use of colour and design language were inconsistent

I played a pivotal role in the leadership team for Barnardo's digital transformation, partnering with my cross-functional peers to lead the transformation strategy and managing a team of designers. One of the key areas I spearheaded was ensuring that Barnardo's prioritised the above points to ensure their products are inclusive and future-proof.

Barnardo's
The old grid

My starting point to implement this strategy was fixing the page template layout. A strange 10 column grid system had been invented, which meant numerous breakpoints to control component behaviour and a huge amount of frontend code complexity.

Barnardo's
Our mobile-first layout

By evaluating years of analytics, including data that showed over 70% of our visitors were coming through on smaller screen devices, I prioritised a new, simple layout for mobile users. For example, by left-aligning the layout of components we drastically reduced code complexity, whilst also improving readability.

Barnardo's
A new consistent design language

I managed and upskilled the in-house designers at Barnardo’s in the implementation of the new Design System. By using a consistent design language within the charity, we were able to harness the power of repeatable building blocks across all the products built in-house. We thus avoided reinventing the wheel and needing to research best practices as basic design patterns are catered for out-the-box.

Barnardo's
Testing, validating & iterating

By building new products and services using the Barnardo's Design System as the foundation, the focus could then shift to designing and validating bespoke solutions to new projects. One example of this was a ‘leaving care’ chat application created in partnership with Plymouth City Council. Using the Design System, my team and I were able to rapidly put together prototypes to test new design ideas and patterns with real service users in research sessions.

Barnardo's
Educating

I passionately believe in the importance of educating throughout the organisation on the power of a common design language for all the digital products and services I build, to provide consistency and save time and money, and I invested significantly here to create bespoke trainings. It was critical that as a consultant, I left the charity with a body of work that the permanent team genuinely bought into and wanted to build on. I created a suite of presentations to communicate the "why" to large audiences, held one to one and group sessions, and documented the decisions made, which had been rooted in users’ feedback, both from internal stakeholders, for example staff who used the CMS, and end users of the website.

Barnardo's
Playpress

Playpress

Fast-loading bespoke Shopify theme for sustainable children's toy company

Read more

Playpress

I turned eco-toy manufacturer Playpress into one of the best-performing brands on Shopify by developing a super-fast bespoke theme that hit speed scores of 85%.

  • The website conversion rate has more than quadrupled

See the playpress store


Playpress

Design process

Problem
  • Playpress’s existing shop was built on Squarespace commerce which injected lots of bloated code behind the scenes
  • I worked with Playpress to identify the shopping platform and third-party apps that would work for them
  • It was slow, performed badly and the business wasn’t getting the results they would have wanted from organic SEO
  • The Playpress brand was very inconsistent on the website - especially in contrast to the brilliant packaging and comms around the product itself
  • Stockists complained that their website “didn’t feel professional enough to commit to large orders”
Goal
  • Create a consistent, coherent design that complimented the strength of the offline branding
  • Focus on page load times and ensure that purchasing is frictionless
  • Create a compelling story to help convert stockists into longterm partners
  • Enable Playpress to easily manage their current inventory and easily add future products as their business grew
Solution
  • Kindly (myself and my business partner Rich) worked with Playpress to identify Shopify as the shopping platform that would best work for them
  • I identified the three main sales channels to focus on by conducting stakeholder interviews – consumers, stockists and commercial partners (i.e. Disney, RNLI etc…)
  • I then built a plain HTML prototype from scratch to really focus on key customer functionality
  • Alongside this, I used Playpress’s wealth of offline creativity and assets and created a visual design language that would work online
  • After testing the HTML prototype, I started to layer on the Playpress visual language and inject dynamic elements via Shopify’s liquid templating language
  • Playpress now have a bespoke Shopify theme with a speed score of 85%, resulting in the theme being one of the best-performing sites on the Shopify platform
EU settlement scheme

Gov.uk

User-centered design and research for the Home Office’s EU settlement scheme

Read more

Gov.uk

I led user research sessions and rapid prototyping to advocate for a more user-centred approach to the design of the Home Office’s EU Settlement Scheme

See the EU settlement scheme


Problem
  • Existing users of the EU settlement scheme very finding the process hard
  • Users complained of too many screens and unclear information
  • In particular, the identity verification process was causing problems for users
Goal
  • Reduce friction for users of the EU settlement scheme online
  • Ensure a WACAG level AA of accessibility is met across the service
  • Better enable identity verification online to save offline manual processing costs
  • Ensure that users' needs and voices are prioritised in the design and build
Solution
  • I created end-to-end prototypes using React GOV design system components and dummy data
  • Along with researchers, I used these prototypes to test with users recruited by the Home Office
  • Key design decisions were made based on this research and intimate knowledge of how the scheme needed to behave in relation to other GOV services
  • I advocated for quicker prototyping within the team by treating prototypes as disposable artefacts, not codebases that needed constant maintenance and upkeep

Design process

Understanding the problem
  • Upon further investigation, it became clear that the initial version of the EU settlement scheme online was rushed, created with very little user research and largely based on policy decision-making
  • Civil servants were dealing with complaints that the online service was far too long-winded and difficult to understand
  • As a UCD team, it was our task to identify user needs and advocate for better-designed solutions to meet these needs
Understanding service users and their needs
  • As with most GOV services, users of the EU settlement scheme can a broad demographic and vary greatly in their needs
  • To determine what a happy path might look like, we interviewed people that might be using the service in the future or had used the service already
  • First we put together user personas and then empathy maps based on the results of our interviews – it was clear that things like device type weren’t always determined by age (normally I’d expect to see younger participants using mobile devices and older participants using desktop computers, but that wasn’t the case here for a number of reasons)
Prototyping the happy path
  • Once we had a better understanding of who we were designing for, we created user flows within Figma, to capture a helicopter view of the service as it was
  • Seeing this view enabled us to card sort chunks of the journey using Miro boards
  • Based on the user personas we put together and our prioritised version of the journey, we put together a first draft prototype using the GOVs React prototyping toolkit and dummy data (we couldn’t dynamically load in country lists for instance or feedback on facial recognition on passport scans)
Testing & iterating
  • The first rounds of testing were difficult as many of the participants were so disgruntled by the existing service that whatever we presented them with was seen as “more of the same”
  • The fix this we decided to put aside 5 mins at the start to allow them to talk about their experiences, record their feedback and reassure them that we’d pass this onto the relevant people within the Home Office
  • After this, testing became much more natural - participants were able to really put themselves in the mindset of applying for settled status
  • After each round of testing, researchers put together the findings in presentations and I made quick updates to the prototype - if we hit a big deviation in the journey then we’d dispose of the current prototype and start again
  • We didn’t want to cling onto patterns (like a user dashboard for when service users were signed up) just because other services were using them – in our case users wanted a discreet reassurance that they were signed into the service before completing the rest of the forms, but a traditional GOV user dashboard would have been too jarring midway through the process
Fieldgoods

Fieldgoods

Bespoke Shopify theme for sustainable frozen meal company

Read more

Fieldgoods

I shifted Fieldgoods’s digital platform for sustainable meal deliveries from a clunky online system to a slick mobile-first Shopify theme that’s since been requested by more clients.

See the fieldgoods store


Fieldgoods
Project process
  • Their existing shop was a free theme on Shopify but it was “clunky and performing badly”
  • I worked with Fieldgoods to design an idealised mobile-first version of meal bundling in Figma
  • After researching third-party apps, I chose recharge to implement the meal bundling and subscription management functionality using custom styling and theming
  • I also worked with Fieldgoods to clean up their product inventory within Shopify and ensure SEO meta data were functioning properly
  • Fieldgoods are using my bespoke Shopify theme, which was then requested by Lune + Wild, and I created their website too.
Alexander Hudson Estates

Alexander Hudson Estates

Wordpress design & build for No 1. estate agent in the north east

See website

Lune + Wild

Lune + Wild

Bespoke Shopify theme for sustainable frozen baby meals company

Read more

Lune + Wild

I built a bespoke and customer-focused retail platform for Lune + Wild, an e-commerce brand specialising in sustainable baby foods doubling their conversion rate.

See the Lune + Wild store


Lune + Wild
Project process
  • Their existing shop was a free theme on Shopify but it was full of third-party apps, slow and hard to use on mobile devices
  • Worked with Lune + Wild to design an idealised mobile-first version of their meal bundling in Figma
  • After researching third-party apps, I chose Smartr to implement the meal bundling functionality using custom styling and theming
  • I also worked with Lune + Wild to create a customer quiz that recommended the right meal plans for parents
  • Lune + Wild are using my bespoke Shopify theme also used by Fieldgoods
Arthr

Arthr

Redesign and build for a social enterprise that makes high-end arthritis products

See store

Fospha

Fospha

Design lead for the top marketing attribution platform in the UK

Read more

Fospha

When I joined Fospha, they had just acquired a data analytics company called iJento. This enabled Fospha to collect large amounts of client data from multiple sources - our task was to productise a consolidated marketing analysis view for companies.

Making sense of customer data

As design lead for the product team, it was my job to work closely with the data scientists to identify repeated questions that customers were asking of their data and develop this into a product.

Fospha
Multi-channel attribution

As we were at the forefront of learning about how customer data was used, we started by interviewing marketing managers and testing paper prototypes with them to explore opportunities.

It quickly became clear that multi-channel attribution was one of the marketing questions that most companies wanted actionable insight on. The tool enabled them to study user journeys and pipelines of acquisition and make informed marketing decisions that could be closely monitored and tracked over time.

Fospha
Web chat

With customer data insights also comes the opportunity for positive intervention. I leveraged this for another client audience, leading relationships with local councils to create an intelligent web chat tool that enabled them to more efficiently help people in their local area.

As a white-label product, councils were able to seamlessly embed the tool within their website.

Fospha
betty

betty

Design lead for teenage period education subscription box

Read more

betty

I started at betty when they had an existing website, but it wasn't performing commercially. I began by analysing their GA data to identify opportunity areas based on business objectives.

Re-design based on analytics

I found some quick-wins to implement with three simple objectives.

  • Bring the brand look and feel up-to-date
  • Introduce the brand proposition to help frame editorial
  • Display clear commercial messaging on the subscription box and a CTA

This resulted in 14% uplift in customers subscribing to bettybox.

Old design
betty
New design
betty
Developing brand continuity...

The UI of the website needed consolidating. Lots of elements were confusing and there was little consistency in the visual language.

betty
A new navigation

The betty nav bar needed updating - we introduced an updated logo framed in a more distinctive pink badge. We also had to think carefully about the balance between exploring content vs product (see product fly out solution further down this page).

betty

betty
Product navigation

The products of betty needed to be accesible at all times on the website. That's why we created a flyout style menu.

betty
Pink Parcel

Pink Parcel

Design lead for No 1. period subscription box website in the UK

Read more

Pink Parcel

Design lead for the UK's No. 1 period subscription box webiste and period tracking app, increasing conversion by 6%.

When I joined the company, the existing website was off-brand and under-performing commercially. Information on the subscription box was hard to find and people weren't converting.

Pink Parcel
The re-design

My first priority was aligning the website branding with the offline brand collateral. The result was a much cleaner look & feel with a clear product proposition.

Pink Parcel
Design decisions based on analytics

My next priority was to identify opportunities to optimise the design using existing GA data, but also to apply commercial logic to these decisions with other stakeholders within the business. I focused on improvements where increased revenue could be attributed.

Pink Parcel
Accessibility

There were also flaws in the use of brand colours; for example, the primary pink wasn't accessible in conjunction with white so I led some bold brand decisions on changing colour palettes to ensure users could read CTAs etc.

Pink Parcel
Re-designing subscription

The next step was to re-design the subscription mechanics to improve conversion from all the marketing the company was conducting, but which had been hugely under-performing. I took a mobile-first approach as 80% of users were coming in on mobile devices. This led to a 16% uplift in customer subscriptions.

Pink Parcel
Payment & guest checkout
Pink Parcel

The existing subscription flow unnecessarily asked users to create a Pink account mid-way through. Instead, I cut down the information needed upfront to allow users to guest checkout through the user flow. This results in faster loading times and better UX, both of which are essential on mobile, as well as improved revenue through higher completion rates.

Bodos Schloss

Bodos Schloss

Responsive website design for London alpine-themed bar

Read more

Bodo's Schloss

Quirky website for the former après-ski themed bar / restaurant, Bodo’s Schloss, Kensington, London.

Bodos Schloss
The homepage

I’ve illustrated a playful horizontal scrolling walk-through of the interior of Bodo’s Schloss. The user is encouraged to interact with the environment and get a feel of the venue before making a visit.

Through the seasons
Bodos Schloss

Depending on the time of year / day, the homepage scene changed to keep the design fresh and retain the restaurant's sense of quirky fun.

A warm welcome
Bodos Schloss

Illustratively we wanted to re-create the inside of the restaurant / bar. I captured this through various photographs of the interior.

Interactive walk-through
Bodos Schloss

The user horizontally scrolls through the different settings, exploring content by clicking on certain objects or animation.

Drink time...
Bodos Schloss

One of the main reasons for apre après-ski is drink and Bodo's was no different. Clicking on the drinks till screen pulled up a modal to explore cocktails and pricing.

Night time = party time
Bodos Schloss

Atmospheric lighting is used to transform the user's experience and expectation. Baloons float by, tweets are projected - the quirkiness prevails!

Mahiki

Mahiki

Responsive website design for famous London tiki-themed bar

Read more

Mahiki

Immersive responsive web design for world-famous tiki-themed bar Mahiki

The homepage

The homepage setting is the start of the interactive journey. Magical sunset dust particles animate across the screen. The sun beams flare and flicker. Each section of the website is a different tropical island setting in itself, so a zoom effect was implemented to further immersive the user.

Cocktails at Mahiki
Reservation panel

The reservation panel is a drawer that slides into the screen on desktop and mobile.

Cocktails at Mahiki
Food at Mahiki

Interactive hotspots provide navigational aides to explore a section's content.

Cocktails at Mahiki
Cocktails at Mahiki

Minimal, impactful typography is used to make clear statements around the status and exclusivity of the club.

Cocktails at Mahiki
Cocktails menu

Signature cocktails are illustrated and given 'party boat' setting. Interactive elements like the flower / bamboo scrollbar further add to the feel of the setting and tiki-style running through the website.

Cocktails at Mahiki
Setting the scene for party

Party island is there to be explored...

Party interaction

As the user hovers over certain hotspots the scene changes and adds a little drama to the setting.

Cocktails at Mahiki
Profile of Oli Grimsey-Jones

Hi, I’m Oli

I love two things in this world: the great outdoors and great design. I’m obsessed with functionality and a perfectionist when it comes to building digital tools that work well.

I’m also a Dad, a husband, a qualified tennis coach and I mentor young people in my community through Barnardo's.

Always up for chatting about design challenges over a good coffee.


Kindly

Kindly

I ran a small design and development agency called Kindly. Our goal was to design and build fast-loading and accessible websites that were beautiful and easy to use.