RECENT UX WORKJoe's most recent work was done for Healio, a company which offers daily clinical news, peer-reviewed journals and CME in more than 30 medical specialties. Projects include a Targeted Advertising Segmentation and Campaign Analysis tool, Medical Practice Registration forms, CME Checkout Tools and Specialty Medical News Websites & Components.
We base much of our work off of solid, in-house research whenever possible. When research is unavailable, we use generalist principals working directly with stakeholders. The personas created provided insight into various user archetypes as well as guiding user stories.
Healio’s audience includes medical specialists, educators and students. Younger students are more likely to use checkout services like PayPal, whereas educators are influencers who dictate what students need to purchase. There’s a little more to it than that, but I won’t go into detail here.
On a side note, I like to use an AI-driven profile picture generator as not to use ‘real humans’ in my personas.
These stories help visualize what users actually hope to accomplish, either proving or disproving earlier assumptions. Knowing a user’s story provides a solid framework of what the product / service being designed needs to accomplish.
Medical Specialists often work 9-5… but is it during these hours they read news and journals? What time of day are these professionals using our services? Does that affect what devices they use? Yes… yes it does.
Again, I’m leaving out specifics as this is specialized industry research. I can say all of the data we gather comes into play when creating these persons and user stories.
Breaking user stories & scenarios down into visual chunks with ‘possible’ interactions and relationships helps inform project structure. We now can see not just what the users wish to accomplish, but HOW they get there. It is a visualization of the User Journey.
I consider mapping out these flows a type of proto-sitemap. It’s an informed guesstimate of what needs to be designed. Iterations throughout the design cycle will only improve these flows.
Ideation & Sketching
Low fidelity work is easy, cheap and disposable. Low fidelity ideation and sketching allows teams to easily explore ideas without wasting resource and time on pixel perfect (or even digital) designs.
Sketching remotely was invaluable as it provided us a way to ‘whiteboard’ comfortably. I’m not a fan of sketching digitally. Paper and pens are my go-to.
Our team would take sketches, photograph them, and then organize them in UXPin digitally to create rough maps of how the project should ‘work’. It was a great collaborative experience.
Blockframing is a quick & easy step to outline & prep for layout on multiple viewport sizes. Chunks of content explored in ideation & sketching are laid out on a grid (I’m personally a fan of the 12 column frameworks), resized & reorganized for various devices.
This step might be considered part of wireframing, but I prefer using it as a mini-step between sketching and wireframes. “Let’s take out sketches, throw em on a grid, see how they flow device to device and then we’ll add in content & interactions…
Wireframes & Documentation
Building off of blockframes, wireframes are where interactions and specific content / placeholders are added. At this point in the process, every interaction needs to make sense. These aren’t pixel perfect or pretty, but the need to WORK. This is the blueprint.
Documentation is also added into wireframes for developer reference. If a design system already exists, wireframes should be enough to start building.
High Fidelity & Interactive Mockups
Sometimes business owners and stakeholders require high fidelity, interactive mockups before they sign off on anything. Applying a design system to Wireframes allows a representation (as close to possible as pixel perfect) of the final product to be visualized.
High fidelity mockups usually aren’t on my To-Do list, but for certain projects the high-fidelity and interactive designs help sell ideas. They’re also great for rapid testing pre-development.