Text, Mobile phone, Font, Telephony, Display device, Screenshot, Communication Device, Smartphone, Gadget, Mobile device

stacks-coverpng

Freemium language learning platform built with React Native/TypeScript featuring sophisticated spaced repetition algorithms (SM-2 implementation), offline-first architecture with cloud sync, and premium UX including cover flow navigation and gesture-based interactions. Architected 100+ component design system with custom state management, complex data relationships, and sub-100ms animation performance.

Food, Recipe, Ingredient, Natural foods, Food group, Cuisine, Dish, Advertising, Comfort food, Convenience food

cover-tortillajpg

A portrait Self-Service kiosk for high-street restaurant Tortilla. A project completed whilst working with the EPOS provider MCR Systems.

Product, Gadget, Font, Material property, Communication Device, Electronic device, Multimedia, Technology, Web page, Advertising

all-good-coffeejpg

Self-service ordering solution for a hospital cafeteria providing Starbucks hot drinks. A project completed whilst working with the EPOS provider MCR Systems.

Product, Computer, Font, Communication Device, Material property, Software, Technology, Screenshot, Web page, Electronic device

cover-chartwellsjpg

Self-service kiosk implemented at several UK University cafeterias. A project completed whilst working with the EPOS provider MCR Systems.

Nature, World, Natural landscape, Water, Font, Morning, Landscape, Sky, Art, Tree

getahway-coverjpg

Font, Rectangle, Screenshot, Software, Electronic device, Multimedia, Gadget, Display device, Number, Media

The dashboard requires a user login and provides content management services such as for uploading images and managing blog post content.

Dashboard

Water, Water resources, Sky, Nature, Natural landscape, Sunlight, Body of water, Atmospheric phenomenon, Horizon, Coastal and oceanic landforms

Mapbox software is used as the mapping service, the style was customised within mapbox studio and integrated into the app.


Mapbox Integration

Font, Screenshot, Gadget, Software, Display device, Multimedia, Electronic device, Operating system, Multimedia software, Computer icon

Part of the blog post editor UI, a map can be added to a blog post with markers and popup information.

Add a Map to Blog Post

Font, Gadget, Screenshot, Software, Multimedia, Darkness, Rectangle, Display device, Electric blue, Logo

Published blog posts appear on this page and can be filtered via different geographical categories such as country.

Blog Post Collection Page

Font, Screenshot, Software, Multimedia, Electronic device, Technology, Operating system, Gadget, Logo, Display device

The dashboard comes with a fully custom blog post editor allowing the user to create, update and delete blog posts.

Blog Post Editor

Interactive travel blog with Mapbox integration and sophisticated dashboard area for managing blog content. Also includes custom landscape vector illustration/artwork.

Plant, Organism, Tree, Font, Window, Terrestrial plant, Adaptation, Urban design, Software, Communication Device

cover-shared-homesjpg

Font, Output device, Rectangle, Screenshot, Technology, Facade, Metal, Machine, Brand, Door

The gallery page holds a grid of lightbox enabled photos for customer viewing

Gallery Page

Property, Plant, Product, Font, Screenshot, Real estate, Software, Terrestrial plant, Technology, Grass

Sketch was used to design the website in different viewport sizes prior to being developed. There were several iterations between developing and designing as the project went on such as modifying font sizes on smaller screens when viewing a prototype.

Sketch Artboards

Product, Font, Screenshot, Parallel, Software, Web page, Multimedia, Number, Rectangle, Media

The 'Why Choose Us' section of the homepage organises benefits of the property in a clear and concise way

Features Grid

Online space for a rental property in England, including information on the local area, frequently asked questions and a gallery. Built with React/Typescript.

Product, Font, Screenshot, Software, Electronic device, Multimedia, Operating system, Gadget, Web page, Rectangle

cover-sportsjpg

An on-going project for a React Native sports coaching app with a web dashboard for coaches.

Product, Azure, Gesture, Font, Gadget, Rectangle, Communication Device, Technology, Electric blue, Electronic device

surf-shop-coverjpg

White, Product, Rectangle, Line, Font, Parallel, Circle, Number, Line art, Symbol

These sketches help visualize the layout, features, and user flow before diving into detailed design and development. By sketching, you can quickly experiment with different ideas, spot potential issues early, and refine the user experience. This step is important because it ensures that the app's design is user-friendly and intuitive, making the ordering process smooth and enjoyable for your customers. Plus, it saves time and resources by addressing design flaws before they become costly to fix.

Sketches

Product, Rectangle, Font, Material property, Software, Parallel, Screenshot, Diagram, Number, Brand

Creating wireframes for your custom surfboard order app is crucial as it lays out the basic structure and functionality. This step helps ensure a user-friendly design, streamlines the development process, and identifies issues early, saving time and resources.

Wireframes

Font, Material property, Parallel, Screenshot, Number, Rectangle, Electric blue, Document

I also conducted a usability study where participants were asked to perform tasks on the app prototype. We recorded their click paths, observations, and quotes, and rated the difficulty of each step on levels 1/2/3. This study is important because it helps us understand how real users interact with the app, identify any pain points, and gather direct feedback. By doing this, we can make informed improvements to ensure our custom surfboard order app is as user-friendly and efficient as possible.

Usability Study

Product, Font, Material property, Rectangle, Magenta, Parallel, Screenshot, Brand

 I also created an insight identification Jamboard from the user study. This Jamboard holds various insights, color-coded by each participant, and was used to visualize common themes. For example, we found that 3 out of 5 participants wanted to view delivery options and information, highlighting that our app lacked clear order delivery details. This process is important because it helps us see patterns and gather meaningful insights from user feedback, allowing us to make targeted improvements to enhance the overall user experience of our custom surfboard order app.

Insight Identification

Gesture, Font, Communication Device, Screenshot, Portable communications device, Operating system, Software, Mobile device, Multimedia, Electronic device

After reviewing customer feedback, designers were iterated on once more to include improvements and feature suggestions.

Designs

Font, Screenshot, Rectangle, Software, Parallel, Electric blue, Web page, Multimedia, Number, Software engineering

I created a UX research study plan, detailing methodology, participant types, and interview questions. This structured approach helps gather valuable insights from the right users, guiding design decisions. It ensures we understand user needs, preferences, and pain points, leading to a more user-friendly and effective custom surfboard order app.

Research Study

Product, Font, Rectangle, Material property, Parallel, Screenshot, Software, Design, Web page, Number

Performing a competitive analysis on surfboard shops by examining their websites, design styles, language tones (friendly or serious), price offerings, navigation, and user flows is a critical step in the UX process. This analysis is important because it provides insights into industry standards and user expectations. By understanding how competitors position themselves, what design choices they make, and how they structure their user experience, you can identify best practices and areas where your own shop can differentiate itself. This ensures that your website not only meets but exceeds user expectations, enhancing your competitive edge and improving overall user satisfaction.

Competitive Analysis

Product, Font, Rectangle, Material property, Parallel, Screenshot, Software, Web page, Document, Media

A UX competitive audit report for custom surfboard building shops compares their online experiences against competitors. It evaluates design, functionality, and usability to identify strengths and weaknesses. This is crucial as it helps shops improve their websites, differentiate from competitors, and attract more customers by offering a superior user experience.

Competitive Audit Report

Product, Rectangle, Font, Material property, Parallel, Pattern, Number, Screenshot, Slope, Circle

Creating a user journey chart involves mapping out the steps a customer takes to buy a custom surfboard, including their actions, feelings, and potential pain points. This UX process is crucial as it provides a detailed understanding of the user's experience, highlights emotional states at each step, and identifies areas for improvement. By visualizing the entire journey, businesses can make informed decisions to enhance the user experience, streamline the buying process, and better meet customer needs, ultimately leading to higher satisfaction and increased sales.

User Journey

A project produced during the Google UX Design course. The design process involved several steps including market research, creating user personas and iterating on designs from feedback.

Product, Azure, Font, Line, Screenshot, Technology, Software, Electronic device, Multimedia, Gadget

floodline-coverjpg

Font, Screenshot, Parallel, Number, Terrestrial plant, Electric blue

Insights from user research that were most common or caused most frustration were prioritised for the next iteration of the app.

Prioritised Insights

Azure, Rectangle, Font, Line, Screenshot, Technology, Parallel, Software, Brand, Electric blue

Screens from the design process featuring portrait and landscape

Floodline Designs

Colorfulness, Product, Rectangle, Font, Material property, Magenta, Parallel, Electric blue, Slope, Brand

A Google Jamboard was used to gather insights from user research, gathering and grouping these insights was essential for deciding on actionable steps for improving the app.

Jamboard

A project produced during the Google UX Design course. Floodline is a concept app for assisting the general public with managing flood risks in their local area.

Digital Design + Development

Sports coaching app

More projects

Photography