This week I will work on a new project in which I will be designing a new e-learning app to be launched on both Android and iOS.
My user persona is Alicia, a 31 years old international Buyer at Mango who is energetic, ambitious and hard working. She learned more about the business and today she is very interested in moving onto the Marketing Team in her company but her manager told her she needs to improve her digital marketing skills. She will have to find time in her busy schedule to learn these two new skills: digital marketing and growth hacking.
Alicia needs an e-learning app with short and flexible lessons and a professional content up to date. She’s an iOS user, so I will first design the app based on iOS patterns and then adapt it for Android. Here are the few steps I will have to respect:
1) Moving between screens
I will use the arrow on the top left corner as the back button.
LinkedIn on iOS where theres a small arrow to go to the previous screen:
About the navigation between different areas of an app I will use tabs on the bottom. And I will also label the icons on the tab row. The tab bar won’t contains no more than five destinations.
Sections are organised as tabs on the bottom of the app on iOS:
The primary navigation elements should be in the foreground. If I use the hamburger menu, it should be used only to store functions that aren’t daily tasks performed by the user.
Swipe from left-to-right to go back a screen
I will keep the gesture of swiping from left to right in my e-learning app to go back.
I will respect the iOS button styles ( most often text in lower case for iOs.
Left Android and right iOS:
Action Buttons are those that allow the user to take some action. Some of these buttons may have higher priority or visibility than others. I will follow the same iOS pattern place action buttons on the top title bar.
Twitter app’s “Tweet” buttons. Left: iOS ; Right: Android:
I will use the slot machine reel-style date selector used in iOS.
Left — standard iOS controls; right — standard Android controls: