I did the Discovery and Planning stage for BillBot but never got the chance to actually develop it. BillBot is a Money and Bills Organiser. I created a Statement of Work doc, a ‘Pitch’ Presentation, Wireframes, Typography and Colours doc and Designs.
What is it?
BillBot. In short, is a Money and Bills Organiser. You tell BillBot, the Details of all your Bills and Payments and you will receive reminders via Email or Text Message alerting you a payment is due.
E.g. “Your Bill to PayPal of £149.98 is due Tomorrow!”
There will be a Free and Paid Account through BillBot, with the Free Version giving Limited Features and Ads. The Main Objective of BillBot is to help keep money organised. The user will be able to instantly see the next bill that is due and how much it will be.
I began documenting BillBot in the form of a Statement of Work, Presentation and ‘Typography and Colours Document’. The Statement of Work Document outlined everything there is to know about the site, all the way from the CMS that will be used to build the site to the Page Structure and Sitemaps.
The Presentation was similar to pitch. It outlined things like Who the site is aimed at, Wireframes, Designs, Plans and Prices.
The Typography and Colours Document outlined the Fonts, Font Sizes and Colours that will be used throughout the site.
I began thinking of the Users who would use BillBot, and began creating User Stories. Which made me think of what they would actually want from the site.
Next, I began creating Impact Maps which made me think about a specific Goal for the site and how each user would impact on that goal. E.g. “Increase the Number of Site Visits”. A Current User could Impact on this goal by a ‘Streak’ or ‘Loyalty’ Feature being added to the site, encouraging them to access the site every day, therefore increasing the number of site visits.
Then, I created Empathy Maps. I made 3 Case Studies of users of the site and thought about what they may Say, See, Think and Hear before using the site.
Once the Documentation and Planning had been completed, I began creating a couple of Sketches and a Moodboard for BillBot in my notebook.
I then opened Axure and began replicating these sketches as Wireframes they were simple but showed what I wanted it to do. I came up with 3 Wireframe Ideas in total and couldn’t decide which to use.
After the Wireframes, I began recreating the 3 wireframes as Designs, adding colour and images making the designs harder to choose which was best!
In the end, I chose the Designs on the right (underneath if you’re on mobile) as I thought they were the most practical and appealing to a user. I thought the use of the company’s home colour such as Spotify’s Green, gave the site a nice feel.
I created an interactive version on Codepen.