Starting with ‘Design’- #4 Untitled.v3

Progressing

The previous edition of ‘Starting with Design-#3 untitled.V3’ talks about how I used wireframe to take up the project up a notch. Wireframes provided me with a more perspicuous picture of what the next phase would be like in terms of design and interactivity.

In this edition I would be talking about the very first high-fidelity prototype of Untitled. The current mode looks something like this:

I used SAP Build for making the current prototype. In addition to providing tools for making a high fidelity prototype for your apps Build also allows to create design flow to have a sense of how the application will actually work. We can also create user study to have all the suggestions and feedback in the same project as our prototype.

The prototype actually works!

https://sapcsr.build.me/prototype-editors/api/public/v1/snapshots/b8e49ef4f9c24ff40f6d5a96/artifacts/latest/index.html#/Page1

Above is the link to see the design flow of untitled (Feel free to explore and give your valuable feedback).

The Journey so far

This is how I started implementing my design, with a pen and paper :

Untitled.V1 (Where it all began)

After receiving feedback at this very nascent stage I started working on wireframes to have a better understanding of the screen design basics.

Untitled.V2

And here is maybe a step closer to what the actual product would feel and work like:

Untitled.V3

Evolution Phase:

Version 1,2 and 3

Sooo, What is new here?

1. Text input

Anyone testing the prototype out can actually enter text in the areas that require to do so.

2. Navigation bar

The navigation bar actually works! It provides an easy way to traverse between different sections of the prototype.

Next phase

The next stage would be testing my prototype with a relatively larger audience and incorporating feedback for improved usability and interactivity.

I would love to hear your valuable feedback. Connect with me on Twitter.