Designing the first 90 seconds experience ofthe iPhone app
Everything starts with the icon. When a user is browsing through hundreds of apps, a good icon helps an app stand out among others. Along with the name, it gives the user an idea on what your app does and if they should give it a try. It is also the very first thing that a user sees, so it is extremely important that we get the icon right. First impression always matter!
I took the liberty to tweak the old icon in order to bring it up to the new design standards of the iOS platform. I removed the glare, shadow, and reflection from the icon. The medical cross/t shape was thinned out just a little and the white border was made smaller to sharpen the shape of the logo and make it stand out from the background.
If your product is not simple and doesn't have a straight-forward functionality like a calculator, alarm clock, or a weather app, an onboarding process will provide great value to a new user. This process has three goals: 1. Highlight our product's core features and functionality. 2. Educate the user on how those features are beneficial to them. 3. Convince the user to sign up and use the product.
I ended up mocking two different versions, each with couple of screens which highlight the core features of our product. In the examples below, I only mocked up three screens with three different features. In the real version, we would definitely add a few more. The messages in each screen is short and straight to the point.
Simple red background with a floating card that contains the pictures and messages. Each card changes with the user's swipe gesture.
Same concept but with a background image. The background image needed to be something that would provide a nice mood (hence the sunny green field) and setting to read the messages but at the same time not distract the user away from the main goal of the process, which is following the guide and reading the messages.
A semi-transparent layer of black color was added on top to darken the image a little bit and make the text more readable. The background image is also static so it stays the same on every screen. When we swipe across different screens, only the messages and pictures change and hence creating a floating animation effect.
