Native & Responsive Experience designed from scratch
Sr. Product Designer, leading the mobile design team
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.
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.
About Me screens - Native iOS
Explore Option screens - Native iOS
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.
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.
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.
Skecth of the information architecture
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.
About Me explorations
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.