Tomi

Role: UX researcher
UX/UI designer
Platform: Mobile ordering app
Methods: Interviews, competitive audit, persona, journey map, user flows, information architecture, three fidelities of prototype
Testing: Two rounds of usability testing with 5 participants

Overview

The brief

About

Terra Kulture is a Nigerian food delivery app that makes it easy to order traditional meals and drinks. It is built around meal customisation, simple ordering and real-time order tracking.

Problem

Many Nigerians, and many people who enjoy Nigerian food, struggle to find time to cook or to find restaurants that make and deliver home-cooked Nigerian meals on demand, on time and to their liking.

Solution

Fast access to a range of homemade Nigerian dishes, with doorstep delivery, pickup, meal personalisation, preparation and delivery updates, and the option to choose a delivery day and time.

Method

Design process

Empathise
- Understanding the user
- Market research
- Interviews
- Competitive audit
Define
- Pain points
- User journey map
- Personas
Ideate
- User flow
- Information architecture
- Paper wireframes
Prototype
- Low-fidelity prototype
- Design testing
- Feedback
- Design optimisation
- High-fidelity prototype
Test
- Design testing
- Feedback
- Design optimisation

Empathise

Understanding the user

64%

rise in the population of Nigerian students in the UK in one year

71%

of consumers expect personalised interactions, and 61% get frustrated when it doesn't happen

90%

of consumers want to track their delivery orders

60%

of users want their orders delivered within three hours of purchase

50%

of consumers blame negative delivery experiences on poor communication

93%

of consumers want regular updates about their order

Interviews

Participants: 5, aged 15 to 50
Nationality: 2 Nigerian, 3 non-Nigerian
Tech confidence: 3 tech-savvy, 2 not
Work: 2 students, 3 full-time workers
KPIs: Time on task, user error rates, System Usability Scale

Questions asked

How often do you cook?
How often do you order food, and what motivates you to?
Do you like Nigerian food? Do you know how to make it?
How often do you modify your orders when you order food?
Are you familiar with online food ordering services? Do you find them useful?

Competitive audit

Four ordering apps compared on the four features users asked about.
App	Type	Freshly made meals	Meal modification	Delivery updates	Scheduled delivery
Nandos ordering app	Direct	✓	✓	✕	✕
Bella Italia ordering app	Direct	✓	✕	✕	✕
Subway ordering app	Direct	✕	✕	✓	✕
Deliveroo food delivery app	Indirect	✕	✕	✓	✕

Define

Pain points, persona and journey

Inability to schedule delivery
Few restaurants let customers schedule a delivery.
Order modification unavailable
Few mobile ordering apps let users modify an order.
Lack of delivery updates
Not many apps give real-time updates on the status of an order.

Lydia

A busy part-time lawyer and master's student in London who works long hours. She has recently developed a liking for Nigerian food, doesn't always like to cook, and treats herself to one restaurant meal every Friday. She is tech-savvy and manages her schedule with an iPhone, MacBook Pro and Apple Watch.

24Lives with her husband and sonHometown: London

Goals

Schedule her Friday restaurant meal ahead of time
Order Nigerian food for her husband and child
Track deliveries in real time so she can answer the door

Frustrations

Too busy to order until she gets home, when it is too late
Does not like to cook
A picky eater who often modifies her orders

User journey map in six stages from browsing the app to receiving food, with tasks, feelings and improvement opportunities — Lydia's journey from browsing to receiving her food. Improvement opportunities: guided instructions for first-time users, menu translation, order modification, reassurance on card payment security, driver contact and buzz notifications, an offline code if the QR code won't load, and a receipt as proof of payment.

Ideate

Flows, structure and sketches

More than one user flow was drawn to find the one that lets people sign up and complete an order most easily.

Information architecture: food menu (drinks, desserts, main meals, starters), cart, home, menu, search, favourites and profile.

Paper wireframes for the home, menu, profile and basket pages. After sketching in a game similar to Crazy 8, the best features from each page's designs were combined into the digital low-fidelity wireframes.

Prototype

Low fidelity, first round of testing

The low-fidelity prototype went into a usability study with 5 participants. The measures were time on task, user error rates and the System Usability Scale.

Round 1: what users said and what changed.
Users	Finding	Change
5/5	Preferred a grid view that focuses on the images.	Menu rebuilt as an image grid.
4/5	Wanted a sticky bottom navigation bar so they don't scroll to reach other pages.	Fixed bottom bar with home, menu and cart.
1	A restaurant employee said having options to choose from is easier and faster when taking orders.	Protein and spice-level choices on each meal page.
3/5	Wanted to see their order details at the confirmation point.	Order summary with edit links on the confirmation step.
3/5	Did not notice the back button in the top left corner.	Back button moved to the bottom, beside the main action.
2/5	Preferred profile items to be sectioned, to find pages more easily.	Profile links grouped into sections.

Low-fidelity wireframes of the home screen, side menu, menu list and meal detail — Low-fidelity wireframes: home, side menu, menu list and meal detail.

Low-fidelity wireframes: order summary, order review, about us and profile.

Before and after screens for the menu grid, bottom navigation and meal options — Round 1 changes: image grid, sticky bottom navigation and meal options.

Round 1 changes: order confirmation with a summary, a more visible back button and a sectioned profile.

High-fidelity screens: welcome, meal page, delivery information, specify time, order confirmation, track order, register and join us — High-fidelity screens built after the first round of feedback.

Test

Second round of testing

Round 2: what users said and what changed.
Users	Finding	Change
5/5	Had difficulty scrolling through the date and time fields.	Replaced with a calendar picker.
4/5	Wanted a map to track their driver in real time and contact them if needed.	Live map with driver details and a call button.
3/5	Were more likely to create an account with a faster single sign-on option.	Facebook and Google sign-on on account creation.
2/5	Wanted an onboarding page because they are not used to mobile ordering apps.	Onboarding screen after the splash screen.

Before and after screens for the date and time picker and the live order tracking map — Round 2 changes: a calendar for choosing the delivery date and time, and a live map for tracking the driver.

Before and after screens for account creation with single sign-on and the new onboarding page — Round 2 changes: single sign-on at account creation and an onboarding page.

Accessibility

Designing for everyone

Colour blindness

Checked the brand palette with Adobe's accessibility checker. No conflicts were found, so the swatches are colour-blind safe.

Onboarding

An onboarding step helps people who are not tech-literate find the app accessible.

Colour contrast

The bright orange failed WCAG contrast on white, so it was darkened until both colour combinations passed.

Contrast ratios tested for the orange used on buttons and text.
Sample	Text	Background	Ratio	Result
Aa	#FF7C2B	#000000	8.17 : 1	Pass
Aa	#FF7C2B	#FFFFFF	2.57 : 1	Fail
Aa	#BA5B20	#FFFFFF	4.56 : 1	Pass
Aa	#BA5B20	#000000	4.61 : 1	Pass

Contrast checker results for the original and darkened orange on white and black backgrounds — Contrast checker results before and after darkening the orange.

Outcome

What worked, and what's next

Successes

Users completed an order with no difficulties.
The accessibility work makes the app suitable for all types of users.
Users repeatedly named the aesthetics and page layouts as a point of success.

Next steps

Font scaling

An option that ranges from slightly smaller than the default size to more than 200% larger.

Landscape display

Users with disabilities tend to rely on landscape mode, with devices mounted in a fixed landscape orientation.

Dark mode

Reduces eye fatigue, especially for people with visual impairments and light sensitivity.

System

Style guide

Montserrat throughout, with a black, grey, white and orange palette, a stepper for checkout and a small set of reusable buttons, navigation bars and icons.

← All work Next project: Crystalline Rose →

← All work

UX project · Website

Crystalline Rose

A website for a skincare brand that stands for empowerment, with a shop, a skincare quiz and a basket.

Role: UX research
UX design
Team: 1 UX designer
Tools: Adobe XD, Google Design Kit, Envato Elementary, Figma
Timeline: 4 weeks: 2 weeks of research, 2 weeks of design and testing

Crystalline Rose website on a tablet and phone, in front of a woman applying skincare

Overview

The brief

The brand

Crystalline Rose is an international beauty and cosmetics company that specialises in skincare. Its core values are empowering women and challenging clichés and stereotypes in the beauty industry. Its products are for women aged 16 to 50.

The brief

Design a website that displays the products while communicating the brand's message of empowerment, diversity and authenticity, and keep the experience seamless and engaging.

What I designed

A responsive shop with filters and bundles, a skincare quiz that recommends products, a basket and checkout, an account area and an About section, for both desktop and mobile.

Method

Design process

UX research
- Survey with 7 respondents
Define and ideate
- Sketches of three desktop layouts
Wireframing
- Low-fidelity wireframes in Adobe XD
Usability testing
- Two tests, then one more after changes
Prototyping
- High-fidelity prototype and final screens
Launch

Research

What people told me

The survey asked nine open-ended questions about how well informed people feel about the products from their favourite skincare brands. It went out as an online form, and respondents answered in paragraphs, which gave rich qualitative detail about their views and experiences.

Respondents: 7 people
Format: Online form, 9 open-ended questions

Main finding: Customisation matters. Personalised product recommendations should be built in so the site fits each person's skincare needs.

“I can't listen to people with already clear skin talk to me about products they use”
“My skincare routine is therapeutic”
“I go for high quality products which usually cost a lot”
“I want no more hyperpigmentation”
“Packaging affects how much I trust a product”
“I use skincare products to feel beautiful”

What it led to

The finding about customisation became the skincare quiz. It sits in the main navigation next to Shop and About Us, and it ends in a set of recommended products that can go straight into the basket.

Look and feel

Respondents said packaging and presentation affect how much they trust a product. That is why the product is shown close up, in calm, luxurious settings, throughout the site.

Structure

The journey through the site

Before drawing screens I mapped the path a customer takes, from arriving to receiving their confirmation. There are two ways to find a product: browse the shop, or let the quiz choose.

Browse
- Home page, then shop by category, concern or bundle
- Filters for price range and size
Take the quiz
- A card carousel with a progress indicator
- A result, then recommended products
Basket
- Change quantities, add a discount code
- Other recommendations beside the basket
Checkout
- Delivery address and delivery option
- Payment method and order summary
Confirmation
- A thank-you page and an email confirmation

Alongside the shop sit the About Us pages (manifesto, story and goals) and a members area with profile details, previous orders and a wishlist.

Ideate

Sketches and wireframes

I started with low-fidelity sketches and wireframes to speed up decisions through visualisation. The sketches came from the survey results and the business goal. I drew several versions before settling on three desktop layouts: the homepage, the skincare quiz with results and recommendations, and the about page.

In Adobe XD I turned the sketches into low-fidelity wireframes that were defined enough to test. They cover the homepage, the shop with its filter sidebar, the quiz and its results, the basket, and the members area, plus mobile versions of the homepage and shop. After 3 tests I made a few alterations and moved on to the high-fidelity prototype.

Hand-drawn desktop sketches of the homepage, skincare quiz with results and recommendations, and about page — Desktop sketches of the homepage, skincare quiz and about page.

Low-fidelity homepage wireframe, with navigation for shop, skincare quiz, about us, profile page and cart.

Four low-fidelity wireframes: the skincare quiz carousel, the quiz result, the basket with other recommendations, and the members page with previous orders — The quiz carousel with a progress indicator, the quiz result, the basket with other recommendations, and the members area.

Low-fidelity wireframe of the products page with a filter sidebar and Add to basket buttons on each product — The shop wireframe.

The shop page

The shop is the busiest page, so it got the most wireframing. Three things shaped it.

A filter sidebarCategories sit on the left, so shoppers can narrow the range without leaving the page.
Add to basket on every productThe button sits on each product image, so buying takes one tap from the grid.
A row of featured itemsThree more items sit below the grid, ahead of the footer with its email sign-up, contact details and social links.

Test

Usability testing

With a fully working high-fidelity prototype, I recruited participants who fit the target criteria. We ran 2 usability tests in the first round and 1 more after iterating on the issues we found.

Issue

Users could not tell whether a title, section or product was clickable, because the default, hover and on-tap states looked the same.

Solution

Every clickable product and section got a hover state that highlights it in bold, and a contrasting colour for the on-tap state.

Two product pages for the Red Rose Beauty Serum, before and after adding to basket, with the button turning solid and an icon appearing on the basket — The Add to Basket button turns solid to show the item is selected, and an icon appears on the basket.

UI design

A visual identity for the brand

Once the usability issues were resolved, I designed the final screens in Figma. The goal was a visual identity that matches the brand's values and message. I avoided stereotypically feminine colours and imagery such as pink and butterflies, and chose a neutral scheme anyone can identify with, to show the brand is made to empower all women.

A neutral palette of ghost white, latte, coffee and midnight, with sienna and gold as accents.
Lavish for headings, for an elegant, luxurious feel, and Lato for body text so longer copy stays easy to read.
Photography of women of different skin tones and skin types, shown close up, alongside the product.
Designs for both desktop and mobile.

Survey respondents said a brand's look and feel affects how much they trust it, so the colours and styles reflect the luxury and elegance Crystalline Rose offers its audience.

High-fidelity desktop homepage with a free delivery banner, hero image of the product range, a New Collection section, the Beautiful by Nature image row and an Explore More section — The high-fidelity desktop homepage.

Colour palette: primary colours ghost white, latte, coffee and midnight; secondary colours sienna and gold — Primary colours: ghost white, latte, coffee and midnight. Secondary colours: sienna and gold.

Nine product renders: cleanser, face wash, acne cream, moisturiser, scrub, serum, SPF lotion, mist and spot cream, all with white labels and gold caps — The Red Rose range, with white labels and gold caps. The same visual language runs through every product page.

Reading the homepage

Open with the productA free delivery banner, then the whole range on a stone plinth.
Say what the brand stands forA “New Collection” panel states the empowerment message, with a Shop Now button.
Lead into the quizA “Beautiful by Nature” image row and a statistic about skin anxiety set up the Explore More button, which points to the skincare quiz.

Details

From first click to order

The final design carries the customer from the first visit to a confirmed order, with a few details to make buying feel easy and rewarding.

£100

Free delivery over £100, shown in a banner at the top of every page

£95

Butter Skin Bundle: facial scrub, moisturiser and beauty serum, with a step-by-step routine

£200

Ultimate Skincare Bundle: a complete morning and night routine with usage steps

Ways to pay at checkout: card, PayPal, Apple Pay and Google Pay

Quiz results appear as three recommended products, and an “Added to cart” message confirms each choice.
Every product page lists key benefits and how to use it, so people know what they are buying.
New visitors are offered 10% off their first order when they sign up for email updates.
Checkout puts the delivery address, delivery option, payment method and order summary on one page, and ends with a thank-you page and a confirmation email.

Mobile home page with a free delivery banner, hero image and New Collection section — Mobile home page.

Three mobile screens: navigation menu, all products grid and basket — Mobile navigation menu, product grid and basket.

← All work Next project: NutriKids →

← All work

UX project · App and website

NutriKids

A mobile-first app and website that teaches young children about nutrition through learning and play.

Mobile prototype → (opens in a new tab)Desktop prototype → (opens in a new tab)

Platform: Mobile app, with tablet and desktop versions
Audience: Young children and their parents
Methods: Research insights, two personas, low and high-fidelity wireframes, usability findings
Focus: Interaction design, accessibility, progressive advancement across devices

NutriKids case study cover with tilted phone screens showing the welcome screen and Learn section

Overview

The brief

The problem

How do I create a website that helps parents teach their kids about nutrition and develop good eating habits from a young age?

The goal

Develop an app and website that teach young kids about nutrition at a basic level, in a way that appeals to them and is fun.

Method

Design process

Discover
Define
Ideate
Design
Testing

Discover

Insights from research

41%

of parents have abandoned attempts to get greens into their kids' diets

10–14

times some toddlers need to be offered a new food before they try it

64%

of parents admit they struggle to get their children to eat vegetables

60%

of parents feel like poor parents because their children won't eat the vegetables in family meals

Main goals

Make the visual design attractive to young children and still educational.
Make the app and website as interactive as possible to keep kids engaged.

Define

Two personas

Eduardo, 52

A chef in New York and father of 3. He wants his family to stay healthy for life, but everyone has different food preferences and eats at different times. His youngest, aged 10, is starting to choose junk food because it is quicker.

Catherine, 29

An accountant in London and a single mother of 1. She wants to maintain a healthy diet and lifestyle for herself and her child. Her child is a picky eater, and she is not sure how to get him to enjoy healthy food.

Persona card for Eduardo, a 52-year-old chef from New York and father of three, with goals and frustrations — Persona 1: Eduardo.

Persona card for Catherine, a 29-year-old accountant from London and single mother of one, with goals and frustrations — Persona 2: Catherine.

Design

Wireframes

I chose a mobile-first design because kids meet mobile devices before desktops or tablets. Every page gives the user something to do, such as scrolling through options and making selections, so the children the app is aimed at stay engaged.

The app has three sections: Learn, Play and Profile. Learn covers food groups and their benefits, vitamins and minerals, how to build your own plate and fun food facts. Play has a matching game. Profile shows points, progress and profile editing.

Low-fidelity wireframes.

High-fidelity screens: welcome, a short question screen, Learn, Play, a food group page and Profile.

Testing

Changes from usability findings

What testing showed and what changed.
Finding	Change
The swipe-down and swipe-right gestures interfered with the swipe gesture at the bottom of the screen.	Only the swipe-down gesture stays. To reach Play or Profile, users tap.
The animation for dragging to the next food group was not seamless.	A circular slider replaced it, with a smoother animation.
Users want to stay aware of which page they are on.	A section title was added to every page.

Before and after Learn screens with annotations for swipe down, drag to next food group, section title and circular slider — The Learn section before and after testing.

Devices

Progressive advancement

The design was adapted in stages across phone, tablet and laptop, from the welcome screen through to the food group pages.

Four screens each shown on a phone, tablet and laptop: welcome, question, Learn menu and food group page — The same screens on phone, tablet and laptop.

The Fats food group page on a phone, tablet and laptop — The Fats page on phone, tablet and laptop.

Accessibility

Designing for everyone

Touch targets

Touch targets are at least 9 mm high by 9 mm wide, whatever the screen size, device or resolution.

Consistent navigation

Repeated components appear in the same order on every page. That helps users with cognitive limitations, low vision and intellectual disabilities predict where to find things.

Device independent

The website works on mobile, tablet and desktop.

Next steps

Keep finding new ways to teach kids about nutrition so the app and site never become repetitive or boring.

← All work Next project: KSS Mobile Folio →

← All work

UX project · Interactive document

KSS Mobile Folio

An interactive portfolio that replaced company portfolios of over a hundred pages, so directors can show projects to clients on their phones.

Type: Interactive document
Devices: Mobile and desktop
Goals: Interactivity, usability, responsiveness
Methods: Paper and digital wireframes, usability test

KSS Mobile Folio image viewer showing a stadium dressing room, with a strip of thumbnails along the bottom

Overview

The brief

The problem

Company portfolios were over a hundred pages long, and directors needed a digital version they could easily show to clients on their phones.

The solution

An interactive document that puts multiple images on one page, with the ability to tap an image and enlarge it for the best experience on a mobile device.

Main goals

Interactivity

Every button works, so images display well.

Usability

All icons are displayed and formatted properly, so everyone can navigate efficiently.

Responsive

The document responds on a desktop display as well as on mobile.

Ideate

Wireframes and pages

Several layouts were sketched on paper during ideation. The digital wireframes show the three initial layout options for viewing images once a sector portfolio is chosen: a bottom panel to pick images from, a side panel to pick images from, and a photo grid where the chosen image expands across the screen. Two of the other pages created at this stage were presented to the company directors: the home page, where clients choose the sector portfolio they want to view, and the sector page, where they choose a specific project.

Hand-drawn layout sketches for the KSS folio, including a key stats panel and image grids — Paper wireframes: the layout options sketched during ideation.

Image viewer wireframe with the Anfield Road Stand as the large image and a side panel of thumbnails on the right — A side panel of thumbnails to pick from.

Image viewer wireframe with the Anfield Road Stand as the large image and a strip of thumbnails along the bottom — A bottom panel of thumbnails to pick from.

Image viewer wireframe with a stadium dressing room shown as the large selected image — The selected image shown large.

Digital wireframes: the three initial layout options for viewing images.

The home page with Sport, Education, Residential and Hospitality to choose from — The home page: clients choose a sector portfolio.

The Sport page with a strip of stadium images to choose from — The sector page: clients choose a specific project.

Test

Usability test results

Testing the first pages turned up four problems.

Colours and style did not match the brand guidelines.
The exit button was hard to tell apart from the back button.
Company branding was not evident.
Images were taking too long to load.

Changes

Problems and solutions

Brand colours and style

The dark style did not match the brand guidelines. KSS Gold and a white gradient give a cleaner, simpler look that matches the brand's aesthetic.

Sport page in a dark style with a strip of stadium images

Hospitality page in KSS Gold and a white gradient

Exit and back buttons

The exit and back buttons were hard to tell apart. Their colours were inverted and both were made bigger for more visibility.

Close-up of the image viewer with an exit button and a back button that look almost the same

Close-up of the image viewer with a large gold exit button and a lighter back button

Company branding

Branding was not evident on the front page. The KSS logo was added, along with a link to view the full company portfolios.

Problem

Solution

Add interactivity to all company portfolios and optimise them for web publication.
Develop a mini design system with branding elements such as colours and fonts, to speed up future design projects.
Make sure the document stays up to date.

← All work Next project: 10,000 Black Interns →

← All work

Design project · Poster

10,000 Black Interns

A poster that keeps the heart of the programme and shows, at a glance, its collaboration with the arts.

Role: Graphic design
Client: 10,000 Black Interns
Format: Poster
Focus: Typography
Composition
Visual storytelling

The final poster: 10000 and INTERNS in solid black, BLACK filled with colourful illustrated portraits, small icons of a paintbrush, microphone, clothes hanger, clapperboard, music notes and camera, and the navy tagline Collaborating with the arts, over a soft blurred background of illustrated faces

Overview

The brief

The group

10,000 Black Interns is a programme of the 10,000 Interns Foundation. It creates paid work experience for Black students and graduates, and it has grown to more than 10,000 paid internship opportunities with over 1,300 employers across 35+ sectors.

The brief

Design a poster for the group that celebrates its collaboration with the arts.

The challenge

Make the arts unmistakable without losing what the programme is about: Black talent, community and opportunity. The arts had to join the story, not replace it.

Research

Understanding the group

Before opening a design file I read the Foundation's website to understand its voice and its scale. Its homepage leads with “Talent is everywhere. Opportunity is not.” The tone is confident, inclusive and collaborative, and the programme reaches far beyond one industry. The site also describes an Arts & Culture Collective, a coalition of leading arts and culture institutions.

10,000+

paid internship opportunities created

1,300+

employers engaged

35+

sectors represented

That scale shaped the problem. The arts are one sector among many, so the poster could not turn into an arts poster with a programme name attached. I set three goals for it.

Lead with identity
The number, the name and the word “Black” must be the first thing anyone reads.
Show the arts at a glance
Someone walking past should sense creativity before they read the tagline.
Stay welcoming and legible
Confident and celebratory, never heavy, and easy to read from a distance.

Explore

Three directions

I explored three very different directions before settling on the final. Each answered the brief in its own way, and each taught me something I could use.

1. Community

The idea: a warm illustration of a crowd, softened and tinted, behind plain black type.

What I learned: it feels friendly and inclusive, which suits the programme. But nothing says “arts”, all four lines carry the same weight, and the pale wash makes the image feel generic.

2. Bold and painterly

The idea: a striking portrait with paint splatter and brushwork, with the type laid across it.

What I learned: it has the strongest feeling of art-making, and the face is powerful. But a grey overlay dulled the colour, the black type fights the busy image, and the mood is heavier than the programme's welcoming tone.

3. Image in type

The idea: a calm cream ground, with portraits showing through the letters like windows.

What I learned: this was the best idea so far. But the type is cropped by the edges, the middle is empty, and the see-through letters are hard to read.

Refine

What each direction gave the final

None of the three worked alone, but each held one piece of the answer. The final poster is those three pieces, rebalanced.

From community

The crowd of faces stays as a soft, blurred backdrop. It keeps the sense of many people, but it now sits behind the type instead of competing with it.

From the painterly portrait

The portraits became the art itself. They are bright, stylised faces, so the poster shows creative work instead of just naming it.

From image in type

The window idea stayed, but only for one word. The letters hold real images, and the rest of the type stays solid and readable.

Solution

How the final came together

The final design makes five decisions. Together they put the programme first and let the arts arrive through the lettering itself.

One word carries the image. “BLACK” is filled with portraits, while “10000” and “INTERNS” stay solid black with a soft shadow. That makes the word at the centre of the programme's identity the hero, and it keeps the number and the role easy to read.
Many faces, one word. Each letter holds a different portrait in a bright, warm palette. Together they read as a community of individuals, and they bring colour and energy to the page.
A calmer backdrop. The blurred illustrated faces from the first direction return as a pale, warm background, so the type leads and the page still feels full of people.
Arts icons built into the lettering. Six small black line icons sit in and around “BLACK”. They use the same black as the type, so they feel like part of the lettering rather than stickers, and they are small enough to leave the portraits in charge.
A clear second message. “Collaborating with the arts” sits below INTERNS in navy and in smaller heavy capitals. The colour sets it apart from the black headline, so it reads as the second thing you take in.

Where the arts show up

The arts are not only in the icons. They run through every layer of the poster, from the background to the lettering.

A painted backdropThe background is a huge, softly blurred illustration of faces. It feels like a mural seen up close, and it gives the poster depth: soft behind, sharp in front.
Heavy, confident type“10000” and “INTERNS” are set in an ultra-bold, condensed face with tight spacing. A soft shadow along the top of each letter gives it thickness, like cut-out or sign-painted lettering, and the weight makes the poster read like a statement.
Colour that behaves like artSaturated teal, tangerine, mustard, magenta and lime sit against a soft pastel pink, peach and mint ground. The skin is painted in bold colour rather than realistic tones, so the faces read as artwork, not photographs.
Faces in conversationMost faces glance sideways, and in the K two profiles look toward each other. It gives the letters a sense of people talking, which fits a poster about collaboration.
Six line-drawn iconsPainting, performance, fashion, film, music and photography each get a small icon. Their thin black outlines contrast with the filled colour, and each one touches the lettering.

Outcome

The final poster

The poster reads in a clear order: the number, then BLACK, then INTERNS, then the tagline. The arts are never a separate graphic. They live in the backdrop, the lettering, the colour and the six icons, so the collaboration is part of the name instead of a label stuck on top.

The three directions I set aside still shaped it. Community gave it warmth, the painterly portrait gave it art, and image in type gave it its structure.

← All work Next project: Telecoms →

← All work

Data visualisation · Presentation design

Telecoms

Redesigning the numbers, charts and technical diagrams of a talk on fibre-optic networks, so people who do not work in telecoms can read them at a glance.

Role: Data visualisation and slide design
Audience: Non-specialists who need to follow telecoms updates
Format: Slide deck
Focus: Big-number charts
Technical diagrams
Visual hierarchy

Overview

The brief

The deck

A talk explaining how fibre-optic networks work, from the physics of light in glass to the equipment and the faults people meet in practice. I was given an existing presentation and asked to redesign it.

The audience

People who are not telecoms engineers but have to make sense of technical messages from network providers. The deck opens by naming that struggle: jargon, and long email chains full of unfamiliar terms.

The challenge

The original was accurate but dense. Key numbers sat inside paragraphs, diagrams were crowded with competing colours, and nothing told the eye where to look first.

Approach

Four rules for every visual

The deck has dozens of slides, and most of them are explanation. I picked out the three that show the data and diagram work most clearly. Across all of them I applied the same four rules.

Let the number be the visual.
If one figure is the point, it is set large and everything else steps back.
Colour with a job.
Orange is the accent against black, white and soft peach. Where a diagram needs more colours, each one groups things of the same kind and is never decoration.
Label the data directly.
Names and values sit next to the thing they describe, so no one has to match a colour to a key.
Keep the explanation beside, not inside, the diagram.
Text lives in a calm panel or short caption, and the diagram keeps its space.

Chart 1

Making big numbers land

This slide makes the case that fibre is now the default way networks are built. It rests on three statistics: the share of fixed-broadband subscriptions that are fibre, the share of EU enterprises using fixed broadband, and the share of international traffic carried by subsea cable.

In the original, those three facts were long blue sentences with emoji bullets, and the numbers were buried in the middle of each line. I turned each into a gauge. The arc fills to its value, the number sits inside it, and a short line below says what it measures. The source stays on the slide.

Before

The original slide: three long blue sentences with light-bulb emoji bullets, a photograph of fibre strands and a small world map of subsea cables

Three statistics written as sentences. They had to be read in full before the message came through, and the two images below competed with them.

After

The redesigned slide: three semicircular gauges showing 71 percent, 93.9 percent and 95 percent with short descriptions below

Each statistic has the same shape, so the three can be compared in one glance. Two of the arcs are almost full, which makes the story visible before any text is read.

Diagram 1

Ordering a list of reasons

“Why fibre?” gives five reasons: range, security, performance, interference and cost. The original arranged them as a pinwheel, with a different colour for each blade and labels scattered around it. The reader had to decode the colours and could not tell which reason mattered most.

I rebuilt it as an arch of five panels in a single orange family. Performance sits at the top in the strongest tone, and each panel has one clear icon. Every reason keeps a bold heading with its supporting detail underneath, set close to its panel.

Before

The original slide: a five-bladed pinwheel in yellow, blue, purple, green and pink with numbered blades and text labels around it

Five colours for five reasons, numbered blades and a centre label. The colours carried no meaning, and the labels were far from what they described.

After

The redesigned slide: an arch of five orange panels with icons for range, security, performance, interference and lower costs, each with a bold heading and a short description

One colour family and one icon per reason. The heading and detail sit beside each panel, so the whole slide reads in a few seconds.

Chart 2

Annotating a measurement

An OTDR is the instrument used to find faults in a fibre. It sends pulses of light along the fibre and plots the power that comes back against distance. The line slopes down where light is lost gradually, steps down at a splice, and spikes at a connector. That one chart is the key to reading the later fault reports, so it needed the most care.

The original was really two drawings stacked together: a sketch of the cable on top, and the trace below, joined by a few dashed lines. The events on the trace were marked with red circles and plain words, and a box of highlighted text sat beside it. A reader had to work out which circle belonged to which part of the cable. I redrew it as one picture, where the cable and the trace explain each other.

Every component drops a line to its spike.
A dashed line runs from each connector and splice on the cable straight down to the point on the trace where it shows up. You can see which physical part causes which feature.
Colour groups the events.
Connector losses are orange, the splice is green, and the initial pulse and the fibre itself are blue. The label pills use the same colours as the parts they describe, so the key is built into the chart.
Labels replace circles.
Each event has a short label with an arrow pointing at it, placed next to the spike. The text that used to sit in a separate box is now on the chart.
The test setup is shown, not described.
The instrument sits on the left, and the launch cable, the cable under test and the receive cable are bracketed along the top. That is the “sandwich” idea from the key points, made visible.
A cleaner trace.
One plain blue line, arrowed axes and labelled units, with nothing else competing with the shape of the data.

Before

Red circles and plain labels, with two orange lines tying the cable to the trace only loosely. The key points sat in a separate text box beside it.

After

The redesigned diagram: the OTDR instrument connected to a launch cable, cable under test and receive cable, with orange connector squares and a green splice. Dashed lines drop from each component to its spike on a blue power-loss trace, labelled Initial Pulse, Connector Loss, Splice Loss and Fiber Loss (attenuation)

One connected picture. Each part of the cable points to its own spike, and colour-coded labels sit on the data.

Outcome

What the redesign does

Across the three visuals, the same pattern repeats. The main number or shape is the largest thing on the slide, colour is used to group and guide rather than decorate, labels sit on the data, and explanation sits beside it. A reader who has never opened a fault report can follow the argument from “fibre is everywhere” to “here is how a break shows up on a trace”.

The same approach carries over to any technical subject where the audience needs the meaning of the data more than the data itself.

← All work Next project: Terra Kulture →