Article by Uma Angina. 

Presenting Design Ideas Visually & An Interactive Design Solution

In the November month’s post on this blog, I tried to provide an insight on the solution to existing design problems using UXD elements. In this post, we shall look into an overview on ‘Presenting design Ideas visually’ and ‘Interactive design solution’. Let’s consider the same example provided on last month’s post in PART I – “An existing application’s Shipping/Payment page designed for web and mobile; issues have been noticed that impact the users in usage of application for design not being user friendly”.

Shipping-Billing & Payment details provided on one single page to access on a mobile device.

Based on this mobile screen the main concerns we discussed earlier were:

• Before filling the shipping-billing/payment info, Checkout screen shall ask for Login information
• Shipping/Payment screen shown above is too long a scrolling
• Future shipping delivery date option is missing

Need to ensure that all below solutions for above related concerns are addressed while presenting design ideas:

A. To provide Checkout page before proceeding to shipping-billing/payment screen.
B. To structure the layout with a logo, page title, navigation links, well coordinated colors (shown in high-end mockups), and privacy/terms page links on the footer.
C. To provide options on Checkout page for Checkout As Guest, Create New Account, Existing Customer Sign In.
D. To provide Checkout navigation screens as applicable;
– Checkout As Guest, shall navigate to Shipping-Billing screen.
– Create New Account, shall navigate to ‘Create New Account’ screen.
– Existing Customer Sign In, shall be allowed to login on same
Checkout screen to lower the page forwarding.
E. To offer ‘Shipping delivery’ options on the shipping-billing screen instead future delivery date option. It is learnt that tracking inventory for a future date with accuracy is impossible in case customer orders and then cancels it.
F. To remove scrolling on the page and break the features shipping-billing/payment to a flow leading to next section with a click of a button.

Now, let’s see how design ideas can be presented visually for these solutions using various presentation forms to the stakeholders or groups involved in the project. Any one of these form types should be sufficient to present ideas depending on the presenter’s choice and audience. Not necessarily more than one or all form types are required to present design ideas.

1. Presenting design ideas thru a rough sketch:
   A free-hand sketch(s) or glued small piece of papers showcasing each component put together or using free-hand and paper pieces both in combination can be presented to a small group for a quick review and feedback.
2. Presenting design ideas thru a story board:
   A graphical representation thru a storyboard can be presented to a group for easy understanding.
3. Presenting design ideas thru a workflow diagram:
   Workflow diagram can be presented to any size group for review and quick understanding of the functional flow.
4. Presenting design ideas thru wireframes (low-end mockups):
   Wireframes can be presented at a review meeting or can send link to any number of people for feedback in the form of html page with placeholders provided for each component of the screen. This can be created using any available wireframe creation software.
5. Presenting Prototypes (high-end mockups) – an interactive design solution:
   It is basically the output design created based on the ideas presented to the group in the form of sketch / storyboard / workflow / wireframes; and the feedback received from group helps the UX Designer to turn those ideas into an interaction design. Interaction design is also known as high-end mockups or design prototypes; is usually presented in the form of front-end design using HTML with basic interactions provided to links and/or buttons without any backend connectivity. Presenting high-end mockups to the group is always an advantage to get the quick feedback on usage of colors, labels, logo, components placing, links, buttons, and screen’s interaction.
   On the other hand, ‘Annotations’ if provided to each component on the mockups help the developers and testers to understand design and navigation flow as an useful guide which is not covered in the Business Requirements document.Hoping this post would be of help to understand the concept of presenting ideas visually and interactive design solution using various forms of UXD.