Social Steps: An MVP story

How we released a side project and what we learned from it

Pierluigi Rufo
Aug 20, 2018 · 8 min read

Side projects are a great opportunity to work on something we love and at the same time a good occasion to learn things and train new skills.

Unfortunately we are often too busy with our main occupation and most of our ideas never get shipped.

At the beginning of 2017 I was at SnappMobile talking with Juhani Lehtimäki and José Jeria about a common use case that José usually experiences in his daily life:

José walks a lot and he uses Apple Health to count his daily steps. Every evening he ends up comparing his steps with his wife’s ones to see who walked the most.

👉 Problem: manually comparing steps on two different devices is definitely not a good experience.

Because of this, he had the idea of creating a steps counter app which would allow users to see their friends steps. This way they could motivate each other and walk more.

We immediately fell in love with the concept and we felt that, combining our different set of skills (as designer, iOS developer and Android developer), we could bring this idea to reality.

The Minimum Viable Team for a side project was born! 🙌

Though we all had full-time jobs.. 😬 Therefore, in order to fight against any long-term procastination, we set ourselves a challenge to launch in 2 months on both platforms.

Let’s see what happened next.

1. Understanding the context

Ok, we had the motivation and the team to build something nice but where to start from?

We had the feeling we needed a better understanding of the context so we tried to organise a bit our thoughts:

People use steps counters to see how much they walk every day and keep track of their activity.

Having the possibility to see your partner/friend steps, increase the motivation to walk more.

We tried different apps on the market and we saw that:

  1. In most step counters it’s only possible to see the personal amount of steps.
  2. Steps counters are often integrated with other activity trackers (e.g. cycling, running, …) which ends up in a lot of information and a complex navigation.
  3. Most used steps counters are native and used on 1 platform only.

Knowing that there would be a social feature, we decided to build our MVP both on Android and iOS. We knew this would cost us additional effort for design and engineering but we didn’t want to tight the product to a single ecosystem.

We set ourselves a release deadline of 2 months.

After a initial market research, we created some personas to better identify our target users. We also created descriptions for users who are not in our project scope to make sure we had clear in mind who we were designing for.

For each persona we described and prioritised user goals. Defining the level of importance of each goal helped us later to structure and prioritise the information in the UI.

2. Draft the structure

Once we felt we had a good understanding of the context, we invested one weekend to brainstorm the first steps.

We already had too many irons in the fire so, based on the main user goals, we prioritised the MVP stories we would go to market with.

This is not an easy operation so, every time we had a doubt, we were looking back at our user needs and asking ourselves the question:

“Is this really solving a core problem?”

When the answer was “no”, the story was dropped from the MVP list and moved to “possible future ideas”.

We wanted to avoid any complex navigation pattern, nailing down the core information in just one screen. Starting from this screen the user would be able to access the secondary flows like Invite friends, Weekly history, Change goal and Personal settings.

The result was a quite vertical navigation with different child-pages all linked to the home screen.

3. Explore and define

We wanted to have all the core information directly accessible on the landing page.

So we split the Home in 3 main sections:

  1. Today steps overview
  2. Today standings
  3. Weekly standings

This way the users could have a quick overview at the personal/friends performance while walking, without the need of any further navigation.

Since this was our core screen we wanted to make it right, so we decided to invest more time exploring different solutions for the main chart.

First round of the main chart explorations: the “multiple circles” concept falls out due to hard scalability.

Pro-tip for Sketch users: It’s possible to create accurate charts setting the following values in the borders settings:

Dash = .Percentage*Circle Diameter*3.14

Gap = 9999

Image: https://www.invisionapp.com/blog/sketch-tutorial-radial-progress-bars/

Once we had a clear direction, we used the Android platform to create quick prototypes that we could test on a small user group.

Being aware of the cost of customisation, we used native components for most of the UI elements as well as native navigation patterns. This allowed us to develop and test several variations in a limited time.

Testing a functional prototype helped us to get a general proof of concept and at the same time identify on a first stage core usability issues.

An example:

After the first test session, we decided to remove an interaction on the main chart that switched between “steps count” and “percentage of the goal reached”. Apparently the graphical chart was providing enough information and the users didn’t really need the specific percentage value.

Something we though it was necessary, it wasn’t.

Early prototype UIs: After a first round of tests the percentage label gets sunsetted.

After a few iterations based on users feedback, we finally had a clear direction set.

4. Refine

With the structure nailed down it was time to add some identity to the product.

The round shape of the progress chart inspired the logo and set the style of several components of the design system.

Subtle landscape graphics were used for the backgrounds.

A fresh blue 💙 was chosen as main brand colour and it became also the user’s default colour for the main chart and the personal profile.

On the other end user’s friends initially had random colours auto-generated through code. As we could immediately see, this brought a large range of weird unexpected colours in the UI 😭😭😭

After considering different technical solutions, we then opted for a pre-defined color palette which eventually improved a lot the app experience.

Android and iOS users are familiar with OS specific patterns and flows that often differ between the two platforms.

In our case, while the home screen keeps the same layout for both platform, some of the secondary screens adopt platform-specific elements.

Also the launcher icon mimics the typical gradient on iOS while has a material elevation for the Android adaptive icon.

The friends section is shown as a table cell on iOS and as a tab on Android.

At this point we were pretty much ready to launch but we still wanted to add some final touches to the UI.

We used contextual tooltips as standard components to guide the users through the different scenarios, such as:

  1. First time experience
  2. No Friends added
  3. No steps made
  4. Goal reached

We also felt that we could communicate more motion through the interface, considering that the app targets walkers as the main users-group.

We therefore decided to play around a bit with the Android toolbar component and the result of this experiment was a custom animation triggered on scroll.

Juhani Lehtimäki wrote more in detail how this was implemented in his post Toolbar Delight.

We could finally say we had completed also the top part of the MVP pyramid.

5. The market validation

With a couple of weeks delay on our set deadline we finally launched our app on both Play and App stores! 🎉🎉🎉

The reaction was quite positive and we received a lot of feedback and suggestions from the users who tried the app.

Looking at some of the feedback we iterated on some post-launch fixes.
We improved the friends profile by showing the weekly steps and daily wins, and we fixed some issues in the invite process.

It was then time to freeze the feature list and move to some other projects. In the meantime we would collect some data and observe the product usage. ❄️

After a few months on the market and quite some data gained, we’re now ready to draft the first insights and get ready to take the next steps.

We overall saw a slow but constant growth in downloads and DAUs, but we can definitely get better when it comes to no. of sessions and user engagement.

The notification model is still something completely missing at the moment (exception made for the invite flow) and we’re also looking into possible solutions to improve the interaction between friends.

We are really looking forward to improve the experience of the app, so any feedback is highly appreciated!

Shipping a side project in 2 months is definitely not trivial. It requires strong motivation and commitment. What helped me to stay focused and keep the pace was:

  1. Having a small team strongly motivated to hit the target
  2. Sharing the same project scope
  3. Learning new things
  4. Having fun!

So finally, if you have a bullet-points list with personal ideas that you never touched, just 1. find a good mate who’s interested in the project, 2. set a reasonable target and 3. start working together on it!
As that old saying teaches:

“Well begun is half done.”

Snapp Mobile

Snapp Mobile Engineering and Design Blog

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store