As a UX designer I often work on the earlier stages of a product. I design things like product flows, layouts, and the fundamental elements of interfaces. Sometimes I start from scratch. Sometimes I take things apart and put them back together again. Here are some of the ways I do that.
Interaction Design
OK, this term could be used to describe everything I do, but I like to think about interaction in terms of the macro and the micro. My aim is to keep looking at what I’m doing from both perspectives; staying focussed on the overall user journey (product discovery, context, emotions) but also considering the details of how every swipe, hover or click will feel.
Above is a good example of some high level concept work that includes both macro and micro thinking (adapted from a project designing fitness apps).
OUTCOMES
THE BIG PICTURE
In the early stages of product design I map out what users are trying to achieve, how they might discover the product, and how they are likely to use it. Later, I design flow diagrams to show how the product will facilitate these interactions.
MICRO-INTERACTIONS
When it comes to the nitty-gritty, I carefully design and describe the way in which different interactions should be implemented, and work with developers to make sure things work as intended.
Sketching & Wireframing
These are invaluable tools throughout the design process. Sketching with good old pen and paper allows me to quickly realise and evaluate ideas. When it comes to wireframing, I use both quick outlines for early stage product development, and high-fidelity wireframing for projects where the details really matter.
CASE STUDY
SPEEDO ON
Speedo On is a web app for tracking your swimming. The wireframes for this project had to be turned around quickly, but as a complex app required high fidelity. We developed a modular design language that allowed us to work rapidly on wires that clearly communicate functionality.
Prototyping
Prototypes are a great way to bring your product to life before committing to development. I build various prototypes, from stitching together static sketches to demonstrate an overall flow, to creating detailed working mockups of interactions. Prototypes are great for research with users early on, showing ideas to potential investors or simply getting something more tangible in your own hands.
CASE STUDY
THE KEYHOLDING COMPANY
When working on this complex app for security operatives, I had to consider a large number of possibilities in the user flow. The Invision prototype shown here allowed me to put early designs in the operative’s hands to make sure the steps made sense to them.
Information Design
Making sure that content is logically organised in line with user expectations is one of the biggest challenges with any product. I conduct audits of existing content, work with users to understand what they're looking for, and produce content flows and sitemaps to structure websites and apps on a content-first basis.
OUTCOMES
SITEMAPS
Sitemaps are a crucial part of early stage web design work. For large brochure websites (such as the Great Ormond Street site), it allowed us get a handle on the huge amount of content. The example here demonstrates a more typical small business site.
UX Writing
Words are important, and I prefer to avoid 'lorem ipsum' in favour of meaningful examples wherever possible right from the start. UI copy needs to guide users and aid positive interactions, and I have a strong grasp of the best practices that ensure this.
OUTCOMES
CLEAR, CONCISE and consistent Copy
From button labels to menu items to error messages, I work hard to make sure that UI text is right for your users. My love for clear communication extends beyond UI though, and I enjoy working with business owners and marketing teams to craft creative copy alongside designing layouts, so that one isn't constricted by the other.
Creative UX design
When most people think of designers, they think of colour experts and pixel perfectionists. I chose UX design because those are not my areas of expertise. I prefer big picture thinking—but that doesn't mean I'm not creative. Products need to be usable, but sometimes they also need to be exciting, visceral and inspiring.
I like to think about the overall emotional experience as well as the practical, which is why you'll sometimes see more life in my wireframes. I also design for fun and take on smaller clients for lower costs when I am excited about what they're doing!
EXAMPLES
CREATIVE UX DESIGN SHOTS
Wireframes for a Big Data company with example imagery to inform further design work
Reworking UI design for Heist's shopping cart flow, using their existing design language
Website for upcoming musician Natalie Evans—a simple one page Webflow site that embraces her aesthetic
Explorative design concepts and prototyping for popular language learning app Memrise