Step 1
Getting to Know the User
A user-centered design approach enables a better and cohesive understanding of the user's needs, desires and limitations. Based on the available data, such as behavioural user patterns, direct user feedback, user surveys, observational study cases, demographics and the product vision given by the stakeholders, I created a set of personas that help all the people involved in the process to have a better understanding of their audiences.
This enables a common product vision, an empathic approach towards the user and helps with the decision making process and prioritization of the various product features.
Tools used: Google Analytics, MindJet, Microsoft Office, Survey Monkey, Adobe Acrobat, Open X
Step 2
Wireframes & Prototypes
Wireframes are the skeletons of sites. Three abstract boxes on a cocktail napkin is not a wireframe but an idea at best.
Based the persona’s profile and stakeholder vision, a wireframe is built to illustrate the core functionalities of the product and the overall expected behaviour flow. The level of detail of the wireframe depends on the features' novelty. Another reason to develop a highly detailed, functional wireframe is for user testing. Being able to test earlier on the product on a sample of users might point out major flaws in the design and vision, and be a game changer. In a less dramatic case, it will point out some user experience improvements that will save on later iterations and on resources.
Another main advantage of a wireframe is that is focuses everyone to look at the core functionality and features and not at the colour scheme. It is also a great tool for a Product Owner or a Project Manager, a tool which can be used for estimation and negotiation with the production team. From the stakeholders, to the product owner, developers and designers, the wireframe is a reference point used for the whole production cycle.
Tools used: Axure, Mocking Bird, Adobe InDesign, Jira
Step 3
Design
A user interface designer can be at his or her best when possessing a good understanding of the user's needs, of the wireframe and of the production requirements. At this stage the aesthetics are created and the pixels are shaped to create a graphical user interface. I always have in mind three main attributes when designing a user interface:
- CLARITY- the information is easy to read, users are not overloaded with extraneous information.
- DETECTABILITY - the user's attention is directed towards the information required, the user can efficiently reach his or her goal.
- CONSISTENCY - a unique and friendly design, up to the user's expectation that ensures the user's satisfaction or joy when interacting with the product.
User testing is vital at the design stage too, being able to steer the visual direction towards familiar ground and easy recognizable navigational paths.
Tools used: Adobe Photoshop, Illustrator, InDesign, AfterEffects
Step 4
Production Support
The designer has another important role in a production team: understanding the production requirements so he or she can streamline the transfer of the pixel from the static to a dynamic browser-friendly design. A 90% accuracy of static design to product is a minimum accepted standard that can be improved only by better communication and a better understanding of the production limitations.
Including the design resource in the production process builds such understanding and also furthers awareness towards the different browser and gadget standards. On the long run, this enables the designer to build more flexible layouts and maintain visual consistency and coherence. An added bonus is an increase in the fluidity of communication between designer, front- and end-developers, and other team members.
Tools used: Jira, Adobe Photoshop, Illustrator, InDesign, AfterEffects
Step 5
Launch & Broadcast
This step includes work that has been done before the actual launch that might be included in previous steps, such as:
- search engine optimization
- marketing positioning, strategy and the design assets
- implementation of trackable and measurable systems
Tools used: Adobe Photoshop, Illustrator, InDesign, AfterEffects, OpenX, Jira, Google Analytics, WebmasterTools
Step 6
Iteration. Iteration. Iteration.
"The only constant is change" Heraclitus of Ephesus
And to address change the only path is to iterate, remodel and grow based on the market needs and technological advancements. There is much opportunity in change.
