hhl

hedgehog lab rebrand

hedgehog
lab

Overview

Lead Designer as part of the in-house team rebranding hedgehog lab. Due to our shift toward working with more blue chip companies we felt the need to reflect and update our brand . The aim was to develop a brand which felt more ‘grown up’ and reflected our association with higher end clientele, whilst retaining our identity as a “people first” organisation. 

The Team

My Role: Lead Designer
1 Product Owner
1 Marketing Manager
2 Developers

Although not gone entirely, our much loved hedgehog mascot (seen below) will now be used as a secondary device, making way for a simpler and more professional word marque. 

A simple angle has been added to the ascenders of our new, bolder font to suggest spikes of a hedgehog.

(Swipe for previous logo).

Our previous website was very text heavy, with little in the way of supporting imagery. I decided to take an almost editorial/coffee table book approach and chunk information into more digestible sections, so users could browse and absorb the information much easier at their leisure. 

Although our previous brand was loved by both our clients and staff, we felt it time for a refresh. The new brand reflects our shift to partnering with more blue chip companies. 

Bold patterns, borrowed from our original hedgehog marque were used as another element used throughout the rebrand. Links back to our past were just as important as a fresh approach for the future.

Punchy colours to contrast our new primary blue/grey and bold fonts have been used to retain some of our identity as a “people first” organisation. We were keen to remember who we are and where we’ve come from as not to alienate our current partners and employees.

WHAT DID WE ACHIEVE?

  • Refreshed our brand to a more ‘grown up’ aesthetic

  • Retained links to our past whilst creating a brand more suited to our current objectives

  • Content is arranged in a much more digestible format, for a casual, engaging experience
Stacked

Stax

stax

Overview

Stax is a concept of my own creation, dreamed up during the pandemic of 2020.

Stax is designed to digitise the experience of visiting record shops and fairs in the search of the vinyl you’d love to include in your collection. As a keen record collector, I’ve missed the in-store experience and wanted to think up a way to connect collectors, share their collection and potentially agree to buy and trade.

In a world where music is as easily accessible as typing in a search bar the name of an album or song, I also wanted to create a digital experience similar to that when browsing in a store not knowing what you may uncover. In an attempt to bring back the buzz of uncovering that record you’ve been searching for, Stax connects you to other users to flick through their collection and see what they may have to sell or trade.

Problem

Like any product (even one I’ve made up myself) my initial task is to gather requirements and identify pain points and problems.

With Stax, I was inspired by the following pain points:

  • Because of Covid/lockdown stores and fairs are inaccessible.

  • Discovering music has become a soulless experience. Music is easily accessible using Spotify, amazon, iTunes. Even supermarkets sell records now.

  • Therefore the joy of discovery is removed. 

  • Having a wish list and visiting a store for the records you want to add to your collection are part of the experience.

  • Record community cannot interact and discuss shared interest in music. 

solution

From the problems I identified I mapped out a structure of the app using miro helping me to better understand the architecture of what I planned to create.

My idea was to include:

  • The ability to browse and connect with like minded collectors through a forum and chat system.

  • Ability to add your own collection to catalogue and share with others.

  • Create a wishlist of records you’d like to add to your collection.

The Stax name and logo is designed to represent record collections and the interaction of flicking through them. It’s a fluid logo which can be manipulated to suit it’s medium. The secondary marque is a simple circular logo used as an in app spinning loader.

One interaction I was keen to capture was the experience of flicking through collections like you would in a shop or a record fair. To achieve this, collections can be flicked through, much like you would a box or shelf of records.

My approach to Stax was to create an almost “tactile” experience, mimicking the sorts of interactions you’d have in the real world. Continuing this tactile concept, I wanted the UI to feel familiar and map behaviour to expected outcomes. A ‘neumorphic’ design was utilised for key components to encourage human interaction. E.g a neumorphic play button looks and behaves as a play button would.

I was also inspired by the work of Dieter Rams and his product design work for Braun, keeping things simple and clear on screen at all times.

Another idea i had was to catalogue and take your collection with you. By entering the unique catalogue number found on the spine of a physical record a user could ‘unlock’ the ability to play that record on the go in the app.

During the onboarding process I was keen to subtly connect the imagery on screen to the messaging on each slide. For example the second slide advertises the ability to create a wishlist and features records which reference a wish or a heart. 

WHAT DID I ACHIEVE?

  • A concept to connect collectors together.

  • An experience that brings back the buzz of discovering music.

  • The ability to expand and manage your record collection.
deliveroosourced

Sourced Deliveroo

sourced deliveroo

Overview

Lead Designer as part of the hedgehog lab team to develop Deliveroo’s food procurement platform, connecting restaurants directly to their suppliers.

Working within the limits of Deliveroo’s brand, I designed the entire platform developing a consistent component system and accompanying logo to sit within the existing Deliveroo family of brands.

Available on both iOS and Android, the platform allows restaurants to search for suppliers near them and compile supplier orders in the same intuitive way that diners order meals from their restaurants.

An integrated messaging system also allows restaurants to communicate directly with suppliers and track their order status, incorporating the entire order process within the app.

The Team

My Role: Lead Designer
1 Product Owner
1 Scrum Master
1 Supporting Designer
1 User Researcher
12 Engineers
2 Test Engineers

Problem

One of Deliveroo’s core requirements for the project was the need to validate the concept of a digital sourcing platform for restaurants vs orders placed via traditional telephone, pen and ink. This concept was explored through first-hand research with real restaurants and suppliers.

Our in-house user research team carried out extensive field research and interviews throughout the project with restaurants and suppliers alike.

Approach

As a team we worked iteratively, testing our assumptions early and often with a number of prototypes. This helped us to understand and address pain points experienced by restaurants and suppliers alike.

Deliveroo came to us with a year’s worth of testing the concept using Whatsapp, setting up communication between suppliers and restaurants using this method. Once they were happy their concept had been validated they approached us to flesh out the concept. Our approach was a fast-paced, iterative process, quickly validating our ideas as we went.

The project kicked off with Deliveroo’s General Manager of Special Projects integrated into our team. We worked together to flesh out the idea, scamping and identifying the additional problems we’d need to address.

We decided to get in to low fidelity digital wireframing using standard iOS components quite early on, so we could test our assumptions before we moved into final UI design and build.   

As part of the deliverables, Sourced required a new identity creating. The logo utilises the existing Deliveroo logotype to keep the brand consistent and familiar with the rest of the Deliveroo family of logos. From the base logo the double ‘O’ are utilised to symbolise the restaurant and supplier to highlight the connection and communication aspect of the product.

Miro proved a valuable tool for our remote teams.

Iterative problem solving

Throughout the process we found the need to pivot our approach and execution.

When we launched the first version and the app was in the hand’s of real users, we learned more about our their behaviours and expectations.

The main challenges we encountered were as follows:

1. Users mistakenly downloading this app instead of the main Deliveroo app to order a meal

2. Restaurants adding their own suppliers and items proved tiresome and laborious.

3. Introducing the concept of adding new suppliers for restaurants as they only wanted to deal with existing relationships.

To remove that burden we decided a potential solution was to develop a concierge web service (seen below) whereby users could request an account and a member of the deliveroo team would onboard them. This meant restaurants would have their app tailored to them with their suppliers and products already loaded to their account, whilst weeding out customers looking for a takeaway and point them in the right direction towards the consumer app.

We iterated and tested a number of onboarding experiences, from left to right: self onboarding, the concierge service and more recently a combination of the two.

We eventually found that a combination of the concierge service and self onboarding covered both bases for users. Those who were happy to register themselves and those who preferred to have their content preloaded for them to use.

Each of these concepts were designed and tested using Marvel before they moved in to the full build cycle.

After planning and prototyping I set about constructing the design system to be used throughout the product. The entire app was designed to be consistent, flexible and easy to build upon. It utilised a lot of the UI and patterns and experiences found in the consumer app so it felt like it belonged to the Deliveroo family of products.

To ensure consistency and better handoff to the large development team, tools such as Abstract were used to manage the design files and libraries to guarantee quality and clear communication. 

The video I produced for the initial launch of Sourced Deliveroo shown at their annual restaurant awards.

The final solution is one which fits within the Deliveroo ecosystem in terms of appearance and functionality. We were keen to develop something which felt like it belonged in a suite of offerings rather than an alien, stand alone product. Borrowing from the existing design system and building upon it helped achieve this goal.  

WHAT DID WE ACHIEVE?

  • Digitised ordering process so restaurants can easily and collaboratively manage stock.

  • Generated significant savings for restaurants via the Deliveroo platform.

  • Connected restaurants directly to their supplier via instant messaging.
e11evate_thumb

Ellevate

ellevate

Overview

Ellevate is a platform for young and aspiring footballers to promote themselves, interact with like-minded players and potentially get scouted. As part of the team at hedgehog lab, I was involved in creating the product name, brand and app design. The brand is intended to feel energised and uplifting (elevated).

The Team

My Role: Lead Designer
1 Product Owner
1 User Researcher
2 Engineers

Our user research team conducted research in to market competitors, interviews with football scouts and players to create personas and surveys so we better understood the landscape.

Ellevate ambassadors (L to R) Rhian Brewster (Arsenal) Phil Foden (Manchester City) Aaron Wan-Bissaka (Manchester United)

The idea around the brand name was to use the platform to elevate and highlight the users skills and get them noticed. The primary brand is a simple typographic treatment which highlights the number 11. This is intended to communicate the concept of elevating oneself to the first team starting 11.

Secondary to this is the accompanying stand alone symbol which is based around a football crest blended with the letter ‘E’. Using a motif synonymous with the sport and the idea of the tribal nature of football using a symbol (or badge) for the app’s community to get behind.

The idea of using a motif synonymous
with the sport and the idea of the tribal
nature of football using a symbol (or badge)
for the app’s community to get behind.

What did we achieve?

  • Connected young and aspiring grassroots footballers to scouts.

  • 4.4 review on apple store.

  • 4.5 review on Android Play Store.
hiitthumb

HIIT Timer

HIIT TIMER

Overview

I’ve used several interval timers in the past but always found them either ugly or unintuitive to use, so I decided to design my own.

I wanted to create something with a very simple interface which would work in either portrait or landscape views to accommodate whichever exercise you may be performing.

The app consists of a weekly dashboard to keep track of how many workouts you’ve performed and the ability to add multiple customisable HIIT sessions. 

 

The interface is kept purposefully simple and sleek so the user can focus on setup and performing their workout.

 

research

To understand the issues with existing interval timers, I conducted some research by performing a HIIT session myself and recorded the problems I encountered whilst exercising. They were as follows:

  • Set up of intervals was confusing in some cases. Wording didn’t make sense.
  • Whilst exercising I wasn’t focused on my phone but the exercise I was performing.
  • I required a method of letting me know when each interval had started/ended without having to look at my screen.
  • When I did glance at my phone I wanted to quickly see how long was left during each intense exercise.
  • When performing exercises like a plank I moved the phone so it was in front of my face, however adjusting the phone to the correct orientation during a rest and setting it the right way up seemed an effort during valuable breather time.
  • What if my phone wasn’t accessible for exercises such as swimming?

Low-fidelity sketching to final component library.

Problems Solved

Whilst exercising focus will be on the task at hand and user will not want to interact with their device once the workout is underway.

  • Sound used to mark countdown to workout start, rest and end.

  • Apple Watch integration for easier access to app whilst exercising.

  • Haptic feedback on iPhone (if in exercise band) and Apple Watch to add extra feedback to user whilst in motion.

  • Orientation of phone changes depending on exercise being performed.

Both light and dark modes designed for iOS.

streethawkthumb

Streethawk

street hawk

Overview

An app designed for street food lovers. The app was intended to build awareness, order and review street food vendors nearby and place orders via the app.

A QR scanner was utilised for participating vendors so customers could claim digital loyalty card points.

We also developed a simple  vendor control panel which enabled vendors access to vital data they otherwise would not have access to. Giving them valuable sales insights to empower decision making, food innovation and business growth.

The Team

My Role: Lead Designer
1 Product Owner
1 User Researcher
4 Engineers
1 Test Engineers

Discovery sessions are vital in understanding what the customer wants to produce and achieve for their product. It’s our jobs as designers to sometimes challenge their assumptions and present a viable alternative solution. Workshops are an important way of achieving this to work collaboratively to get to the root of the problem they’re hoping to solve.

Simple prototype to show basic functionality of the discovering a vendor and scanning a QR code to leave a review and gain loyalty points.

User research in London’s street food markets.

The logo is made up of a map pin and a hawk’s head to reflect the name and the intent of the app to discover new street food stalls.

What did we achieve?

  • Building awareness of independent street food vendors.

  • Incentivised customers to return and support vendors with loyalty scheme.

  • Sales insights to empower decision making, food innovation and business growth.
CCthumb

Clever Clinic

CLEVER CLINIC

Overview

I was the lead designer as part of the team at hedgehog lab,  delivering the digital clinic management tool, Clever Clinic. Healthxchange Pharmacy, one of the UK’s leading providers of aesthetic supplies, wanted to create a full-featured platform for healthcare providers in the medical aesthetics industry.

Consisting of the Clever Consult, Clever Compliance and Clever Care applications, the platform centralises client consultation reports, medical records, consent forms and booking management to lessen the administrative burden for medical practitioners and guarantee regulatory compliance.

The Team

My Role: Lead Designer
2 Product Owners
1 Scrum Master
1 Supporting Designer
1 User Researcher
9 Engineers
1 Test Engineer

As the product included so many features, some of which could have been apps in themselves, it was critical we planned as much as we possibly could.

Whiteboards, post-its notes and plenty of scribbling went in to the early phases of the development of the app.

Due to the size of the app we felt it necessary to tackle it in three chunks. Onboarding, calendar/appointment booking and consultations. Bare bones prototypes followed which we tested, to ensure the experience was seamless and nothing was missed between each ‘chunk’ of the app ensuring the app felt like it all belonged as one product.

Early handmade scamps were roughly translated to digital versions to help communicate our vision to the customer and test with users.

Wireframing, site mapping and our user research team was utilised throughout to validate everything we developed as a team.

This meant everything we developed, we were confident had been through stringent planning and testing before it reached real users hands.

Simple microinteractions used to help communicate the vision with the customer and development team the types of interactions we were looking to deliver.

The app was launched at CCR 2018, the Europe’s leading medical aesthetic event.

The video I produced introducing Clever Clinic shown on a giant video wall at CCR 2018.

The calendar and booking system in itself could have been a standalone product handling doctor’s individual and clinic wide diaries, out of office calendar, and patient booking system with the ability to arrange follow up and repeat treaments. 

What did we achieve?

  •  4.5 review score on Apple Store at launch.

  • Digitised the preexisting analogue process.

  • Adhered to the strict regulatory standards of the healthcare industry to ensure security, safety and compliance of sensitive patient record keeping and payment.

  • Utilised at up to 4,000 clinics in the UK and Channel Islands
IN@2x

Innovate Now

Presented by hedgehog lab, Innovate Now is an exclusive networking event providing an opportunity to learn more about the latest cutting edge technologies & more. I created the branding collateral and website design for the brand.

The logo combines an uppercase I and N which doubles up as two speech bubbles, incorporating the name and theme of the event(s) in to one icon.

hhlthumb@2x

hedgehog lab


This past year (2017), hedgehog lab has celebrated our 10th anniversary, the time was right to refresh our logo to reflect how far we’ve come. I was proud to create the brand which will represent us as a company for the next 10+ years.


 

thumb

Crypto marketplace

The Team

My Role: Lead Designer | 1 Product Owner | 1 Supporting Designer | 12 Engineers | 1 Test Engineer

I was part of a large scale team during a 2 year engagement developing a bitcoin based marketplace. The concept was the community would control the wealth within the ecosystem of the app and would be rewarded for making any transactions within it.