Natr : Creating a mobile app that schedules calls across multiple channels

“An app to keep loved ones talking”

Client
Nicolas Manaud

Problem
Being a busy ex-pat Nicholas misses meaningful one-on-one conversations with his closest friends and family he left back in France. His mobile phone tariff is restrictive so calling them on-the-go isn’t financially possible so he speaks to them when he’s at home. However, when he is at home, he frequently forgets and only realises his forgetfulness when he’s out and about.

Solution
Create an app that regularly reminds Nicholas to speak with his closest friends and family. An app that also makes it easier for him to arrange calls/meet ups where he can have proper, meaningful conversations.

Duration/Team
1 week / individual project.

Methods
User interviews, task analysis, concept mapping, storyboarding, user and screen flows, competitor research, participatory design, paper and interactive prototyping, iterative design, branding, mood boards, pen and paper, Marvel, Sketch and Keynote.

Sprint 1: Rapid Prototyping

Discovery

I started my discovery phase with a series of interviews. I approached them with an aim to get an overall impression of Nicholas’ habits, traits and routines.

These interviews threw up a series of different problems that he had — ranging from issues with travelling to work to finding time to eating healthy breakfasts.

I made audio recordings of the interviews to revisit the interviews at a later time. I felt that being able to re-listen to his voice and the way he reacted to questions could give me valuable insight that I may have missed during the interviews themselves.

During an interview, he touched upon his forgetfulness in remembering to contact members of his family and so I resolved to ask him further questions about the subject. He provided much more context to me — from this I constructed a concept map.

The main restrictions in keeping in regular contact with friends and family were:

- Forgetfulness 
 - Different people using different communication channels
 - Limited mobile phone tariff

From this, I create a storyboard to illustrate the main pain point: frustration from realising he’d forgotten to speak to a loved one.

Delving Deeper

It was clear that this issue could be easily solved by simple phone reminders so it was time to delve deeper to see how an app could go further than this.

During my last interview with him, Nicholas said this:

“Life would be made so much better if I could speak to friends and family overseas easier”

This was my eureka moment — the fact is that he wanted to SPEAK to people.

After reviewing my notes I saw that he didn’t use social media for this purpose but mostly communicated through Skype. An idea was formed: my app would be a reminder system that quickly arranged conversations for the future.

I created an ‘As Is’ user flow diagram to illustrate the circularity nature of his problem and to try and find an ‘in’ point for an app to help. I then took this initial user flow and constructed a user flow that was able to demonstrate the ‘As Is’ (before) and ‘To Be’ (after) scenarios:

In my ‘To Be’ scenario, Nicholas would be able to message his loved one using text, email or social media and then schedule the future skype/phone or physical conversation into the app. The schedule feature would also act as a ‘history’ screen to review conversations.

The messaging screen would be loaded with pre-set messages to make arranging a call as quick as possible (however, a user could edit this however they like). When adding a friend or family member, you would set their communication channel preferences and the regularity on which you would be reminded to contact them. However, the app would learn how often you did speak to a people and on which channel to automatically adjust settings accordingly.

An additional feature would be an optional “Auto Dial” function so, for example, when a call is arranged on Skype, both person’s screens start ringing so that the call is forced upon the users.

I researched into scheduling, reminder and calendar apps on the App Store, Google Play and generally on the internet for comparable apps. Unable to find such an app, I felt justified in going down this path.

So, here’s what Nicholas’ life could be like with my app:

Designing Natr

With my app’s concept in place, I began to design how the user would flow through the app. Using the evidence from my user flow and task analysis, I saw that the app had to be very simple, with as few screens. Consequently, I came down to these 5 steps:

Happy with the simplicity of this primary path, I started sketching design ideas to take to Nicholas for feedback.

After discussion on the pros and cons of the designs, we arrived at my initial design.

At this point I was looking forward to observing how Nicholas and other users would interact with Natr’s first incarnation. A paper prototype was created for user testing.

Nicholas’ user interview was invaluable. Main findings were:

— Add ‘back’ buttons
 — Add screen titles 
 — Most important person to call needs to be more obvious
 — Top half of the Amend/Confirm screen is hard to understand
 — Simplicity of screen flow is great

I used these thoughts to create my first design iteration.

With my new paper prototype I conduct another user interview with another ex-pat — Jill. My findings were encouraging indeed:

— No problems understanding the screen flow
 — She loved the pre-set messages, chances are she’d not edit them often (if at all)
 — Some misunderstanding of the Amend/Confirm screen. Although she got the basic premise, she stated “I wouldn’t bother replying to re-arrange a call, I’d just use the date/time area at the bottom”. This has led me to think about moving the date/time toggles to the previous ‘Message’ screen.

The future

I have created an interactive prototype using Prototype On Paper (POP). In this interactive prototype, I decided to include more context by starting it with an alert screen that would appear on an iphone.

See my interactive prototype right here.

With this I plan to conduct more user interviews and make new design iterations. Thus far, I’m happy with my app and look forward to developing it further.

Sprint 2: Branding Natr

Forming the visual voice

With the screen flow designed, it was time to give Natr a face from which people can recognise it’s personality just by looking at it.

From the very beginning, Nicholas’ issue was rooted in being far away from people so I’d always felt that Natr had to be almost nostalgic in it’s view — urging you to think of the people a user has left back home. With this in mind, I scoured through magazines to create a mood board of colours and general imagery that I felt represented Natr.

It was clear from the moodboard that a homely feeling seemed to be emerging — from the imagery of family and friends to comforting, handmade foods. But at the same time, the idea of urgency to get a task done while very busy, was included — specifically focussing on watch advert.

From this short exercise, I wanted to delve deeper into some of the themes from the mood-board. Word association exercises was something I’d previously used in a graphic design capacity to create rapid ideas for the formation of logos and it certainly felt like a way to give more depth to my ideas.

Using a concept map reaffirmed my concepts of homeliness and gave me more bredth but the objects/qualities table was where the action really happened.

It struck me after making the table that there were two colour concepts that could be explored:

  • Airmail and it’s connection with safe, quick communication across large distances
  • Warmth and it’s association with a calming, homely atmosphere.

Using my two over-arching ideas of Airmail and Warmth, I added further imagery to a secondary moodboard on Pinterest. This board was more focused on the Airmail concept as I was happy with the homely imagery that was on my initial mood board.

With these colour palettes formed, I wanted to personalise Natr to give it some human-esque qualities , a personality — to put some meat on the bones as it were! Thinking about well know public figures, I felt that Natr had to have a calming, approachable, yet authoritative character — much like figures like Stephen Fry or Professor Brian Cox (and, from first hand experience, I can say that Professor Brian Cox is extremely approachable and friendly).

Natr is:

  • Friendly but not over-familiar
  • Nostalgic but not stuck in the past
  • Encouraging but not pushy
  • Approachable but not boring
  • Charming but not cutesy

At this point, I starting sketching to make visual sense of all the information about Natr’s brand I’d created. I hoped that I could create a logo that would give Natr a further identity and that logo could be a universal icon for the whole app (an ambitious but super-enjoyable challenge!). The icon circled in red was the most universal design so moving forward, I was going to take this further when creating my style tiles.

Excited by the prospect of seeing Natr coming to life I jumped onto Sketch to produce my first digital wireframes from which to add my branding.

Immediately, I saw problems with the Airmail theme. Firstly, the font i’d selected for the main logo looked half-way between a 30’s cruise-liner ticket and Jurassic Park. The red was very harsh and I felt could put people off selecting something that is highlighted with the darkest shade of red. Overall, my feelings were that the Airmail was far too corporate and this was reflected in feedback I gained from my peers — one saying “It looks like a bank from the 1980's”. Not what I wanted to achieve.

The Warmth theme on the other hand was well received as friendly and open… time to refine! I felt it was important to gain some further peer feedback on this styling so asked a fellow UXer, Ollie, to give me some opinions and here’s what his thoughts:

  • Yellow seems harsh and draws attention away from main screen, especially in the contact profile page
  • The red is slightly dangerous looking
  • Full bleed image on the contact profile page seems out of sync with the rest of the design with circular profile images

Building from this, I created more screens in this style…

Wishing to test Natr’s brand identity as well as the visual design, I conducted two further interviews with the following results;

  • The visual styling came across as organised, efficient and clean
  • The brand personality was calming, easy-going and relaxed
  • The app reminded one user of Trevor McDonald — calm, authoritative and approachable

For my final design, I gathered further feedback in a group critique which was an excellent exercise. With a group of four UX designers, I was given feedback about the style, colours, typography and screen flow. Some of the comments were:

  • The use of yellow with a very dark grey (almost black) could give the impression of ‘danger’ as you would see in wasps. This left two of the group both feeling uneasy looking at the app.
  • The full-bleed image on the contact profile page made it look as though a call was in progress. It was also said that it seemed ‘a bit much’ having the image filling the whole screen.
  • The dark glow that appears underneath the main bar at the top of the screen looks dated and could be removed.
  • The background colour was universally disliked and everyone in the critique agreed they’d prefer to see a clean white background.
  • Finally, the heading type choice seemed clunky and awkward in comparison to the smooth style of the logo.

With these changes made, I’m able to present to you Natr…

To get more of an idea of how Natr works, check out my Marvel-powered iteractive prototype https://marvelapp.com/j4f63d

Show your support

Clapping shows how much you appreciated Paul Woodley’s story.