4. PROTOTYPE – from Paper to MVP

In the last post I outlined our how we ideated to come up with lots of different possible design solutions. In the post how we created our initial prototype and some of the design decisions made along the way.

Paper Prototyping ideas

Since there were some good ideas that came out of the ideation stage, we decided that it would be beneficial to prototype some aspects in paper so that we could test some more creative ideas without become too heavily invested in those ideas at this early stage.

irish-rail-seat-selection-1697.jpg

One example of this was the paper prototype that I created for the select seats part of the user journey.

You can view the video of the paper prototype being user-tested here:

https://youtu.be/BNOaVY3ielo?list=PL_D-zVM524CdR_mQRXRdu39Ji9Q36Dgd6

The benefit of prototyping this in paper was that we could learn that there the design was quite difficult for the user to understand initially,

Choosing the best tool for the job

We looked at various different ways that create our prototype for user testing. Initially we looked using balsamiq with invision but we felt that it would have required too many screens to be created given that there were a lot of states that in our user journey. We then look to using a design tool such as photoshop or sketch but felt that the would be high fidelity for a first iteration but that we also would have the same problem of having to create multiple screens for each step of the user journey.

Another deciding factor was ensuring that we had a tool that we could all use, worked across OS platforms and that enabled us to easily share files and publish our prototype when it came time to carry out user testing.

Enter Axure

u3891

Axure has become an industry standard prototyping in the User Experience industry. In 87% of Fortune 100 companies use Axure to wireframe and prototype their products.  I’ve had some experience using Axure in my work and I understand the basic concepts of it. After giving a quick demo to the potential of Axure to Rachael and Alan, they were convinced that it the right tool for the right job. The were a number of features that Axure could offer that Balsamiq couldn’t which how we decided to use it.

Dynamic Content

Because there were often two or more states in each step of the user journey, were able to utilise Axure’s dynamic panels to hold these states and control how and when the states were to switch. For example, on our homepage we proposed a tabbed based layout to switch between the two key user tasks, booking a train & looking up travel information. This was easily implemented with Axure’s dynamic panel.

ptz4x19l9h

 

Conditional Flow

It was important that we could demonstrate that we have considered how we helped the user to recognised and recover from errors. We this this by utilising the conditional flow feature in Axure. This allows us to add simple if / else statements that would also to display error messages if they tried to submit the form without filling a necessary field.

Screenshot 2017-02-04 12.23.56.png

We added some conditional logic to give feedback to user that they needed to select the ticket type of for the journey before proceeding.

 

 

Animations

Motion is a powerful mechanism for expressing and illustrating the relationships between objects (Cooper et al,. 2014). We wanted to utilise animation as a way of giving feedback to user that there is something happening in the background but also to create a mental model that there is a relationship between the information being presented in one screen and the next. This was the case when transitioning from the the payment page to the confirmation page.

wsjrycejfx

 

The drawbacks of Axure

Technical limitations

We encountered a number of technical limitations while working with Axure. Firstly when we proposed the time range pattern for selecting a time, we found out that users struggled with the slider. The affordance was there just the implementation itself was quite buggy. For this reason we were forced to abandon this pattern  and replace with the standard drop down pattern.
Screenshot 2017-02-05 10.41.31.png

Design Limitations

We knew before starting to prototype in Axure that there was going to be some UI constraints especially around form elements and in particular radio buttons. We did identify some widget libraries such as https://axemplate.com/ but in the end we decided it was more important to focus on the functionality and to get the overall user journey right.

Towards the end of the project, I did explore how the UI design how could look for the prototype, you can view this  invision prototype here

In the next post

In the next post, I will talk about in detail how the decisions that were made that got us from Iteration 1 to Iteration 3. In the next blog post, I will outline how our user testing findings influenced these changes.

Advertisements