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.
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:
The problem scope
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:
- In most step counters it’s only possible to see the personal amount of steps.
- 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.
- 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
Start from the core: define the MVP
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”.
I/A and wireframes
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
The Home screen
We wanted to have all the core information directly accessible on the landing page.
So we split the Home in 3 main sections:
- Today steps overview
- Today standings
- 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.
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
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.
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.
After a few iterations based on users feedback, we finally had a clear direction set.
Brand and visuals
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.
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:
- First time experience
- No Friends added
- No steps made
- 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.
We could finally say we had completed also the top part of the MVP pyramid.
5. The market validation
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:
- Having a small team strongly motivated to hit the target
- Sharing the same project scope
- Learning new things
- 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.”