All work

Case study · EdTech · Mobile

MyAUC

Bringing campus life at the American University in Cairo into one official app, designed and built in OutSystems.

  • Lead UI/UX Designer
  • Jun 2022 – Dec 2023
  • iOS · Android · OutSystems
  • 4 developers, 2 testers, a PM and me, with AUC's UX team
  • Live on App Store · Google Play

At a glance

The problem
Students, faculty and staff were juggling scattered platforms for everyday tasks, and campus guests struggled to find their way and the right contacts.
What I did
Led the UI/UX with AUC's UX team across 200+ screens and 11 modules, and built the components and theme in OutSystems.
The result
Live on iOS and Android with 10K+ downloads on Google Play. The home screen was chosen by A/B testing, where 59% of 106 students picked the winning design.
Three MyAUC screens: the welcome screen with log-in options, the home screen with contacts, health and buses shortcuts, and onboarding asking which services to show on the home screen.

Project timeline

  1. Problem & solutionProblem statements and design strategyJun–Aug 2022
  2. IdeationInformation architecture and user flowsJun–Nov 2022
  3. WireframingLo-fi and hi-fi wireframesSep–Nov 2022
  4. UI design & prototypeVisual design and prototypeSep 2022 – May 2023
  5. Build in OutSystemsUI components and custom themeDec 2022 – Dec 2023
  6. Feedback & testingA/B testing and implementing feedbackMar – Dec 2023

The problem.

The goal of the new AUC app was to meet each group’s daily needs through one digital front door, with a fresh look and feel tailored to people’s interests and profiles.

Before it, campus life was spread across platforms, and each group felt it differently.

  • Students

    Moved between platforms to get a single task done, and wanted to schedule food orders and pick them up when they’re free instead of waiting in line.

  • Faculty & staff

    Struggled to manage tasks, reach online forms, check their schedules, and keep track of work information like holidays and payroll.

  • Guests

    Found it hard to navigate the campus and to find the right office to contact.

The solution.

One university app that brings resources from every platform together, with simple navigation and a module for each service:

  • Campus navigation, with a map, directions and real-time bus tracking.
  • Task management, with to-do lists, reminders and scheduling.
  • Online forms, categorised so the right one is easy to find.
  • Notifications for important events and announcements.
  • Personal profiles, so each person sees what’s relevant to them.
  • Integration with existing university systems, keeping data in sync.

Design process

  1. 01

    Problem & solution

    • Problem statement
    • Design strategy
  2. 02

    Ideation & sketching

    • Information architecture
    • User flow
  3. 03

    Wireframing

    • Lo-fi wireframes
    • Hi-fi wireframes
  4. 04

    UI design & prototype

    • Visual design
    • Prototype
  5. 05

    Feedback & testing

    • A/B testing
    • Implementing feedback
Weeks
48+
Screens
200+
Modules
11

Tools used

  • Figma
  • Adobe Illustrator
  • Miro
  • Google Docs
  • Google Sheets
  • Microsoft Teams
  • Jira
  • Slack

What we learned.

  1. One app had to serve very different people. Students, faculty, staff and guests each needed a different set of services, so the app couldn’t show everyone the same thing.
  2. The home screen had to be personal. Not everyone needs every service every day, so each person’s most-used modules had to be within reach, with the rest a tap away.
  3. The look had to win people over. In an A/B test of three home screen designs with 106 students, design C was the clear favourite (59.4%), ahead of B (38.7%) and A (1.9%).

Mapping the app.

I created the user flow and information architecture in Miro to show how people would move through the app and its modules. AUC members sign in and go through onboarding, guests register with a one-time code, and everyone lands on the same personalised home screen.

  1. Install & open app
  2. Log in
  3. AUCian or guest?
AUCian
  1. Onboarding
  2. Select modules
  3. Customise actions
  4. Reorder modules
Guest
  1. Enter name & email
  2. Verify with OTP
Home screen
  • Profile
  • Notifications
  • Quick actions
  • Contacts
  • Buses
  • Dining
  • Forms
  • Academics
  • Navigation
  • Library
  • Health

Wireframes.

Lo-fi and then hi-fi wireframes set the structure of each flow before any visual design: here, signing up with a name and phone number, the faculty and staff profile, and the notifications list.

Three greyscale MyAUC wireframes: a screen asking for a name and phone number with a Confirm Number button, a faculty and staff profile with leave balance, next salary date, items in custody and fines, and a searchable notifications list.

Every service keeps its own colour.

Choosing a colour palette was tricky. MyAUC brings together many services, and each one already has its own brand colour at the university, so those colours had to be used as they are. I gave every service its colour and used the app’s primary blue to keep the whole experience consistent.

Primary

  • #0F385A
  • #1D6DAF
  • #50A0E2
  • #A8CFF0
  • #D3E7F8
  • #E9F3FB
  • #F6FAFE

Greys

  • #222222
  • #4D4D4D
  • #808080
  • #B3B3B3
  • #E6E6E6
  • #F2F2F2
  • #FFFFFF

Service colours

  • Contacts#8DB938
  • Buses#FEC34E
  • Health#00A9A3
  • Navigation#0083AD
  • Forms#AB218E
  • Dining#F15B4E
  • Library#E8CFA0

The spirit of AUC's architecture.

We worked to bring the spirit of AUC’s architecture into the app, especially on the home screen. A triangle, a shield and a crescent drawn from the campus buildings combine into the app’s visual language.

= AUC
Five line icons of AUC campus buildings: an arched bridge building, a stair and arch, a gated facade, a windowed hall and a modern block.

Typography.

The interface uses two typefaces, Roboto and Cairo, each in light, regular and bold.

Roboto

Typeface

  • LightTell us what services you want to see on your home screen!
  • RegularTell us what services you want to see on your home screen!
  • BoldTell us what services you want to see on your home screen!

Cairo

Typeface

  • LightTell us what services you want to see on your home screen!
  • RegularTell us what services you want to see on your home screen!
  • BoldTell us what services you want to see on your home screen!

Testing the look before building it.

We ran an A/B test with 106 students and 26 staff to see how they felt about three different looks for the home screen. Both groups preferred the third design, which we applied with slight layout changes for development and accessibility constraints.

Three home screen designs, labelled A, B and C, each showing an AUC Pay balance with shortcuts to transaction history and wallet management.
Students106 participants
  • Design A1.9% (2)
  • Design B38.7% (41)
  • Design C59.4% (63)
Staff26 participants
  • Design A15.4% (4)
  • Design B38.5% (10)
  • Design C46.2% (12)
Core experience

Onboarding

Onboarding asks people to choose the modules they’ll use regularly. Every module also has quick actions and a piece of information that can sit on the home screen, so people choose those too.

If someone skips onboarding, every module appears on the home screen with its default actions and info.

Three onboarding screens: choosing which services to show on the home screen, picking the two most important actions for a service, and dragging services to reorder them.
Core experience

Home & side menu

The home screen shows each person’s preferred modules. Selecting one reveals its key information and quick actions, without opening the module.

The side menu reaches every module from anywhere in the app, both the preferred ones and the rest. Each module’s quick actions are two taps away, with no trip back to the home screen.

  • Access preferred modules from the home screen.
  • See a key piece of information without opening the module.
  • See notifications from AUC admins or triggered automatically.
  • Open a profile tailored to each persona: students, faculty and staff.
  • Edit preferred modules and customise their quick actions.
  • Contact AUC’s IT department, or log out and come back at any time.
The MyAUC home screen with contacts, health and buses shortcuts and quick actions, a home screen showing the next bus, and the side menu listing every service and account action.
Core experience

User profile

Each persona gets a profile with the information that matters to them.

  • Faculty & staff: leave balance, payroll, items in custody, and upcoming holidays and closures.
  • Students: university holds, such as registration or financial holds, so they can deal with them promptly.
  • Everyone: settings for preferences, notifications and privacy, library fines, and their university ID with a QR code.
Profile screens: a faculty and staff profile with leave balance, next salary date, items in custody, fines and the upcoming holiday, a student profile with holds, fines and the upcoming holiday, and the settings sheet with calendar sync and dark mode.
Core experience

Notifications

People choose the topics they want to hear about in notification settings.

  • Mark notifications as read.
  • Search for a specific notification.
  • Filter by date, category or importance.
Notification screens: a searchable list of notifications by service colour, a notification opened in a sheet, and settings for which topics to be notified about.
Core experience

Customisation

From the home screen or the side menu, people can change which modules appear on their home screen, the quick actions for each module, and the information each module shows.

Customisation screens: editing the services on the home screen, choosing the information a service shows, and choosing its quick actions.
Module

Academics

Students get their academic life in one place: upcoming assignments, class schedules and important dates, which they can add to their calendar. They can also see their holds, by type, and act on them.

  • See upcoming classes, assignments and academic dates, and add them to the calendar or sync them with the to-do module.
  • View GPA, earned hours, academic standing and past semesters’ grades.
  • Set reminders for classes and assignments.
  • See holds and take action.
  • Read urgent announcements, which every module has room for.
  • Open linked academic apps, like Blackboard and Self-Service Banner.

The module’s settings control syncing with the phone calendar or the to-do module, and hold all announcements and tutorials.

Academics screens: setting a reminder for a class, the weekly class schedule, and a list of advising and financial holds.
Module

To-do

The to-do module helps people manage their tasks: create them, set reminders, schedule them and tag them. It’s integrated with academic events, so important deadlines land in the task list automatically.

  • Schedule a task.
  • Mark a task as important.
  • Add a reminder to a task.

Task life cycle

A task can be marked done at any time. People choose whether completed tasks are hidden or kept at the bottom of the list, and when they’re deleted. The first visit opens a short tutorial.

To-do screens: the to-do home with smart lists like today, scheduled and important, a Readings list with an important task and tagged tasks, and the Add Task sheet with name, description, list, scheduling and advanced options.
Module

Library

The library module lets people reserve spaces in the university library for study and research, keep track of any library fines, and check opening hours to plan their visits.

Space booking

Pick a day and a type of space to see the available slots, then book up to three time slots.

Library screens: upcoming bookings and library fines, available study rooms with time slots, and the library's conditions of use.
Module

Navigation

The navigation module helps students find and get to any spot on campus, with indoor and outdoor directions. Favourite spots and custom names make frequent places quick to reach.

  • Search and navigate to any spot, from the current location or another spot.
  • Indoor and outdoor directions, inside buildings and across campus.
Navigation screens: a campus map with the user's location, campus places listed A to Z, and a building's details with photos.
Module

Dining

The dining module brings outlets, menus and ordering into the app, so people can order ahead and pick up their food when they’re free. A short tutorial guides first-time users.

For admins, an analytics view tracks the ordering funnel, from active users to those who visit dining and those who complete an order.

Dining screens: the dining home with an order in progress and campus outlets, an order basket with checkout, and rating an outlet.
Module

Contacts

The contacts module makes it easy to find the right contact details, and to get technical help from the IT bot.

  • Swipe right to pin a contact.
  • Swipe left to call a phone number.
  • Chat with the IT bot.
Contacts screens: campus offices by category with swipe actions to call or pin, and a contact's details.
Module

Health

The health module supports people’s care and wellbeing: booking a clinic visit, understanding insurance coverage, and joining wellbeing events on campus.

Health screens: the health home with announcements and quick help, medical insurance providers, and wellbeing workshops.
Module

Buses

The buses module helps people plan their trips to and from campus, with route listings, round information and stops.

Bus screens: favourite stops with the next bus times, a route's list of stops with times, and searching routes and stops.
Module

Online forms

The forms module puts every form in one place, organised into categories and subcategories, so people can find the one they need and submit it easily.

Online forms screens: form categories, a category's list of forms, and help.

From Figma to OutSystems.

Beyond designing the screens, I built the UI components and custom theme directly in OutSystems, so developers could reuse ready-made components, which reduced handoff time.

Impact

Downloads on Google Play
10K+
Screens designed across 11 modules
200+
Of 106 students chose the winning home screen
59%

Final notes

MyAUC is the largest project I've worked on, with 11 modules, 200+ screens and four very different groups of people sharing one app. Two things shaped it most. Testing three home screens with students and staff turned a matter of taste into a clear choice, and building the components and theme in OutSystems myself kept the shipped app close to the designs instead of letting them drift in handoff. Next time, I'd bring that kind of testing in earlier, on the flows as well as the look.