I had done a lot of sketches of how I want the app to look, and I wanted to start digitising my designs. However, I found it difficult at first to design it because I tried picking different colours and seeing what worked best together which was taking more time. So I decided to do digital wireframes instead based on my sketches, as I can then get the layout down and worry about that afterwards.
Examples
I looked at some example wireframes firstly:
Wireframe Development
I then started to do my own on Photoshop.
Walkthroughs:
I thought of the five main features the app has to offer to put on the walkthrough screens. These will feature when the user first opens the app. I will create illustrations for each point in Illustrator.
Log In
From the walkthroughs the user is then given a choose to sign up or log in. Here is the log in page. There is an arrow that allows the user to go back to the walkthrough page.
Sign Up
I started doing the same for the sign up page as well.
I was going to have it over three pages so I put some breadcrumbs in.
I then thought this might put users off if there was a long process, so I put it all on one page.
I then rearranged the fields so they made more coherent sense.
Payment
As the user can pay their bill through the app I made this page to show how it would work. I wanted a tab for the payment, and a tab for the breakdown of the bill. As I'm not exactly sure how to break it down or what would be included I thought it's best to do it this way because I don't have to design the bill breakdown page, but people would know what I meant and that it exists.
There wasn't much that was needed on this page, so I decided to create space for an illustration that would go there instead. This helps keep it more fun as well.
I made the fields 100% width.
I then changed the shades of grey as I realised that the bill breakdown and submit button were the same and I didn't want that - the button should have a different hierarchy to a tab.
Navigation
I then started working on the navigation. I wanted a slide out menu from the hamburger icon. I put a darker opacity over the remaining page so it wasn't distracting to the user.
I separated the sections by background colours. I think showing the nav lets people know the content of the app easily.
I also put in some squares to show that there would be icons there.
I thought they might be too much though. I also added a square at the bottom which would be a settings icon.
I also tried doubling the space for the links to fill more space. It also makes it easier for the user to click on one because they have more space for their fingers.
Notification
I also showed how a notification would look on the home screen as well as what it would say.
Submit Water Reading
The user can also enter their water meter readings via the app to the supplier, and this would save them a lot of time. It would work by the user being able to swipe the reading using the dial to change the numbers. The tab also shows how there is previous readings available.
Showering Tip
Coach Mark
Track Usage
Leave your comment