Tom Callaway is a UI/UX designer who has worked with global brands, startups, and agencies. Over the past 3 years, he has been updating the mobile app, website, dashboard, and customer platform for Preoday, an online ordering platform for businesses. Some of his recent projects include redesigning parts of the Preoday platform, developing new features for their mobile app, and providing marketing support. He also helped redesign websites for clients like Guinness World Records and Fiora.

1. UI, UX, Digital Designer
Tom
Callaway
I have worked with global brands, tech
start-ups and award-winning agencies across
UX and design, delivering user focused, clean
and elegant digital solutions.
2020
Portfolio

2. ServicesProjectsAbout
Over the past 3 years I have been working for Preoday,
who provide an online digital ordering platform which
helps businesses sell more. Since joining Preoday my role
has involved keeping the product up-to date with the
latest design trends, this has involved updating the mobile
app, website, dashboard and customer ordering platform.
I help businesses grow by delivering insightful and
compelling design solutions that solve real world
problems. My work is based on smart, strategic thinking
and creative problem-solving. It’s always fresh, informed,
and distinctly different.
I am comfortable working as part of a team or
individually and have an in-depth understanding of
emerging technologies in new media. Furthermore, I
enjoy challenging myself and learning about new
software and tools used in the industry.
Out of work I enjoy keeping fit in the gym, playing
football for a local club, listening to music and most of
all eating good food.
Tom Callaway

3. Tom Callaway
I work in an innovative and honest manner.
By delivering regular updates, we can amend the
design and clarify requirements at any stage.
Product strategy Research & testing
Design systems & styleguides
UX architecture
Interface design
All great products start with a clear product
strategy that is customer and market-driven.
A tight product plan will ensure that we work
on what matters and captures the end-to-end
vision of the product and product strategy
particulars alongside the big picture context.
Ensuring that we have a strong research
component delivers actionable insight and helps
support design decisions. Testing regular users
helps discover issues. Within these sessions we
established the need to update and improve the
journeys with clearer sign posting, easier
navigation/site structure and a simpler UX.
Interactive documents are provided for the
developers which includes elements and patterns of
the design application. This is a one-stop place to see
all visual styles of the site.
Sitemaps and technical architecture set
the tone, low-fidelity mockups allow us to
test out a multitude of concepts and when
we move into high-fidelity, copy-written
responsive wireframes, we’re getting a
great feel for the user experience.
Having a detailed knowledge of responsive web
design, iOS, Google Material Design and
fundamental design thinking, you will have a
production-ready, pixel-perfect design.
Interactive prototyping
Building interactive prototypes and
using fast, iterative software allows us to
have first-hand validation and
invaluable feedback.
ServicesAboutProjects

4. Projects
ProjectsAboutServices
Here are a selection of recent projects highlighting
the diversity and variety of businesses that I have
helped in accomplishing their objectives.
Preoday Guinness World Records Fiora Railway-News
Tom Callaway

5. Preoday
Preoday is an online digital ordering
platform which helps businesses sell more.
For the past 3 years I have been working
for Preoday to help maintain a modern
mobile app, website, dashboard and
customer ordering platform.
ProjectsAboutServices

6. ProjectsAboutServices
Mobile application
The mobile application allows customers to
order ahead using their mobile device.
Overview
This includes:
- Accepting mobile payments
- Compatible with Android and iOS devices
- Available on App Store and Google Play
- Supporting collection and delivery
- Push notifications with real time updates
- EPoS, loyalty, customer relationship
management, payment, and printer
integration
- Integrating into the clients existing
application or providing them with the
complete applicationssets

7. I sketched out low-fidelity wireframes of every stage of the
new user journey so I could clearly visualise the thought
process. Afterwards, I converted these to an interactive
prototype using Axure software.
ProjectsAboutServices
In house user testing was performed with our
developers who have a strong understanding of the
product. This helped discover any issues which could be
resolved before applying the UI.
Wireframe and prototype
User testing
To create a clean and simple interface for users to
access a quick breakdown of total revenue, orders,
new users and returning users.
Business requirement
- Recorded user testing helped discover current journey issues.
- Collated and applied the results to improved journey’s using
hand sketched mock ups
- Created working, interactive prototypes for a second round
of user testing
- Applied a clean and effective design to the white label product
- Worked closely with the development team to ensure the
update releases were successful.
- Maintained a versatile product suitable for any business.
I undertook the following tasks in order to fulfil this requirement
Mobile application

8. ProjectsAboutServices
Mobile application
Using Sketch software I designed each screen
scenario of the updated order process. By
creating a library of header styles and
symbols, I was able to maintain consistency
throughout the application.
Deliverables

9. ProjectsAboutServices
Feature update
Business requirement
To develop a clean solution that allows users to chose
between item types of different options.
The solution had to integrate into the existing model
implemented in the dashboard, be intuitive and
enhance the current user experience.
Tasks executed:
- Researched solutions for similar scenarios
- Sketched out a journey for the app and
dashboard
- Built an interactive prototype for the app journey
- Built an interactive prototype module to
illustrate how a client would add the feature
to the back end dashboard
- Presented the prototype to the development
team, answered questions and made
amendments following their feedback

10. ProjectsAboutServices
Wireframe and prototype
The toggle switch allows the user to choose
between different variants of an item.
(For e.g whole pizza or half and half pizza)
Feature update

11. ProjectsAboutServices
The solution integrated into the existing model
implemented in the dashboard, it is intuitive and
enhances the current user experience.
Deliverables
Feature update

12. Marketing support
Working closely with the marketing team to
help promote the product globally.
My work within marketing is varied and
fast-paced. From week-to-week I may be
asked to design and format a business
report, or tasked with stand design for an
industry exhibition.
The team relies on me to pull their copy into
on-brand designs that connect visually with
the target audience. I am frequently charged
with helping them pull together presentations
and I am trusted to check composition and
alignment.
ProjectsAboutServices
Overview
Key Objectives:
- Updating and evolving the brand.
- Art directing the product demo video.
- Designing creative advertising campaigns.
- Re-designing the website.

13. ProjectsAboutServices
Marketing support
The Preoday website is always evolving and has
been through multiple re-skins during my time at
the company. I have worked closely with the
marketing team and web developers to build a
visually pleasing website which is in keeping with
the corporate Preoday brand; this includes
colours, fonts, images, videos and content
alignment.
As new pages are added inline with business
objectives, I work with, and advise the marketing
team to develop these.
Website
Key Objectives:
- Designing pages for the website.
- Creating landing page graphics.
- Maintaining brand profile.
- Updating and evolving the brand.

14. Marketing support
ProjectsAboutServices

15. Guinness
World Records
Launching a new and improved user journey
of the Guinness World Records navigation
and application process
ProjectsAboutServices

16. The Guinness World Records website didn’t
reflect the exciting nature of the brand,
and was not as dynamic as the book, and
the records inside it. The website structure
needed updating to improve user
experience, and user journeys.
Our understanding
GWR work with leading global brands and
businesses to break world records as part of
bespoke marketing campaigns. They help
engage your audience through unforgettable
moments of sheer amazement and wonder,
whilst delivering bottom-line results.
Overview
Working with Mentor Digital to help launch a
new and improved user journey of the GWR
navigation and application process to increase
business user conversion, applications process
for records and sign up stats for the marketing
database and social following.
Business requirement

17. Attending regular sessions with key areas of the business to get a
detailed understanding of the project. This enabled us to develop a
sound knowledge of the core values (DNA) of GWR. The website
structure needed updating to improve user experience, and user
journeys, in order to support key objectives and improve:
Research and discovery
Gazepoint eye tracking sessions were performed on regular users
on the website to help discover issues. Within these sessions we
established the need to update and improve the journeys with
clearer sign posting, easier navigation/site structure and a simpler
UX through the applications process.
User testing insights
ProjectsAboutServices
- Consultant research and discovery
- Individual application process
- B2B ‘Get in touch’
- General record browser (lunch break user)
- Organised a user testing workshop to utilise an eye-tracking
tool in order to identify current issues with the user journey.
Each attendee of the workshop was assigned a different user
persona. This allowed more areas of difficulty to be identified.
- Analysed the user testing results and created scamps
illustrating improvements to the current user journey.
- Presented ideas of improvement to colleagues, gathering
feedback and further improvements.
- Developed a working prototype independently using Axure
software. Delegated desktop testing to another colleague in
order to maximise time allocated to Gorilla testing.
- Adapted the prototype to use the GWR brand.
My responsibilities:
Guinness World Records

18. Interactive prototypes for desktop and mobile were
user tested on site at the Guinness World Records
head office in central London. We tested the
record applications process with a range of
contributors including serial record breakers who
use the applications process regularly.
User testing sessions
I started by drawing small thumbnails to develop
an idea of how we should prioritise content on
the new home page:
UX development drafts
This included:
- Traditional horizontal style navigation menu
- Large dropdown menu with panels instead
of text links on rollover of the navigation
- Large full width panels leading users
through to key business sales or applications
Journeys, or to explore records
- Added marketing sign up above the fold
Guinness World Records

19. ProjectsAboutServices
Guinness World Records has a vibrant
exciting brand delivered through the
Guinness World Records books, POS and
product ranges. I had to reflect this in the
design throughout the website.
Guinness World Records

20. The overall result met the objectives of
developing a website that is a go-to on a lunch
break for entertainment for public visitors, that
leads business users to contact the account
management team and that leads records
applicants through the application process in an
intuitive and seamless way.
Deliverables
Guinness World Records

21. ProjectsAboutServices
Fiora
Working with Fiora to help design and build a new
website for their recent rebranding.

22. Following their recent rebrand, Fiora required a new website to reflect
their brand, ethics and ethos.
ProjectsAboutServices
A digital agency, previously called Creation, had recently
merged with four other agencies. This prompted a full rebrand
to reflect the new agency - Fiora. Fiora are a creative digital
marketing agency that leverages data, design and digital
solutions.
Business requirementOverview
- Experimented with the new logo and brand colours to develop a full
colour palette and generate ideas for integrating the morse code
pattern throughout the new website
- Created story boards to help visualise animation ideas using the
morse code pattern
- Utilised wireframes supplied by Fiora to create a fully branded website
design for mobile, tablet and desktop devices
- Built an interactive style guide document and design system to help
guide the developers with the build.
I undertook the following tasks in order to fulfil this requirement:
Fiora

24. Fiora

25. ProjectsAboutServices
Fiora
Using Figma software I created an interactive
design system which was linked to each page
using document libraries. This ensured all design
styles were consistent throughout the pages i.e
headers, quotes, links, buttons, colour palettes and
any visual language.
A style guide document was also supplied for the
developers which included elements and patterns
of the design application. This is a one-stop place
which includes exportable assets such as, images,
logos and iconography.
Deliverables

28. Railway-News
Transforming their existing site into unique
experience with good user readability.
ProjectsAboutServices

29. Railway-News is the leading rail news and
information portal. Their purpose is to
provide operators and manufacturers with
the latest information globally on the sector
and suppliers in the field. The PR agency
runs multiple websites for different B2B
business sectors.
Overview
Railway-News is the leading rail news and
information portal. Their purpose is to
provide operators and manufacturers with
the latest information globally on the
sector and suppliers in the field. The PR
agency runs multiple websites for different
B2B business sectors.
Business requirement
Low-fidelity wireframes were created before I
began the design process. I found it helped to
physically draw the wireframes out first, then
translated them to a digital format using
interactions and page links. This aided the
client in visualising the process. Furthermore, it
was the most efficient way of ensuring the
requirement was fully met while minimising
the clients time and my own.
Wireframes

30. ProjectsAboutServices
Railway-News
I adjusted the initial colour palette by choosing a
different orange to act as the primary colour - this
instantly gave the palette a modernised feel. In
addition to this, the new shade lifted brand,
provided more emphasis and portrayed a
trustworthy source of information. From here, I
included an additional colour in the colour palette
- green complimented the primary orange and
was utilised throughout the website for forms and
calls to action.
The client also requested if I could provide a
suggestion for an alternative sans-serif font for the
website. I advised that Mukta family would be a
great addition to the brand as it maintained a
modern feel, had good readability and it was a
well suited match with their brand.
Deliverables

31. ProjectsAboutServices
Railway-News
An image library was supplied for me to use, this
assisted me in visualising each page and
demonstrating to the client how they could benefit
from the use of good image quality and style with
in their website. Furthermore, this provided me
with an opportunity to show the client how to
manage content themselves in the future.
Following these amendments, I was able to deliver
a modern website which provided a clean and
simple solution for displaying vast amounts of
information. This provided the client with a great
starting point in the redesign of their website and I
will continue to advise them as the development of
the site progresses.

32. One of the biggest challenges I faced in this project
was re-working the sub navigation as it was busy
and required scrolling to view items.
To overcome this, I redesigned the sub navigation
to a mega nav, this provided an easy and quick
way to view items within each menu item. All the
items were visible on screen on the 'mouse enter'
event. This solution was key in ensuring information
was available when required and hidden when not
- significantly improving the user journey and
experience. Moreover, the clients were excited and
impressed by solution I suggested.
Challenges

33. 2020
Portfolio
Tom Callaway
Contact
Details
Thank you for looking through a
selection of my work.
If you have an awesome digital project
or a new idea but need help making it a
reality? Feel free to get in touch.
4 Iddesleigh Road
Bristol
BS6 6YJ
Tom Callaway
info@tomcallaway.co.uk
+44 (0) 7751 206 684
linkedin.com/in/tomcallaway
Download
e:
m:
In:
cv: