Completed Client Projects
TODO .. !!
Show how screenshots solved a problem?
Show the story of the project (client problem to solution to results)
Project requirements need to look like very challenging

Grubie Ltd UK
Home cook chef hat


What?
Application to manage chefs, customers, staff, food products, delivery, payments, and more.
Why?
To create jobs for chefs during lockdown and deliver warm home-made food to users in the UK.
Where?
Northampton and Milton Keynes, United Kingdom.
When?
May 2020 to April 2021.
Who?
1400 chefs, 1000s of customers, local councils, and other.
How?
Web-based solution optimised for all devices with separate subsystems for each user type.

Bird's Eye View
I was appointed as the Lead UX Engineer and Lead Web Developer in the first month on the job (after multiple rounds of evaluation).
JavaScript
PHP
HTML
CSS
SQL
jQuery
AJAX
Key Work Areas
☰ UX Engineering
☰ UI Coding and Testing
☰ Website Development
☰ Content Strategy and SEO
☰ UX and Web Project Management
☰ Intern Training and Workflow Automation
Who?
1400 chefs and cooks in 25 UK cities
Food delivery service provider partners
Customers and foodies
Local govt councils and auditors (e.g. food safety)
Investors and Board of Directors
External event managers and marketers
Internal tech team members
How I Added Unique Value
☰ Designed, tested, and coded 3 UX / UI styles for 1400 chefs across 25 cities and 160 webpages.
☰ Prototyped and hand-coded a web application (HTML, CSS, JS, PHP, and SQL) to manage food products, delivery, ordering, online payments (Stripe), chefs, customers, influencers, and administrative tasks.
☰ Trained and responsible for the technology team (design, research, and web coding) of 17 members from 3 countries.
☰ Built a system to automate training junior UX / UI designers – saved 80+ hours monthly.
☰ Website speed improved from 5.50 seconds to 2.00 seconds by optimising UI.
☰ Reduced complaints by users from 60 to 35 per month (e.g. signup, online payments).
☰ Saved 10% of customer call costs by improving user experience, journeys, and automating user support systems.
☰ Implemented a web system where users and staff can instantly post UX / UI issues and these were personally fixed, tested, and new solutions were deployed in 5-day sprints.
☰ Conducted industry and competitor analysis plus UX research with all stakeholders through focus groups, interviews, surveys, and live usage testing.
☰ Prepared reports, presentations, analytics, and infographics of project progress (UX, web system, marketing, analytics) for founders and investors/
☰ Coded integations: Stripe 3-way IPG, courier / delivery API, email (MailChimp, Send in Blue and custom-coded).
☰ Configured a Linux-based Apache server with Nginx proxy, MySQL databases, and data server (MariaDB).

The Team


The team was perfect!
Enjoyed working with all my team members and the founders.
Internal 		21 team members
External 		2000+ chefs, customers, couriers,
auditors, influencers, and other
Messages 		70% Written
30% Spoken
We used 		• 50% WhatsApp, Messenger, and text
• 30% Email
• 10% Zoom and Google Meet
• 8% Actual Meetups
• 2% Phone calls
My Team
Duties 		• Responsible for 17 internal members
• Trained 14 interns in UX, UI coding, and research for 4 months
• Recruited new interns and prepared the UX hiring strategy
• Explain design and technical details to Directors and customers with complaints

Typography


I focused on:
1. Is it readable?
2. Font file size and compression - does it load fast?
3. Does it look blurry when zoomed in and printed?
4. Is it web safe and mobile-friendly?
5. Font kerning and hierarchy settings;
6. Weight aesthetics - bold, regular, and other styles;
7. Does the main target user group like it?
8. Is it compatible when paired with other fonts?
9. Does it match the client brand?

Colours

Some sections required bold and vivid colours to attract the target crowd.

Database


☰ I was tasked to design, implement, and optimise the database and server.
☰ Reviewed the requirements and expected users with use cases
☰ Prepared the database schema and data plan with data field configs.
☰ Ran simulation tests, worst case scenarios, and other trials.


Database config MySQL (MariaDB 10.6)
Database design 19 tables
300+ columns
200+ query types
35+ keys and indexes
Optimised for 2 million records
Optimisations • Creating and utilising column indexes
• Limited select clause fields in SQL code
• Seeking advice from multiple external experienced DBAs
• Database backup prioritisation
• Best field data type selections
• Preloading commonly required data
• Distributing data load across other mechanisms
• Monitoring database usage and performance
• Striking a balance between wide and narrow designs
• Temporarily stopping overusing accounts
• Limiting data server access to a few admins
• Controlling "query_cache_size"
• Avoiding the use of "distinct"
• And a few more...

database design diagram

Lessons Learnt

☰ Always train an intern as a shadow replacement for key roles in your team.
☰ When meeting up with government authorities, auditors, and investors, they will always ask for financial data.
☰ Some users will take over an hour for interviews and secretive tactics have to be prepared beforehand.
☰ Even Google Docs might fail sometimes and offline copies or distributed backups should be maintained.
UX - UI Process
01
Project Constitution I drafted the plan, work breakdown, KPIs, and other on the project and team constitution.
02
User Sampling End users for the UX research were selected via simple random sampling (clustered).
03
User Research 30 interviews, 70 plus phone call interviews, and a survey with Likert-scale and other questions.
04
Response Analysis Written answers, facial expressions, gestures, and post-interview feedback were studied and summarised.
05
Data Refining Validation, cross-checks, refining outliers, and cleaning data noise.
06
Key User Checks Conducting another post-research discussion with selected significant end users as a group.
07
Visualising Results Infographics, empathy maps, personas, stories, graphs, presentations, and reports were prepared.
08
Lo-fi Wireframing Drawing mock-ups (hand and graphics) of user flows and user interfaces.
09
Hi-fi Prototypes We skipped straight in to designing prototypes via Figma, Photoshop, and other tools.
10
Information Architecture IA was formulated and all data and userflows were broken down and prioritised.
11
UI Components UI components were created with the full system architecture, including forms, typography, colours, branding, icons, and other.
12
Database Structure Data tables and the data plans were created. Next, the database was created (MySQL) and tested.
13
HTML and Layout HTML coding for key sections and key pages with a focus on responsiveness, syntax standardisation, and SEO.
14
CSS and Design CSS coding to create the UI components and other pages.
15
Middleware Code JS, Ajax, and Fetch IO were used for the middleware functionalities.
16
Backend Coding PHP and SQL were used to develop the system's complex subsystems.
17
Integrations Stripe IP, MailChimp, delivery APIs, and other integrations were completed using JS and PHP.
18
Testing Usability tests, technical reviews, automated tests, device and browser tests were completed.
19
Launch After client approvals and requested modifications, the system was launched after 1 year.
20
The End The system, data, and brand were acquired by a competitor and investor.


Design Snapshots



View some sections I designed and coded.
View Screenshots



Thank you for your time.
Now, it is your turn to say hi.
WhatsApp icon image
+94 76 460 89 89
Copy Number
LinkedIn icon image
Eliu Fernando
Visit LinkedIn
This website is 93% hand-crafted © 2022
Animal video by Annie Spratt.

Fly to Top