Refined end goal
After evaluating our initial iteration, the realised that the end goal needed to change. We brainstormed some ideas and revisited some original ideas. The upshot of this was the introduction of the shopping checkout and full payment journey.
Because our original customer journey changed we needed to create some new screens. Two new additional steps came out of the evaluation, save room and initial walkthrough after the room is created.
Floating action button
Out of our learnings from the initial prototype we identified the need for a much simpler contextual navigation that would serve the user as a utility menu depend on the where on the app they are. We realised that by having a navigation contained in a discreet button we could have a much cleaner interface without having to sacrifice functionality. This also satisfies Nielsen’s eight heuristic principle of creating ‘aesthetic and minimalist design’.
We borrowed the concept of a floating action button, a design principle that was pioneered in Google’s design language, Google Material Design.
Redesigned Products navigation
As part of initial prototype review we revised how the product navigation should be displayed. We felt that in by having the products list at the bottom of the screen, it made the entire app look very cluttered, again breaking Nielsen’s eight heuristic of aesthetic and minimalist design. We resolved this by adopting an off-canvas menu for the product page. We looked to amazon for inspiration on how this could be incorporated into our design. We and utilised the design pattern of the back button. We also recognised that this is a recommended UI pattern in iOS design and and allows users to easily retrace their steps in the product categories. This also made it more efficient to use, satisfying Neilsen’s seventh heuristic principle.
While user journey had changed and new screens added we felt it was important that the scope of the project remained tight but we also felt that there were opportunities to add new features later on. So rather than different variations of the prototype at this stage we opted to storyboard the additional features so that we could get a macro view of everything our app could potentially do.
This proved to be a very worthy exercise as it allowed us to do a task analysis of our product and validate our intentions against our persona’s scenario.
Usability Testing Findings
Because we came together on a Saturday and worked very efficiently we had time that date to do our first usability test. Some really good insights came from it and a lot of problems also!
- Floating action button was confusing
- No clear initial call to action
- User found taking the photo hard to use
Full list of usability findings are logged here
We knew that some of these issues we more serious than other so we took the top three issues and aimed to resolve them in the next iteration phase.
Iteration 2 Slideshow
Google, 2014, Google Material Design retrieved from https://material.google.com/Apple, 2016, Human Interface Guidelines. retrieved from https://developer.apple.com/ios/human-interface-guidelines/ui-bars/navigation-bars/