Software is a powerful tool with seamingly endless practical applications. It's proving capable of solving the most basic to the most advanced problems facing mankind.
Clearly defining and communicating design process is empowering. It enables me to align expectations, work collaboratively, think creatively, focus on deadlines, and produce the highest quality deliverable for every client, every project. Here's the process I follow when designing web-based software applications:
We'll start by walking through a series of questions to make clear the intended outcomes of the project. This includes the thorough collection of style preferences, pre-conceived visions of the designs, hard project requirements, deadlines, etc. We'll align expectations at the beginning so there aren't any surprises down the road.
We'll define the users of the system, the value propositions sought by each user, and the user stories to ensure the features and functions of the software are relevant and pair to the needs of each customer. Design is a problem solving exercise.
Now that the customer types and needs of each customer are clear, we can propose features for each customers' need that will be found in the system. We'll decide which features are most important and which features can be build later.
We'll organize & arrange the collective features the system will have to satisfy each of the users' most pressing needs. This will manifest in the form of flowcharts and diagrams illustrating the flow and order of pages and features. We'll consider the context, timing and frequency of each included feature.
With a logical flow of all inclusive system features, it's time to introduce an interface that will help users navigate and understand the system. We'll start with a basic wireframe skeleton of all pages requisite to cover all system flows and functions.
Prior to making the interface beautiful, it's important to test how easy users can navigate through the wireframes. We'll test this by putting a clickable prototype in front of users, observe them using it and tweak the interface to optimize it's usability.
Next, we want to consider the visual treatments of the software experience. The first step in doing this is to review any existing branding and identity guidelines established previously for the brand. This will help us in deciding the colors, textures, visual treatments and overall feel of the experience's visual language.
A visual language establishes a set of rules that apply to how colors, fonts, icons, and product components are styled within an application. A visual language makes an interface visually pleasing and communicates to users how they should interact with the interface. It includes rules for universal UI components such as buttons, navigation elements, forms, and all other aspects that make up an interface. The visual language will compliment and enhance the overall branding of the service or company that provides the software experience.
With a well established visual language, we can now apply these UI styling rules to each component of the wireframes. This will transform each wireframe into a beautiful final design. Minor adjustments may be needed when the visual language meets edge cases in the interface.
As the world becomes more and more mobile, it's essential to make sure the newly designed software experience is not only pleasant on desktop devices, but mobile devices as well. We'll review each page and recreate the view in a design that accomodates mobile users. Ideally, any action a user can perform on a desktop experience a user should also be able to perform on a mobile device.
We'll add detailed notes and measurements to the final designs making the flows, functionality and specifications of the software clear for developers to seamlessly build and ship the product.
Lastly, we'll deliver all of the project assets over for final review. We'll assist with clarifying questions or provide any final assets to ensure a smooth transition from design to development. Once a review of the project assets is complete, we'll be accessible for input from the development phase all the way through the final launch of the software.