On August 11th, 2016 I gave a talk about design to a room of aspiring developers at Dallas-Ft. Worth Women Who Code. Design is a really large and broad topic — and goes way beyond the colors and fonts we typically think of. To start off, I explored what others in the room thought of when they thought of design.
What is Design?
“All the things that are pleasing to the eye & soul”
“Intentional creation :)”
“How you use something”
“Making things more easily usable”
“Aesthetically beautiful & symmetrical colors, shapes & styles.”
So, as you can see, if you ask what design is to a group of 10 people, you’re going to get 10 different responses. I’m part of a world-wide design slack team, and even we can’t figure it out. Here are some diagrams that I found while I was exploring how to describe design.
Different diagrams have different areas they emphasize. You’ll notice that all of them are Venn diagrams —emphasizing the UX is the overlap of several disciplines
But lately, I’ve found myself describing design in a new way — namely as a set of disciplines that make up a whole, rather than as a venn diagram. While there is overlap between disciplines, instead I view them as pieces of one puzzle.
On one side we have Research, which informs our Designs. True user centered design MUST be backed by research, otherwise, in my words, you’re just making stuff up. That’s not to say that there aren’t best practices, but the more you can validate your designs, the better.
You see, all the different types of Research, whether it’s qualitative or quantitative, informs what goes into what we typically see as Design — the Information Architecture, the Content Strategy, the Visual Design, the Interactive Elements, etc.
This is a definition that really resonated with me, especially as I walked through the next phase of my presentation. How do we be intentional about creation? Oftentimes — that means starting at the very beginning with defining use cases and business needs, rather than at the end with colors and fonts. I then spent the next half hour or so going over the different deliverables often found within the design workflow.
It’s always better to explain by example, so I put together a fictitious product screen to walk through — a sign in screen!
Now, yes, sign up screens are fairly standardized and there are lots of best practices around them. But I hope you’ll see that being intentional about every step in the design workflow will help us truly build a great sign-in screen.
Pixel Cat & Co.
My cat is adorably talkative. I would link to her Vine, but it’s gone now :( Here’s one video of her.
We’ve decided to expand her reach by putting her videos on a website!
Use Cases & Business Needs
The business needs are:
- Primary: Pixel Cat & Co. needs people to sign up so that we can drive content to them.
- Secondary: Pixel Cat & Co needs to learn more about the audience and what kind of content to produce in the future.
The use case is (and sometimes there are multiple):
- As a cat lover, I want to sign up so that I can receive the latest videos and enjoy other benefits of being a Pixel Cat Fan.
Sometimes a UX Designer will develop these, and sometimes a Business Analyst or Project Manager might — depends on the organization.
Tools: Jira, Trello, Pivotal Tracker, Spreadsheets, any other project management tools.
Use Cases & Business needs have to be setup at the beginning of a project so that throughout the project you can look back and make sure you are still fulfilling exactly what you are trying to do.
One of the next steps is to look at who you are targeting your product at. One way (of many) to do this is through Personas.
Before building a Persona, there are many ways to do research to understand who your target audience is and why they could be interested in your product and what barriers are present. Questionnaires, user interviews, etc. are all ways to learn about your audience.
I’ve personified myself below and included some of the basic components of a Persona. People advocate for different components, so do some research into them and learn what works for you.
Occupation: UX Designer
Why is she interested: Because she loves cats and loves sharing cute things with friends.
Barriers: Trying to cut down on time spent on mobile. She gets social media from other sources, why should she use another one?
Often it’s recommended to print out your personas and have them easily visible so you can continually ask yourself — how am I keeping Ashley in mind as I build?
These may be built by a UX Designer, or by a User Researcher, Business Analyst, etc.
Tools: Word, Powerpoint, Keynote, Persona Builder, etc.
Now that we’ve identified what we are building, why we are building it, and who we are building it for, one of the next steps is understanding how the user will use it! This screen is simple enough that a User Flow isn’t probably necessary — but walking through the exercise anyway helps us solidify exactly what the flow should be and what ways the system will interact with the user.
You can see where the user is involved and how we get to a decision point when the user clicks submit — we need to programmatically check for these things and the system will either move the user forward or display an error message.
Notice that specific UI’s aren’t called out here — we are just trying to understand how we will move our cat lover from point A to point B.
These may be built by a UX Designer, or by a User Researcher, Business Analyst, etc.
Tools: Omnigraffle, Lucidchart, any diagramming software will work.
Information Architecture might be one of the more overlooked disciplines within UX Design. It’s easy for sites to grow out of control, labels to lose their meaning, and content items get organized in surprising ways.
Our sitemap for Pixel Cat & Co. is pretty simple and since all we’re doing is adding a Sign Up page, it’s pretty easy to stick it on the end of the main nav, no big deal.
I’ve also included some categories where we might see how more thought behind the information architecture needs to be thought through. For example — what if Lexi and Kado (my other 2 dogs) also start to be featured? Do they get their own sections, respectively? Is there just a dog section? Again — this is a simple example, but when you start dealing with blog categories, labeling navigation items, etc. having information architecture knowledge really starts to come in handy.
Tools: Any diagramming software, like Lucidchart or Omnigrafle!
Content Strategy/Content Outline
Content Strategy refers to two areas: both how you write your content, and how you arrange content. For example, one piece of our content strategy might be:
Be friendly, but a bit aloof — like if a cat was talking to you.
The content outline is a document developed for a copywriter. It should have labels to correspond with different areas where you’re expecting text on the wireframe (shown in more detail later). Our content outline might look like this:
- Intro text:
- Email label:
- Password label:
Our Content Strategy might manifest in the Content Outline as:
Intro text: Sign up to receive the latest videos. Or don’t — whatever.
These deliverables are typically done by a Content Strategist or a Copywriter, but the UX Designer will need to be heavily involved and depending on your organization, the UX Designer might be developing these anyway!
Tools: GatherContent, Word, Spreadsheets, etc.
Wireframes & Prototyping
Wireframes and Prototyping are the two areas that a UX Designer will typically spend most of their time. This is where the User Flow comes to life, the Content Strategy starts becoming evident, and most importantly, we can make sure we’re heading in the right direction and move fast.
Some best practices I’ve included in this wireframe include:
- Keeping labels present during typing
- Having instructional text nearby the input elements
- Only wireframing out what we’re interested in looking at — no need to wireframe the header and footer — it could cause distraction for others look at the page.
Other design decisions include:
- Making the signup button disabled until all the proper fields are filled in
- Making the user aware of how the data will be used (Email will be used as a username)
You can check out a live version of the prototype here: http://arfsjb.axshare.com/#g=1
Tools: Axure does both wireframing and prototyping. Adobe XD is coming out which is also supposed to do both. There’s also the dream team of Sketch + InvisionApp
Even though we made a conscious effort to use best practices, it’s always worth it to put your designs in front of a few people and get their feedback. Steve Krug says all you need is 5 people to identify 90% of your problems.
So, this was only one test and we want to keep putting this interface in front of people, but there was one noticeable glitch that happened — the disabled Sign Up button was a point of friction. That doesn’t make it a bad idea all the time — The disabled sign up button might work for other contexts or use cases, but in our case it’s just not going to work. Other testers also mentioned the text felt a little alienating.
So we did some adjusting! If you click ‘Adjust’ in the sidebar of the prototype, you can see how the new wireframe is built.
Tools: UserTesting.com, In person testing, HotJar, there are tons!
This deliverable depends on your organization — if you’re handing off to another developer, this is a hugely important document. Functional specifications outline exactly how any functional elements on a screen should behave. For example, on our form, we want to specify that the Email field is type=”email”, it is required for form submit, and should pass an Email regex.
How these are developed is a conversation you should have with your developers —This is a document that is being built for their convenience and use. Do they want annotations on top of wireframes/prototypes or the visual design? Do they prefer having the annotations separated into a spreadsheet? Etc.
Tools: I like to build on top of creative in Axure, but you can use any annotation software.
Now that we have our wireframes and prototype in a state where we are confident that we are moving in the right direction, it’s finally time to look at the Visual Design!
I selected some colors from a picture of Pixel laying on a blanket and use a color palette generator to help me fine tune them. I selected a popular Google Font — Futura, and built around 3 text styles — Headline, Body, and small text.
While this talk is more about Design in the larger sense of the word, I know many came to learn more about Design Principles. Some quick and easy ways to improve your design skills:
- Use simple fonts and no more than 3 styles
- Use a color palette generator to pick your color palette
- Learn Gestalt principles
- Do the DailyUI challenge
- Visit awwwards.com for design inspiration — even if you don’t know how to build it, don’t let that stop you from designing as if you could!
Tools: Illustrator/Photoshop and Sketch are the top ones.
…Haha, We’re not done yet!
When you’re a UX’er — you know that applying Visual Design doesn’t necessarily mean you’re done. User needs and business needs change and hopefully you’re in a place where you can keep iterating and throwing new ideas out there.
Sometime later after launching, we decided it was time to revisit the Sign Up Form and see what we could to do to increase sign ups. One suggestion was to utilize the best practice of removing form fields that aren’t important to the primary business need. In this case, it would be removing the field that helps us learn about the audience.
We took the two designs side by side and served each to 50% of the traffic, and found that the shorter form did indeed result in more sign-ups. Yay research! Of course, we still want to satisfy the business need of leaning more about our users, but it was decided to send out email surveys periodically to those who were signed up with us.
Tools: Optimizely, VWO, or manually changing things — there are other tools as well — this space is really growing!
Amazingly, I’ve barely scratched the surface of design and a design workflow here. You can talk this farther through studying how design fits into Agile/Scrum, and iterative design, building with modules rather than whole screens, etc. It’s a big fun world. :)
If any of this was interesting to you, there are SO MANY resources out there. Here are some of my favorites:
Design in general
- UX Designer Hangout — Worldwide Slack team of UX professionals
- Big Design Conference — Great conference on Design & Development happening every September in Addison, TX
Are you local to Dallas? I would love to get together and talk more, just contact me!