client

Alpha Partners Education is a leading provider of international education services in China led by a diverse team of global educators. They develop and manage international curricula, extracurricular training, and global exchange programmes designed to prepare students for a global future.

services

  • UX design
  • UI design
  • Responsive Web
  • Laravel
  • AngularJS
  • Illustration
  • Interaction Design
  • Animation

Discovering the Platform

Indentifying the needs and requirements

The brief (in short) was to design and develop a custom web app to manage infinite student exchange programs, schools, coordinators and exchange students. The core of the platform was to create a fun and interactive dashboard for students to input their information and then maintain their engagement using task-orientated steps. In the background the platform would serve as a tool to help run the administative aspects of a student exchange program.

This was our kind of challenge, to design and develop an advanced student exchange platform.

  • Profile0%

    Personal Profile

    Questions

  • Profile0%

    Personality Test

    Multiple choice

  • Profile0%

    Favourite Subjects

    Multiple choice

  • Profile0%

    Favourite Hobbies

    Multiple choice

  • Profile0%

    Partner Preference

    Questions

  • Profile0%

    Course Selection

    Multiple Choice

Designing for usability

Indentifying the needs and requirements

The user dashboard UI is a clear and simple interface to minimize distraction. We wanted users to achieve the required tasks as quickly and effortlessly as possible. We also wanted to be stylistically neutral for our target demographic of transcultural students ranging from grades 7 through to 12, both male and female.

Color and micro-animations played a strong part in the user experience and UI design to reinforce the playful nature of the tasks and to visually classify the different task and course sets throughout the dashboard with ease. Storytelling through illustrations made the front-end website easy to understand and supported the fun and playful values we tried to communicate.

An interactive course picker

Indentifying the needs and requirements

The highlight of the web app is the intuitive and easy to use course picker. ALPEX allows students to browse and preview courses before enrolling - showing availability, teacher, room number and course description. This gives students the tools to make educated decisions on which courses best fit their interests and schedule.

Mid-project another layer of complexity was added, we were informed that all students will be selecting their courses simultaneously. To avoid students selecting a course that became full, we implemented real-time synchronization, with WebSockets using the Socket.io library and a node.js server. With the addition of real-time feedback, we were easily able to lock and unlock selected courses for any given period of time, while keeping all students notified in real time.

Animated demonstration of the ALPEX interactive course picker

Collecting and storing data

Indentifying the needs and requirements

In the process of developing ALPEX as a digital platform, we couldn’t forget about the offline data needed to support the overall online program process.

At the beginning of any exchange program, the standard method of collecting data on courses and students from a school is through large and often inconsistent excel spreadsheets. In an effort not to disrupt the existing process and create more work for a school to adapt to the new online platform, we created import functions to extract all relevant information in varying formats and parse the data systematically into the web app database. App administrators can then export any chosen data set from the system back to an excel file for offline use.

For those on a need to know basis where a student should be during a program, we developed a multi-purpose program timetable commonly used in the front-end dashboard and the admin interfaces that is responsive on screen and print friendly.

Screenshot from the parter preference task

The first of many phases

Indentifying the needs and requirements

Phase one launched in January 2016, the first four exchange programs took flight on the new ALPEX platform. Exchange students from four Chinese schools travelled to America for three weeks, the web app we had created was now being used as the core student and course database for the programs. It was a success. Students, teachers, coordinators and program admins all saw great improvements in the engagement and efficiency of the new system. Planning has started for Phase 2 of the project to expand the features and functionality, opening the system up as a white label student exchange platform to schools across the world.

Digital Creative has always exceeded our expectations as a website design agency, but this was a much more complicated project, and I had doubts that an outside agency could execute custom web design and development on the level of detail required within tight timeframes and without first-hand experience with our operations.

Again I was wrong because all it took was two days of meetings in Shanghai for their team to become fully immersed in our operational requirements and take proactive control over the project.

Rather than rigidly executing on our brief, they became actively involved in the creative design process and consistently went out of their way to create new layers of functionality to ensure the final product met their high web design standards.”

Have a project in mind?

CONTACT US