Prototyping and more
Leveraged a background in marketing while heading product development to augment any interface design task. The following are stages followed during the conceptualisation to development of all projects:
Secondary research on customer acceptability
Interviews with selected target audience
Creation of rough wireframes
High-fidelity designs, post approval
Work with project team to facilitate development
Feedback from beta users and customers
Concept to product examples
The following are concept samples and actual designs from existing products:
The below document was created to speed up and standardise the process of designing mobile apps (for self and other company employees). The aim was to provide managers and developers with a detailed guide on the components that make a professional application.
Mobile app design guidelines
Preference for personalisation
A product is not just about the way it looks or how it gets the job done, little details that make them unique matter. The following are examples of how discussions and research led to the design of softwares that are more than a sum of standard functionality:
By focusing specially on non-primary features, there is a high scope of improving the experience of users. Here are two of several such examples:
Tabs within a single page
One of the most consistent observations in previous versions of the product in question has been the desire to view multiple reports at the same time. Users opened multiple browser tabs to solve this problem, which caused conflicts in the active session instead. The best solution was to offer users the ability to open multiple reports in the same screen and make it emulate the functionality of tabs.
Hiding control elements
Desktop style systems have a tendency of looking complex because of the features crammed into one screen. And hardly any of those features are optional. What is optional, is showing them at all times. After interacting with beta testers, a toggle button was introduced to let users make that choice. But to not confuse users with fullscreen (F11) mode of browsers, the symbol of a tick mark was used to denote a relation with controls.
Uniqueness was a priority while building apps, since they are more personal than desktop systems. The goal was to make the user's work flow easier and at the same time make it memorable, even in the smallest way possible. The following are examples of such ideas put into practice:
Chat based data entry
It is not unknown that most business systems have a serious, even dull, look to them. But an interaction with a group of users (based on a study of chat bots) led to the mockup of a chat-like data entry form.
This lends a unique experience without increasing the number of taps required to complete the process. As shown above, to guide users, the bottom segment changes based on the information being entered. A research feedback highlights how, "the absence of fields before they're needed makes the form look simple and less daunting to complete."
Multi-type search screen
Instead of maintaining multiple screens for different kinds of searches, it is logical to combined them into one. The above design gives the user an option to scan a barcode to retrieve data or enter it into the text-box manually. Since a camera doesn't need the entire screen, the keyboard invokes automatically, thereby saving time for those who don't scan.
Most apps offer predetermined alerts, which can be considered as proactive, but there are situations in which reactive action is required. It was concluded by interviews that many users dismiss notifications when they came and ended up forgetting the work they did when they went to record it. This feature warns users if they ignore the usual notifications.
Apps follow a well defined flow. But in between that flow, there are side steps that need the user's attention.
If header colours are to be reversed, users get a proper understanding of the activity's context.
The example is of a delivery details screen. This and the previous screen have red headers, as they represent the primary flow. The review screen, which is accessible from the details screen, has a white header to depict a departure from the main flow.