Follow Me On Twitter
Mobile First UI Design
Recently during a client conference call I was asked the following question:
"How do you transcribe or present user experience ideas to a stakeholder who is working remotely"?
I began to think about the question as a way to inform myself about the specific need of the client while delving into delivering a specific solution. Designing UX walkthroughs as a means to iterate an idea is a fantastic way to visually display web prototypes. A User Experience (UX) Walkthrough is a tool used to identify usability and accessibility issues in a website or application. It is a procedure for examining a user interface following a set protocol and making assessments based on predetermined criteria. It emphasizes paired or collaborative evaluation of user interfaces by designers and non-designers alike, and serves to bring a diversity of perspectives to bear on the design process. This tool is a synthesis of methods (heuristic evaluation, cognitive walkthrough & code review) that enables the reviewer to make assessments both from the user's point of view and that of a design expert.
Delving into the set of design tools one might use in our client walkthrough I decided to use Adobe XD ( Disclaimer: I have not been endorsed by any of these vendors nor do I work for Adobe). The multifaceted nature of the UX Walkthrough enables the reviewer to make assessments across several dimensions (general design quality, task-oriented usability, assistive technology usability, accessibility standards compliance & code quality). A UX Walkthrough can be performed by novices as well as experienced evaluators. The result is a comprehensive and multidimensional report of usability and accessibility issues.
When To Use:
Choose a user Specify an explicit user goal Prepare working software or prototype Choose an approach (for example, when testing a digital interface include screenreader users, keyboard-only users and users who have difficulty processing text) Plan both the Heuristic Evaluation and the Cognitive Walkthrough Perform the walkthrough and record the results.
The goal behind the usability video was to show the stakeholder the iteration steps a user would take upon launching the app. I created several design prototypes to illustrate call to action content regions, navigation touch controls and a basic style guide for feedback and development. I also provided high fidelity pixel perfect design prototypes with navigational UI along with the video walkthrough.
Explorer App-Screen V1
Explorer App-Screen V2
Explorer App-Screen V3
Explorer App-Screen V4
Explorer App-Screen V5
Explorer App-Screen V6
Explorer App-Screen V7
Explorer App-Screen V9