Sketching & Prototyping : Design Part 1

Designing the structure

Now that we have a good hierarchial information archtecture and most of our navigation is organized we will be adding more structure through designing the UI using activity flow diagrams , sketches and storyboarding . Also paper prototyping guerilla tests were performed with our users which helped to refine misunderstood or uncertain areas of our design.

Flow Diagrams

To understand the logical sequence of activities in the easy order application we choose 2 main activities that define the application

1. Placing an Order
2. Checking out "MyOrder"

Navigation Structure
The navigation structure is a combination of the two previously mentioned flow charts above. This will help us understand how the two activities come together to help the user accomplish their task / goals.

Sketches 

The sketches are visual representations of the UI that will be used to test the users in the guerilla test. The reason for the paper based sketches are primarily because they are easy to change and update after user reviews.

Gestalt

We use the laws of gestalt to add more clarity to out application user interface. For the menus "proximity" was user to space icons and "grouping" in rows and columns.

Affordances

This can also be found in our design where we have indicated in the side menus active & inactive menus that are "depressed" when active and "raised" when inactive also color shading.

 

Storyboard

-       Storyboard is a sequence of drawings, typically with some directions and dialogues, representing the actions need to be taken in order to reach the goal.

-       In our storyboard we have given a very summarized information, the reason is that user performs the same activity in all three sub menus.

Final flow diagrams & storyboard

The flow diagrams where not changed as they defined the activities efficiently and accurately.These are our final sketches of the storyboard after considering the problems from users after the guerrilla test.