Xello

Educational mobile app for 6-12 students

Xello is an online program (by subscription only) that helps anyone, anywhere in the world create a successful future through self-knowledge, exploration, and planning.

My Role

Sr. Product Designer, leading the mobile design team.

What I learned

To think in at least 10 scenarios for each IxD, to interpret user research data, agile design sprints, to work closely with stakeholders, developers, POs, sales team, and etc.

To create a hybrid app using Ionic but keeping the native components of each platform, to make everything accessible (minimum AA), to work closely with developers to solve problems and, especially guide the responsive/mobile design culture within Xello cross-teams.

img_01_xello_3

Build self-knowledge

Xello's goal is to create students successful futures. The students can build their profile, answer a few questions to get their career matches, get to know about their personality styles, learning styles, skills and interests that suits them the best.

Students can fill up their family background and more about themselves. This is important to know who you are and to project what you want to do and be.

The challenges here were to reproduce in a responsive way what the student would see in the desktop application, plus, giving the app aspect and deal with the amount of content and sections.

img_01_xello_3x

Explore Your Options

The students can use Xello to search for Careers, Schools, and Programs or Majors (depending if you are from Canada or the USA), also saving their favourite choices.

By default, we have a list view to show as many options we can, in the opposite of the desktop which has grid view by default. This makes sense on a mobile phone perspective as a grid view we'd probably show just 2 or 3 options instead of 5.

img_01_xello_5
img_01_xello_6

The biggest challenge

Since our app is a hybrid web and native for iOS and Android, to match all behaviours of both platforms plus cross-browser (Chrome and Safari) was nuts.

For example, the picture here shows the study behind the navigation problem that we faced while using Done, Back (icon), Close, and Cancel on the top bar.

In each environment, the behaviour is different and we are still trying to figure out how to match all of them in one IxD. 

backbtn_study
backbtn_study-2

Design System and Mobile Library

During the process of design and development, we've started to create a library of assets for each product. I was responsible for the mobile library, but all other libraries should be equally organized and with the same sections.

For the mobile one, I had to create both iOS and Android variations of the components to make sure each platform had its own look and feel.

We've created one with global components, one with icons and colour palette, and the products.

img_08_xello-lib1
img_09_xello-lib2
img_10_xello-lib3
img_11_xello-lib4
img_12_xello-lib5

Sketches and hand wireframes

My UX process starts, sometimes, directly on the screen, placing pixels and boxes just to get the ideas out of my head.

But, there are times that I need to get pen & paper to test stuff, to write the IA, to draw shapes, and like that generating thoughts and ideas.

IMG_20190213_152749
IMG_20190213_152835
IMG_20190213_152847
IMG_20190213_152858

Design, prototype, test, and back

At Xello we don't do wireframes. In our design sprint, we design, design, design, and design again. Every version is built using Invision (Sketch + Craft) to test on the devices, to get the approval from stakeholders, clients, user sessions, and etc.

The whole design team is encouraged to comment on each other's prototypes, that way we all know what each designer is working and can help to achieve the best result possible for the feature/product we're working on. 

prototype2

A couple explorations of the About Me page

img_01_xello_7

Daniel de Paola

Toronto, Canada

Where to find me?

Linkedin, Twitter, Dribbble, Behance, or Email

©️2018 - All Rights Reserved

Made with Semplice

tools