Designing Shift ⬆️ — A Personal Finance Management App
TL;DR Capstone 3 team was 🔥, and I learnt the most on design from this project.
During the course of my programme at MEST, I had the opportunity to work on 3 capstone projects. These typically go in the form of create a team → find a problem → create a solution.
The project that is the topic of this article was developed during the third of those capstone projects, and turned out to be my favourite capstone project ever. It was really exciting building a product that we mostly believed in, and there was a lot to learn from this project.
The Team
The team that built the Shift app was a very competent one, with strengths in the major areas needed to execute this properly.
Joy Michael, our lead developer is an exceptional programmer. She is one of the best programmers in MEST, and a total badass. Our product was going to be an Android app and though she had only started native Android this year, she was already kicking ass at it.
Oluwole Oyekanmi, our business guy is one of the top business people I know. He basically assists the Business Fellows with his contributions when they are teaching us 😄. He is also the top React guy in our set, and an overall exceptional programmer.
Needless to say, it was a very capable team.
The Problem
As a team, we wanted to work on something finance-related. We looked at the challenges outlined on the Ecobank Fintech Challenge and attempted to come up with viable solutions for any of those problems. Of those problems, we believed we could tackle Customer Analytics best.
As such, Shift was born. We realized after speaking to lots of people, that there were few or no apps in Nigeria that could integrate with a financial platform to generate data. That is to say expense analytics, financial reports on spending and income, etc.
The biggest reason being that banks in Nigeria have not been reasonable enough to allow users access their data via an API. We believed if that challenge could be bypassed, we could use the data to generate interesting analytics.
The Solution
We set out to solve this via a two-pronged approach:
- Access transactional data by reading SMS messages and parsing credit/debit alerts from banks, as some apps such as Reach have been doing. We wanted to take it further by pushing this data to the cloud so that users can delete such transactional SMS messages or change devices without destroying their data.
- Leverage our existing relationships and MEST network in the future to interface directly with banks via their API.
With such data, the app will go on to have features such as;
- Expense reports
- Profit and loss statements
- Invoicing
- Income analytics, etc.
The Tools
Sketch 💎
I used Sketch for the first time on this project and I was blown away. Sketch really makes building UI easy as compared to Photoshop. I also love the fact that Sketch is very light (almost 50MB compared to Photoshop’s ~2GB) and consumes very little RAM.
I started out my Sketch file with the Android template. I saved hours of time using the default Symbols and other elements on the Stickersheet presented by the template.
For UI inspiration, I checked Dribbble for similar interfaces to what I had in mind and borrowed elements from some that fit the requirement e.g this shot by Anatoliy Yesterov.
What influenced the UI most, however, was the purpose of the app and what we wanted to users to achieve from using it.
Zeplin 🚀
Zeplin helped (or it tried to, at least) interface between the developer and I. I import my Sketch file to Zeplin, and it specifies the dimensions for Joy. It even creates the XML code needed for the layout.
This way, it ensures that exact dimensions used in the design are used in the app development, making the final product look just like the design.
I have used it also as a developer, and it is really such a timesaver.
Mockuphone 📱
I used Mockuphone to create all the beautiful phone mockups I have been using. This was essential as we had to create a pitch deck and pitch to investors (the pictures I used to introduce the different sections of this post are from the pitch deck) and we needed a beautiful realistic way to show what the product looks like.
Why this is important to me is because normally, I would have had to create the mockup using Photoshop (or maybe Sketch now), wasting valuable time anytime I have to make a change. With Mockuphone, you can have your screens on any popular device type all with one upload.
Other tools 🛠
- Asana for project management,
- Google Slides for creating our pitch deck, and
- WhatsApp and Hangouts for communication.
Like I earlier stated, it was exciting building Shift, and it would have been nice to get it to market and see how it fares. Unfortunately, after the capstone was over, we left it as a school project and moved on to other enterprises we believed more in.
In the famous words of Jian Yang, “It is very good and I don’t want to work on it any more. You can hire someone else.”
But seriously, I hope someone builds a full version of this someday. I know I will use it.
