UI and UX design, Gamal Sheridan

Back to the portfolio

Three projects, each taken from the first user flow to finished screens: a family app for care homes, a research portal for a university, and this portfolio itself.

01MediCompanionFamily app, health-tech venture, 2026Case study
02Galala ScholarResearch portal, freelance for Galala University, 2026Case study
03This portfolioWeb design and development, 2026Case study

Case study 01

MediCompanion

MediCompanion keeps families close to a relative in a care home. I led its interface from the first flow to the finished screens, in English and Arabic, as Creative and Design Lead of the team that reached the global Top 20 at Harvard HSIL.

MediCompanion sign in screen: email and password fields, a keep me signed in option and a full-width Sign in button — Sign in, create account, and sign in again in Egyptian Arabic with the whole layout mirrored right to left. Screens from the working prototype.

MediCompanion create account screen: name, email, a password strength meter with three ticked rules, and a choice of how Arabic should address you — Sign in, create account, and sign in again in Egyptian Arabic with the whole layout mirrored right to left. Screens from the working prototype.

Figma board of twelve MediCompanion screens covering cold start, sign in, account creation and consent, including suspended, locked, offline and region-blocked states, each with a written note beneath it — The Figma board for entry, sign in and consent. Every state has its own frame and a written note for the developers.

Project: MediCompanion, family app
Role: Creative Lead and Head of Media, in charge of UI, UX and the front end
Status: Ongoing. Working towards the first working, medical-grade MVP.
Tools: Figma, then a clickable prototype in the browser
Languages: English, Egyptian Arabic and Modern Standard Arabic
Year: 2026

Design decisions

Every state is designedA suspended account, a locked sign in, no connection, a country not yet served: each one has its own screen and a clear next step, not a generic error.
Arabic first, not Arabic laterThe layout mirrors fully for right to left. Arabic has no neutral form of address, so the app asks how to speak to you and only uses the answer for that.
Consent in plain wordsWhat is required and what is optional is set out before anything is recorded, and the app asks again whenever the terms change.
Errors that say what happenedPassword rules tick off as you type, and a failed sign in tells you how many attempts are left before it locks.

Case study 02

Galala Scholar

A research portal for Galala University: one place to find the university's publications, conference work and researcher profiles, and a workspace where its researchers keep their own record up to date.

Open full size

The home page with six of the pages behind it: search results, a research output, a faculty, a researcher profile and the researcher's own workspace.

Open full size

The same pages on a phone: home, search results for "dental", a research output, and the checklist a researcher works through to complete a profile.

The Galala Scholar home page on a laptop: the heading Find research from Galala University, a search box with popular topics, and four figures for researchers, research outputs, faculties and research areas — The home page. A heading, one search box and four figures, before anything else.

Project: Galala University Scholar
Client: Galala University, freelance commission
Role: UI and UX design
Scope: Search, researcher profiles, research outputs, faculty pages and the researcher workspace
Screens: Desktop and phone, English and Arabic
Year: 2026

Design decisions

Search comes firstThe home page is a search box and four figures, not a welcome message. One field covers researchers, outputs and events, with popular topics underneath to start a first-time visitor off.
A profile built in small stepsA researcher completes a profile through a short checklist with a time estimate on each step, such as adding a photo or connecting ORCID, in place of one long form.
The same record on any screenResult lists, filters and profile pages reflow from a wide monitor down to a phone without dropping a field.
The university's identity as a systemColour, type and components follow the Galala University visual identity, so every page reads as one product.

Desktop project on Behance Mobile project on Behance

Case study 03

This portfolio

Web design and development. The example is the site you are reading. I designed it, then built it in plain HTML, CSS and JavaScript, with no template, framework or page builder underneath.

This website on a desktop screen: the pill navigation, the split headline reading Multimedia specialist and creative technologist, the introduction and three key facts — One page, two widths. The layout, type scale and navigation adapt from a 1440 pixel desktop down to a 390 pixel phone.

The same first screen on a phone, with the headline stacked and the navigation folded into a menu button — One page, two widths. The layout, type scale and navigation adapt from a 1440 pixel desktop down to a 390 pixel phone.

Project: This portfolio
Role: Design, front-end build and motion
Stack: HTML, CSS and JavaScript. No framework, no build step.
Year: 2026

How it is built

Nothing underneath itOne HTML file, one stylesheet, one script. There is nothing to install, compile or keep updated, and it goes live by copying a folder.
Motion with a job to doThe logo opening, the rolling headline, the logo wall and the footer wordmark are written in CSS and the Web Animations API, and each one pauses when it is off screen.
Quick on a phoneImages ship in several sizes so each screen downloads only what it needs, anything below the fold loads late, and video waits until it is in view.
Usable by everyoneReal headings and landmarks, a visible focus ring on every control, a skip link, and native dialog and details elements, so the content still reads with JavaScript off.