Xello Mobile Experience for grade 6-12 students

Native & Responsive Experience designed from scratch

img_01_xello_3

My role

Sr. Product Designer, leading the mobile design team

What I learned

  • User stories in at least 10 scenarios for each IxD
  • Interpret user research data
  • Agile design sprints
  • Work closely with stakeholders, developers, POs, sales team, and etc.
  • Create a hybrid app using Ionic but keeping the native components of each platform
  • Make everything accessible (minimum AA)
  • Work closely with developers to solve problems
  • Guide the responsive/mobile design culture within Xello cross-teams.

The Challenges

Xello's goal is to create successful futures for students. 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 suit them the best. So you can imagine the huge amount of (rich) content Xello has in its desktop application.

img_xello_02

Xello's desktop app screens

I had to try quite a few options to deal with that and together with the developers we could deliver great solutions that broke down the content in small sections being accessed through in-context menus.

img_01_xello_3x

About Me screens - Native iOS

img_01_xello_5

Explore Option screens - Native iOS

img_01_xello_6

Other screens - Native iOS

To figure out how the back button would behave on the native app and on the responsive version was nuts. Done, back (icon), Close, Cancel… different actions that perform the same visual interaction but not the same experience.

backbtn_study-2

Printed screen on the wall to test the back button IxD

During the 3 years of the development of this project, we also designed the design library with native components of iOS and Material and a few other components that were hybrid to keep the identity and consistency of Xello.

img_08_xello-lib1
img_09_xello-lib2
img_11_xello-lib4
img_08_xello-lib1

Mobile Design Library

Pen & paper. Sometimes the best way to think and test some ideas with co-workers and stakeholders. You save time and avoid future mistakes during the pixel phase.

IMG_20190213_153041

Skecth of the information architecture

Prototypes & Explorations

During the process, we designed, prototyped, tested, and repeated tons of times. Only the mobile app has more than 1,5k prototypes on Invision. Some features we’ve created more than 60 different versions just to stress and explore the possibilities to achieve the best option on the user’s perspective and not only on the design perspective.

prototype2

Invision prototypes

img_01_xello_7

About Me explorations

Takeaways

I could mentor the developers and other designers during the mobile first process, helping with the responsive versions of every new product/feature within the company.

The native app was put on hold because we made a couple of mistakes down the road. But the responsive version keeps growing and the students keep using after hours, during the weekends, and especially during the time they would probably be playing videogames or having fun with friends.

With that, we could make sure that we were on the right track with the mobile application and the students are loving it. That's Xello.

Daniel de Paola

Toronto, Canada

Where to find me?

Linkedin, Twitter, Dribbble, Behance, or Email

©️2018 - All Rights Reserved

Made with Semplice

©️2018 - All Rights Reserved

Made with Semplice