Embedded Files
Paper Prototypes
Paper Prototypes
To start of the prototyping process we wrote down all the features that our app could have and tried to cluster them into sets. Using this we then came up with 3 environments: "Budget", "Eat" and "Plan", which we detailed out in our proposal
For the paper prototype we now needed to figure out where everything would fit. This was harder than it looked and to prevent over-clusterring we had to think critically about which features were crucial enough to "save"
Balsamiq wireframes
Balsamiq wireframes
We then used Balsamiq to bring our prototypes to life. This was still pretty low fidelty as we didn't have any colors/fonts set up. This helped us better see how things would fit on a screen in the correct proportions.
One of the biggest challenges we faced at this step was deciding how mutually exclusive we wanted the environments to be. Should you be able to leave reviews or add to your diary while you are browsing the "eat section."
Looking back at it now we realise that we should have also though tabout how easy to implement these features would be as later we did have to scrap some of them in the interest of time.
form prototype
form prototype
To understand the general look and feel for the app and also help our developers streamline their process, we created a few form prototypes on Apple Pages. These were meant to help with things like what data to display, color schemes and UI placement
FIRST WORKING PROTOTYPE
FIRST WORKING PROTOTYPE
During implementation we swicthed out the blue for a gradient red. We also added a log-in/register feature.
By now we had a fully developed database and functioning backedn which was able to dynamically display data
At this point we only had the login/budget and eat pages sort of ready. We decided this would be agood point to do some initial user testing for the UI before we finish making the rest of pages. Especially since we had only surveyed them about features previously
So, people weren't really fans of the red.
So, people weren't really fans of the red.
Read more about how we conducted our user study and what we learnt from it.
FINAL PROTOTYPE
FINAL PROTOTYPE
Ok, so it's blue now....
Ok, so it's blue now....
Our initial user tests were very helpful in improving our UI. We added dropdown menus, a whole personal macros section and got rid of the red.
We also added logic to allow users to select what they ate from the menus that day. On doing this their remaining declining balance and macros for the day would get automatically updated
Read more about the challenges we faced while making this app and what our future plans are!
Report abuse