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, responsible to create the mobile UI/UX of the application.

What I learned

To think in the most possibilities we could possibly have for each interaction, 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, accessibility, to work closely with developers to solve problems and, especially the company’s design-driven culture.


Build self-knowledge

Here is where the student can build his/her profile, answer a few questions to get his/her career matches, get to know about his/her personality styles, learning styles, skills and interests that suits him/her the best.

The student can fill up his/her family background and more about him/herself. 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.


Explore Your Options

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

This helps them to start thinking about their successful futures because it is possible to save your findings.

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.


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 topbar.

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


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. 


Daniel de Paola

Toronto, Canada

Where to find me?

Linkedin, Twitter, Dribbble, Behance, or Email

©️2018 - All Rights Reserved

Made with Semplice