Inspiring topics on leadership, business growth, quality, technology, personality development, and Altyod's products and services updates. #solutionsthatkeepusconnected
This mini post is for those who are new to WordPress. To say it in simple words, WordPress allows you to create wonderful websites and blogs without much technical knowledge at your end and maintain it too without hassle. Basically, WordPress is a Content Management System that has freely available plugins and themes for everyone to use as Open Source code under the GPLv2 license. WordPress is considered to be the biggest community available online for blogging, and shopping websites besides regular websites.
Moreover, there are 50K+ plugins available for every website and blog’s needs that you may find on WordPress website. These plugins can be easily downloaded and installed; once installed on your website, receives automatic updates so you can stay up-to-date with the design and features each plugin has to offer. WordPress is here to stay. Happy Blogging!
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.
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.
Presenting design ideas thru a story board:
A graphical representation thru a storyboard can be presented to a group for easy understanding.
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.
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.
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.
If you are familiar with User Experience (UX) or a UX Designer yourself or have a User Experience Designer in your project team this article would make sense to you. For starters, not to get confused; the term is used in various ways UX/XD/UXD/UED they are all same.
User Xperience Design (UXD) elements can be applied to new as well to an existing application.Applications that maybe web or mobile or desktop; sometimes users find it challenging to use an application on provided front-end User Interface (UI). That means the application designed is not user friendly and issues faced by users are design related. If the project is big, chances are high that there might be few design complexities that was ignored or overlooked at initial stages of the design discussions.
No matter if the existing application is big or small, there is a need for considering the project budget and other limitations involved. User Experience designer with his team shall understand the design problems and constraints first and come to solution accordingly instead thinking or suggesting creating entirely a new design. Every UX Designer shall put these questions to selves before trying to solve existing design problem:
What design problem currently application have?
How similar problem is solved by others?
Which solution best suit for our users?
Solution can be presented in the form of an idea and/or an interactive design for the user(s) needs and that design is more likely accepted if based on the feedback collected from user research and user testing.
To elaborate the above statement, shown below is the UXD process elements with an example.
Example:An existing eCommerce application’s Shipping/Payment page designed for web and mobile; issues have been noticed that impact the users in usage of the application for design not being user friendly.
1. What Design Problems currently this application page have?
Page is too long a scrolling. Not a user friendly interface for a first time user or to an existing user.
Solution:
– Need to remove scrolling as much as possible and break the features shipping / billing / payment to a flow leading to next section once previous section is completed and with a click of a button.
– Need to structure the layout with a logo, page title, navigation links/menu, well coordinated colors, and privacy statement-terms of use on the footer.
2. How similar problem is solved by others?
Future delivery date option is required that is missing currently: User Research data results in requesting for this feature on Shipping Address section so user can choose the desired future date for getting delivery of the order.
Solution:
– As it is impossible to track the inventory for a future date in case customer orders and cancels it, top retail eCommerce sites like Amazon.com, and Walmart.com does not offer future delivery date option instead have shipping delivery options before the checkout on their website. This eases the confusion in managing inventory and assures the user for current availability of stock to choose from.
3. Which solution best suit for our users?
Before filling the shipping/billing/payment info, Checkout screen shall ask for Login information. Assuming, user is purchasing first time on the site is less likely to register in the very beginning.
Solution:
– Checkout as guest: Shall navigate to Shipping address screen. Not all eCommerce sites allow Checkout as guest. Walmart.com does have this option. Image courtesy: walmart.com
– Create new account: Shall navigate to new user registration page. – Existing customer Sign In: Shall be allowed to login in same Checkout page to lower the page forwarding.
The above example is a partial post. In continuation to this post, will provide insights on ‘Presenting Design Ideas Visually’ in Part II in our next post.
Hoping this post would be of help to understand the concept of presenting ideas visually and interactive design solution using various forms of UXD.
