NewIn90. Design Story of the App That Will Inspire You

25 Feb 2015
Newin90. Design Story of the Application, Which Will Motivate You

NewIn90, and its variations NewIn45 and NewIn7, are the kind of apps to inspire people to change their daily lives for the better by promoting healthy eating and exercise. The apps are the newest branch in a series of Apex Media’s (a high quality producer and consultant for a wide range of multimedia networks and platforms) popular motivational books, CDs and DVDs.

Since the app should inspire people, to become a better version of themselves, the design team at Lemberg figured that the UI/UX should be motivating & engaging to its full potential, to attract users to open the app on a daily basis during their 90 days program period.

We had come up with a vision of how the design should be revamped to become more fun and different to engage Users more. This would take:

  1. renewing the existing UI in line with the latest guidelines
  2. introducing a new colour schema
  3. introducing colour change on daily basis

These were the ideas we started off with on the road to improving app user experience.

View Tree

The first step was defining the scope of work ahead, for which we had to draft the views tree. At the same time, primary usage scenarios had to be identified, so we focused on them as well.

Nazar, designer at Lemberg Solutions, drafts the views tree. NewIn90 App

Drafting the views tree

Day View

We started with the screen users would see most often of all.

Wireframing the day view of the application. NewIn90 App

Paper wireframes

End Of the Day

Another view that Users see on a daily basis is End Of Day. That should be a form of notification prompting to summarize your day’s activities. Buttons had to be big with a focus on the YES button.

Initially, we had several ideas about this screen, but as we got more information about the application’s assets, this gave us a clearer understanding of which idea fits best.

`End of the Day` screen design variations. NewIn90 Application

UI Design variants

Another challenge we faced was finding the best way to show additional tasks that might be available within a particular day. So the User will know that there is something else and that will be obvious.

At the same time the way of displaying additional tasks should be little different to primary ones.

Additional tasks UI Design

Font Size

One more goal was to come up with the solution of a comfortable text size. For one people it works with bigger sizes, and for other with smaller. It should work well for everyone.

In addition, the same appears when you use iPad and iPhone versions. And for these cases that is also very useful to have Text Size configurable option.

Text Size configurable option. NewIn90 app design story

UI Design versions of Font Size

Progress Setup

In the app, a User is able to set up a progress of his improvement plan in case he forgets to switch to the Next day.

We have used the same view to display the grid of completed days. In general we do have 3 cases of usage of the same view:

  • select progress from settings
  • select progress at app’s first launch
  • open specific day improvement plan

Completed Screen

Colour Schema

For user’s inspiration on the road to personal improvement, it works well to see bright colours of the application, even more so if the colours can be customised. So if you don’t like the red color, just switch to another option.

Colour Schema of the NewIn90 application. Design & development story

UI color solutions

We have identified set of primary colors according to google article about color schemes and based on this future icon idea was selected.

Sharing Approach

We put the description of the application in frames grouped by categories. Sample of one is displayed further.

The NewIn90 application has several contexts of sharing:

  • end of day
  • end of week
  • end of day 90
  • etc

The application allows Users to share this event with their friends via Facebook.

iPad Support

In addition to iPhone, NewIn90 was to support iPad devices as well. Needless to say, the UI had to look sleek on both screens, retina included.  

NewIn90 app. View on iPad & mobile phone

iPad/iPhone UI

Summary

As a result, we prepared drafts of future screens, and for the development team another document was prepared with more details about all view transitions within the app. The NewIn90 app was successfully developed and published.

So was it worth it? Our team shares the opinion that it surely was! The application was well received by the client and from now on you can start your journey to a slimmer, fitter & happier you with NewIn90. Get inspired!

Have something to say? Leave us a comment below.