Joe's UX ProcessOver the course of his UX career, Joe has refined his data-first design methodology. It’s all about telling the user’s story, using that narrative to build effective solutions to problems. Let’s walk through his UX process for a video & chat service called ‘Chattix’.
UX Design is Data Driven Design
While UX generalist principals are important, Joe prefers (and loves) conducting user interviews, on-site observations, user surveys & studies.
For this particular Chattix video & chat service, Joe designed a 10 question survey to discover generalities about the targeted user base. Visualizing this data provided insight into what people want, what they actually need and who they really are.
Features we initially thought to be important were in actuality ranked very low by users. As UX professionals know, “you are not the user”.
Documenting user data is invaluable to the rest of an effective UX process.
Tell the User’s Story
While gathering solid data is important, looking at numbers & charts isn’t very humanizing. Creating context through personas and scenarios allows the design team to keep not just the users’ tasks in mind, but the entire user story.
The story of Chattix users transitioned from sedentary, laptop-oriented people to mobile individuals, people on the go, active, not sitting in a lab at a computer. Through these personas and scenarios we came to the realization that Chattix needed to be a mobile app first, and a desktop app second.
Discovering this information about the user early on prevents massive changes and rewrites later down the design process. This saves time & money.
Realize Expectations Through Card Sorting
After initially mapping out what we thought the user might need from Chattix based on existing chat & video services, Joe thought it effective to bring the users back into the design cycle. What we, the designers, ‘think’ is probably different from what the users ‘know’.
For actual insight into how the user sees potential elements of the Chattix service, the online card sorting tool OptimalSort was utilized.
A refined terminology / taxonomy was developed based on how real users grouped & labeled content. It was time to take these findings and begin mapping out the Chattix structure.
Discover & Document Structure
Traditional card sorting exercises helped define how elements of Chattix would relate to one another. With user centric data in hand Joe could begin to visually lay out how the interface might possibly flow.
Working tactilely on a sticky-note wall, Joe could easily manipulate the layout and arrangement of our UI elements. Photographing & documenting all of the changes in this process is important in case one takes a wrong turn. Never throw out work!
The evolution of the card sorting findings into a graphical UI is rapid yet thorough & effective.
Prototype Rapidly for Immediate User Testing
The sticky-note wall was a great method of mapping information architecture and visualizing possible Chattix system flow. The next step was to put these ideas to the test. Rapidly.
An initial phase of sketching possible UI components on graph paper with movable notes was found to be a bit crude. Was this something we could show the user? Using his crafty hands-on skills, Joe evolved this phase into an ‘interactive’ prototype which could be tested with little investment.
These low fidelity prototypes are great for quickly fleshing out ideas, rapidly testing them with the user – and throwing them away because they are cheap! The ROI is huge.
Incorporate User Feedback into Wireframes
Continual user feedback is important. We are UX designers. We design for the user. Despite this, a common pitfall to avoid is being stuck in an infinite user feedback loop with no progress to show shareholders, visual designers or developers.
Moving forward, Joe utilized the successful aspects of the low fidelity prototype and integrated them into rapid lo-fi wireframes. These wireframes map out the major elements Chattix will focus on.
These hand-drawn documents will be the basis for future prototypes that more accurately reflect top-tier Chattix features.
Interactive Digital Prototypes
Using Photoshop & InVision, interactive wireframes & prototypes were created quickly (as early phases defined what needed to be done). These interactive digital prototypes allow designers, developers & users to test and evaluate Chattix systems without having to be on-site.
Using open source & Creative Commons photos, icons, and design elements allows accurate testing of app interactivity without spending time, money & worry on polished designs.