The personas I worked on for a major financial institution took months of research to create. I wanted to involve the company’s interested stakeholders so that they were involved in the creation process as well. At the very least, I wanted their feedback on what they needed in personas so that I could meet their needs.
When I shared the personas with my colleagues for the first time, I did not want it to be a “Big Reveal.” I wanted to reflect that I had taken the stakeholders’ feedback and suggestions on board. I had researched and built a first draft of the personas. And I wanted my persona presentation to reflect that these were not just “my” personas, but in fact, they belonged to the whole organization.
Some of the Persona Feedback session included:
- Sharing the stakeholder feedback I had gathered
- Explaining what a persona is
- Showing the difference between UX persona and marketing segments
- Illustrating the persona development journey
- Showing the first draft of the personas
- Presenting the components and portions of the personas and describing the purpose of each part
After I explained the process of creating the personas, defining them and sharing them, then I asked the groups to critique them. I wanted feedback on four aspects about the personas:
- What they liked
- What they did not like
- What they needed more information about
- What they needed less information about
After gathering their feedback, my intension is to roll that feedback in to my next round of qualitative research. I want to make sure I am meeting the users’ needs. In this case that is the stakeholders, including designers, design lads and product managers.
View the entire Persona feedback presentation workshop. I would love your feedback on what I talk about in my slides. Do you agree or disagree?
Is your organization doing Service Design?
It seems like it’s one of the hottest new trends in the User/Customer Experience arena. Where I work, not only have we been introduced to the concept, we are being encouraged to carry out the process on our products.
What is a Service Design Blueprint?
Yeah that was my question too when I first heard the term some time back. Does it have to do with architecture? Is it only for the service industry? How does this play in to UX? Yes I had all of these questions and many more.
OK, really, What is Service Design?
According to Wikipedia, Service Design is:
- Involves the activity of planning and organizing people, infrastructure, communication and material components of a service.
- To improve its quality and the interaction between the service provider and its customers.
- May function as a way to inform changes to an existing service or create a new service entirely.
- The purpose is to establish best practices for designing services according to both the needs of customers and the competencies and capabilities of service providers.
- The service will be user-friendly and relevant to the customers, while being sustainable and competitive for the service provider.
Ok, this all sounds good right? So how do I get started? I am lucky enough to have attended the Adaptive Path Service Design seminar which gave me a grand introduction to the value and process. I am going to share a great asset they provided to me so that you can share it with your teams. (PDF is attached at the bottom of the article.)
Now that you have a bit of foundation of what it means, I suggest you start creating Service Blueprints for the various products and services that your organization produces. You would be amazed the opportunities and caps you will discover from a Service Design blueprint exercise. Give it a try!
I know there are many ways to build personas. Sure, you can build them on assumptions and guesses and just throw something together quickly. But actions like that just leave a bad taste I’m my mouth. I want personas to be based on research, not assumptions.
One major project I am working on now is to create personas for vehicle purchasers. Where I work, one of the products we are working on deals with the consumer automobile buying space. One things we don’t have is personas. An even bigger flow of our organization is that we are designing products without having personas to consult for our design validation. I won’t dwell on this aspect too much. Let’s just say our organization is coming to light and recognizing the importance of having personas.
My task is to build kick-ass personas. I am up for the challenge.
One of the first steps I took in building personas is to talk to several stakeholders who would have interest in these personas. I talked to designers, design leads, product managers and researchers to find out one thing:
What information do you need from a persona?
I asked a few other questions as well, but this was my primary goal in this phase of my research. I am sharing the information about “What do stakeholders need from personas” is in the attached deck.
How do you stay on top of things?
Ahhh the golden interview questions that I am sure every UX designer has heard at least once.
- Where do you go for resources?
- What Websites do you visit to learn more?
- What tutorials or other resources do you use to learn a new software or service?
- How do you stay on top of the latest trends?
- What software are you using for (fill in the blank)?
- What is your “best practice” for (fill in the blank)?
Yes, we have all asked these questions, or heard them asked, or wanted to sleep but could not because these questions are bouncing around in our heads.
So I would like to open this post up for discussion. Because I feel like I am wounding about these types of questions all of the time. I want answers. Can you provide some of the answers to the above questions? Or do you have a resource that might answer them? I know I don’t get a lot of traffic on this blog, but if you do swing by and feel like chatting about this topic, I would be forever grateful.
Now: Let’s talk!
Our office recently had the honor of hosting renowned GoogleX prototyper Tom Chi. He came in to our office to work with Product Managers on learning the value of testing fast and testing now! I had a chance to participate in the session as both a user, working through prototypes, and as part of a team building the prototypes for testing.
I have to admit a lot of what Tom covered was not completely new:
- Find the quickest path to the experience
- Test early and test often
- Don’t guess. Learn
- Don’t “fail.” Learn
- Stop talking and start doing
- Get in front of your users and get their feedback
But there were a couple of concepts that really resonated with me and thought they provided value to the session.
Drive conjectures to experiments. Experiments drive decisions.
Conjectures are the same thing as guesses. In other words, people tend to get stuck in “analysis paralysis” and over talking about the situation. In fact, a lot of these discussions are not reality based and is a process of throwing out personals opinions. It might be driven by the best intentions. But these conversations often go on for too long and are never backed up by actual user research. So encourage your group to stop talking and start doing.
The way we did this in the Tom Chi Prototyping session was to stop talking and we each sketched ideas quietly for 3 minutes. They key here is to sketch individually in silence. There should be no talking during the sketching exercise so that each person is exploring individual ideas without the influence from others. After sketching, the ideas are then shared with the group. One or more idea is selected as the “champion.” And this this rough sketch is what should be tested with users. No need to create a higher fidelity version of the sketch. Just show them the rough sketch and get quick feedback before you are too emotionally and technically invested.
Focus on people’s energy
Whenever there is energy, that means something that matters is happening. This energy can be positive or negative. When a customer gets exciting about something, pay attention to that. And the same is true when they show angry excitement as well. It’s these magic “energy” moments that really improve or ruin an experience. So tweak those energy points to make them awesome. One particular example Tom Chi mentioned was Uber. Most of the Uber experience is just like riding in a cab. It’s the few seconds that are different in that experience is what matters.
Don’t lead the witness
Finally, I want to talk about one lesson I learned by going through these sessions. Most of the people participating in our sessions were not researchers. In fact, there were product managers and designers. These are empathetic people who are excited about getting great feedback from users. But they don’t understand that the way they ask questions can skew the response from the participant. It is better to ask broad, open-ended questions rather than helping the participants by giving them examples. It is these tactics that researchers know how to do, but others might not know. They don’t understand that by providing examples for the person to think about, they might be blocking other examples they could possibly come up with on their own. With a little coaching, I know that product managers, designers and other non researchers can learn effective ways to ask non-leading questions.
I thought the most valuable aspect of bringing Tom Chi in house was to empower non-designers. I think he gave everyone confidence that they can explore ideas, sketch the ideas, and get quick feedback from customers. I hope this process takes off and continues well in to the future.
To read more of my notes, read the Tom Chi Prototyping Workshop presentation that I shared with my team.
I recently had the opportunity to practice a research method that is often used to help organize a website’s navigation. Card sorting is a research method used to help structure a site, product or other system. Card sorting helps you to get better insight in to the user’s mental model, as well as how they expect things to be structured and organized. I have written about my experience using card sorting before in another article titled, “UX Deliverables: Card Sort.”
Today I want to discuss using card sorting as another way of understanding how users organize information. Again, card sorting seems to be primarily used to organize navigation. In this study I used card sorting to have customers prioritize and sort education topics based on their interest in that topic. In other words, I had them show which topics they had an interest in, and those they did not.
“Card sorting is a user-centered design method for increasing a system’s findability. The process involves sorting a series of cards, each labeled with a piece of content or functionality, into groups that make sense to users or participants. http://boxesandarrows.com/card-sorting-a-definitive-guide/
A customer is signing up for a new loan account. This is a great opportunity to give them more information about loans and finances. We wanted a better understanding of the types of information a person would want in the onboarding process. And as important, we wanted to know the types of information a new customer did NOT want.
No need to get all fancy and high tech. The great thing about card sorting is you can do it in the dark – well sort of. You don’t need a computer to gain great insights from your participant. Just use some index cards (or regular paper) with words or phrases typed or written on them. Have a flat surface where the participant can lay out the cards. Have a few extra blank cards and a marker just in case the person wants to create new cards. This happens more than you would expect. Do your best not to provide too much information or any definitions because you want to simulate a natural experience. In the context of her home, she would not have anyone explaining the terms to her. So we need this situation to be as realistic as possible.
Present these cards – in no particular order – to the participant and have him/her organize them in to categories that make sense to him/her. In this case, the categories were predetermined for the participant, but then he/she could create more if needed. In fact, in this study, one participant did create his/her own category. While the person is sorting out the cards, encourage him/her to talk through the process and explain his/her rationale. It’s this information that is actually much more valuable that the final results in many ways. To get a better understanding why he/she is putting items in to groups helps you to understand his/her mental model. This will help you to create a better structure and design. If you know why people group things together, you can anticipate future groupings if you need to add more choices later. Also, customers tend to organize things much more differently than the business would. It’s better to see the customer’s point of view so that you can make his/her journey successful.
What I love most about a card sorting is two things that will often surface: the surprises and the trends. Both ends of the spectrum are so wonderful when card sorting. As the administrator of the study, you want to see common themes emerge and bubble up to the surface. This helps you to organize topics cleanly and in a way the customer will enjoy. If multiple people expect things to be grouped in a certain way, that makes your life as an Information Architect easier.
The other side of the coin is items that surprises the research team. This could be especially helpful if you use a term that the participant does not understand. Most likely it’s industry or technical jargon – which should be avoided at all costs! If you do come across terms that confuse the participant in any way, consider changing or modifying it. In fact, you could ask the person what term they would use instead. Again, asking the person for feedback will often enrich your research and aide in creating a better experience.
After the study, share your insights with the team. It’s even better if members of the team are sitting in the research session with you so they can see first-hand what the participant said and did. But if you can’t have those team members who are involved in the product directly observe the card sorting session, sharing a brief, insightful report is the next best thing. The lesson here is to keep the card sorting method in your pocket for potential use in the future. Card sorting does not have to be reserved strictly for determining navigation. It’s a versatile tech-agnostic method that can be used to organize information quickly and easily. Try it out next time you need to organize and structure information.
I cannot emphasize this enough: sketch out your ideas before jumping on to a computer and starting your design. Sketching is good for the body and it’s good for the mind. Not to mention, it’s kinda fun to live like a kid again and practice those rudimentary drawing skills. But you certainly don’t have to be a fantastic illustrator to create a good idea. If you think you can’t draw, don’t let that hold you back. I can’t draw either, as you can clearly see from my photograph at the top of this article.
To be honest, I don’t sketch enough. I have been guilty of jumping straight on to the computer, trying to come up with the best design idea as quickly as possible. But I do see great value in sketching out a few possibilities before exploring ideas on the computer.
Some of the advantages of sketching out your design solutions are:
- Brain dump. Get the ideas out on paper.
- Explore several idea possibilities. And build the ideas off each other. Variety and iteration are great skills in UX.
- Force yourself to not settle for the first things that comes to mind.
- Writing it out helps so that you are not forgetting a key component.
- It gives you a prop to facilitate a discussion.
- Seeing it visually on paper really is drastically different than what is in your head.
- It helps you to communicate to another person by having the visual to discuss. Having the idea just in your brain could be misinterpreted.
- You can refer to dismissed ideas later. You might find new inspiration or that one of your alternative ideas might actually be a better one to develop.
- You can include as much or as little detail as you choose.
- You can do it without electricity. If your laptop has died or the power is out, you can still be working. Your boss will love that!
- Sketching makes it easy to dismiss an idea without be too emotionally or technically invested.
- It helps you focus your idea, from the abstract thought in your head, to the real world scenario on the screen.
So as you can see, sketching has many advantages. I encourage your to sketch your next design solution first, without ever turning on your computer. You would be amaze how many ideas you can create if you devote a bit of time and effort. One of those second or third ideas just might become the winner. Give it a try.
Wireframes are a good step between touch sketches and final design. There are times that sketches on a napkin just aren’t polished or sophisticated enough to communicate the design. And there are times you are just not ready to mock pages up in Photoshop or Sketch because the design still needs some tweaking. That is why wireframes are a great intermediate step between sketch in higher fidelity mockups or diving straight in to code.
There are several benefits or wireframing your designs:
- They are easy to produce. You can be created quickly once you get the hang of it. You are skilled in the software to produce wireframes, and there are many, then and experience UX designer can usually create them with great ease.
- Wireframes allow for design exploration and easy iteration. You can change and update designing without being too invested in the design.
- They allow for focusing on what’s important. Instead of focusing on fonts and colors, the user can function on the layout and placement of items on the page.
- Gives an idea of the design without being fully invested. This makes adjustments and changes low cost and without be too committed to the code or design.
- Clients understand the designs are not fully baked. They see that the designs are rough. There’s no color or images. There might even be squiggly lines or other clues that it is in a rough state. But being in this preliminary state the user or stakeholder is more comfortable making suggestions or providing feedback for changes.
- Wireframes help developers understand relationships. Without requiring the developers to create things in code, a wireframe can help them easily understand the page, the design, and how things relate to each other. In that way, wireframes are a great communication tool.
I understand there are cons for wireframes. And not everyone is onboard with the concept of wireframes. But I wanted to highlight some of the benefits of working wireframes in to your work flow.
Cards sorts can make many forms. They can be low tech with index cards or Post-it notes. Or they can be a higher fidelity done on a website or with other card sorting software on the computer.
If you have access to users in person, you can use a physical card sort. With this, you can use index cards or Post-it notes to have the user organize the items written on the card in to more general categories. If you do not have the opportunity to to meet the user in person, it’s ok to use a remote card sorting service or software (second image above) to do a card sort.
The major things that a card sort is used to accomplish is:
- It is cheap and easy to do. Yes it takes a bit of time to create one card for each topic and make sure that all assets are covered. But once that is done, all you need to do is hand the cards to the user and have them organize them. Take a picture of the results with your phone or a digital camera and save for analysis.
- It is user centric. It truly is from the viewpoint of the user since the user is the one organizing the cards in the best way they see fit.
- It can be done in person or remotely. As shown in the images above, card sorting can be performed in a variety of ways.
- It is a valuable and reputable source for gathering information. Car sorting and taxonomy have been used in a variety of ways for years. And if done correctly, it really works!
- It can also help create labels and navigation titles. If you leave the card sorting open (without providing categories for the user to organize the cards) you can have the user not only group like items, but give them intuitive titles as well.
- It provides insight in to the user’s thoughts. If you are able to talk with the user as they organize the cards, you get great insight as to WHY they are organizing the cards in certain ways. This helps you get sone context as the why and how the user is grouping like items.
Don’t be afraid to perform your own cart sorting exercise to help organization for your website or app. Feel free to leave comments and share your experience with your own card sort.
I am revisiting the goals I set for myself in early 2016. I need to see if I have accomplish any or many of what I set out to do and if I need to reassess my goals based on my new career path. My notes are included in purple after the original list item.
- Axure Re-learned in Spring but need to practice skills to keep them fresh
- Sketch No I have not learned this other than watching online tutorials. Not pertinent to my current job, but still would be good to learn.
Improve coding skills
- Refresh my knowledge about CSS and HTML No I have not refreshed my knowledge on this. Not pertinent to my current job, but still would be good to learn.
- “Information Architecture” aka the Polar Bear book Yes! Accomplished
- “Design of Everyday Things” No, still want to.
- “Checklist Manifesto” No, still want to.
- “How to Get People to do Stuff” In the process of reading
- I am adding these two books to my list, which I am in the process of reading and are more related to my new job: “Observing the User Experience” and “Research Methods.”
- Also adding “UX Strategy” since I got it as a going-away gift. Thank you Kristin Kazamaki for the very thoughtful gift.
- Start another “100 Days of Learning” journal, but expand it for the entire year. I have partially done one. It’s not as developed as last year. I would prefer to review last years, and this year’s and focus on writing notes as I see some important content.
- Review the “Learning Stuff” journal from last year I still need to do this.
Write blog posts
- I am shooting to post 30 blog posts in 2016 Well I have 23 right now so I am in a good place to meet that goal.
Join a side project
- I would love to join another project. If you know of any short term projects that need a UX designer, please let me know. I am success at this as I was a UX consultant for Wingspan Arts in NYC. It still needs to go through the redesign, but I helped them organize content and surveyed users and stakeholders to build a better redesign plan.
Build out portfolio
- Improve the content of my portfolio by introducing new clips Did this and also acquired a Dribble account to also showcase my designs.
- Present my acquired knowledge illustrating my software proficiency I have an opportunity to teach an online course in the pipeline, and if it works out, this would help me to meet this goal. Fingers crossed!
My portfolio can only hold so many work samples. I like to edit my work down to a small representative sample so that hiring managers and other UX designers can get a quick taste of some of my UX design capabilities. But there’s so much more to my UX design skills than I can showcase on my website. That is why I love alternative websites like dribbble.com and behance.net so I can show some of my latest works in progress and finished projects.
Dribbble is a great platform for inspiration and sharing your latest work. So I was honored to get an invitation to join the exclusive group. Who knows the true value of sites like Dribbble and Behance? But these sites seem to be an important part of a UX designer’s web presence. So I guess I’d better get in the game as well.
Please take a look at my clips and let me know your thoughts. I always love feedback.
What is a persona anyways?
Different people, be it a User Experience Designer or someone in the Marketing department of your company may have a persona. So what does a “persona” mean in the UX world? Wikipedia defines a person as: a fictional character created to represent the different user types that might use a site, brand, or product in a similar way. In other words, a user persona is a representation of the goals and behavior of a hypothesized group of users. In most cases, personas are synthesized from data collected from interviews with users.
How do you make a persona?
No you don’t just make it up. Pick a fictitious name, throw some random facts on a page and say “This is our personal Sally Student.” No, no, no. You use actual user research to develop a persona. As mentioned before, a person is created from combined data based on interviews and other research methods. The most important factors in a persona are generally not demographic information like age, political interests, or what type of car a person drives. Though some of these types of factors can be used to give the persona some human characteristics and personality. They key is to use information that is important to portraying the persona. They type of driving habits a person has, would not be important for a persona representing a user of medical software. But that information would be important for an app that tracks a person’s mileage and gas consumption when they drive.
Generally personas consist of:
- The user’s name
- Age or level of expertise
- Title or some occupational reference
- And perhaps a quote that summarizes the user’s goal, feeling or general outlook about the product or process
There are many advantages of using personas. Some of these include:
- They simply provide a “face” for the user story.
- Provide an emotional link to the person so you can build empathy with that user.
- Promotes surfacing a real goal, pain points and motivations rather than just making them up as the discussion evolves.
- When you need to play out a use case, the persona is a true character to use as reference, along with all of her data and behaviors.
- Keeps the “facts” of the user more concrete. If it’s recorded on paper, traits of the user are less likely to morph and change.
- Gives the team a focal point of on person to discuss rather than a theory about a group of users. You can specifically reference how “Sally the Student” would use the product so you make sure you are meeting her goals.
- To focus the design on a “real” user rather than what we “think” is the best solution.
Now that you have a better understanding of personas, I hope that you will use them on your next project. If you are using personas now, please share your process of how you develop them and how you use them with the team.
One of the first steps I take in the discovery process of a new project is to get a better feel for what the competition is doing. Why would we care what the compassion is already doing for the same feature or app? Oh there are so many good reasons.
Why do a competitive analysis?
- So you know how the major competition in your software, product or digital space is handling a similar feature
- Understand where your product stands in reference to its competition
- Idea generation on how to solve various usability issues
- Get an idea of what you can do to gain a competitive edge or make your product better
- No need to reinvent the wheel. Understand what already exists you you don’t have to start anew.
- To know what the trends are in your industry and on the web
- Identify best practices or patterns. Then you can make improvements on what exists.
- Seeing what already exists can spark new, and even better ideas.
They key benefit of performing a competitve analysis is to identify strengths and areas for improvement. You have to see what already exists out there before you can do this for your own product.
This was an old project that I have put on a virtual shelf for a few months. I think It’s time to revisit it and think about doing some user research to assess if there is a need for an app of this nature.
The Temecula Winery App came to me one time when I was wine tasting in the region. I wanted to know which wineries in the area had some of my favorite wines: merlot, viognier, maybe some zinfandel. Now, as a dog owner, I am interested in what wineries are pet friendly. Specifically, I would like to know which wineries allow dogs inside the tasting room, vs. which ones prefer that they stay outside.
When you are cruising through wine country, is not the time when you want to try to search several (often not updated) winery websites, looking for what wines they have for sale. And most of them (if any do) do not mention if they allow dogs.
So I thought this app might be helpful to people visiting the area. But even if I think it would be a good idea, I need to validate my idea with others. I need to do some user research and to see if others think their is a need for the winery app. This is an important step that too many startups, and founders to not take the time to do. They think their idea is in high demand because it’s their idea. Or they ask their friends and family, who ever so politely indulge them and say, “Yes that is a great idea.”
My goal is the next time I go to Temecula, I am going to talk to some other wine tasters and assess if there is even a need for an app like mine. I am sure after visiting a winery or two, approaching strangers and asking questions about this topic will only become easier. ha!
As professional in the User Experience field, we’ve all heard it time and time again:
- Test early and test often.
- The only way to find out if it really works is to test it.
- We do not see things as they are; we see things as we are.
- The sooner you start to code, the longer the program will take.
- Just because nobody complains doesn’t mean all parachutes are perfect
- Don’t guess. Test.
To get early feedback is easier said than done. I know that it takes time to create the visual mocks. Then things are moving so quickly (2 week sprints!) and it feels like we don’t have time to run our ideas by users. Finally, we feel like we know what it best for the product. We have done some user research. Our ideas have evolved as the project has progressed. We have made some decisions, that we think are for the better.
The earlier you test your site designs, the sooner you can find any problems and fix them.
But it’s this type of thought process that you need to take pause and stop in your tracks. Just when you think you are doing the right thing, that is the moment that your assumptions and biases are likely to creep in. So, this is a great point to take a break and get user feedback before you proceed down the rabbit hole any further.
To start with, we sent the wireframes to the visual designer to mock up our concept with more visual reality. We made sure that the flow we wanted to show the users was visually represented enough through our mocks.
Once the mocks were in a state we felt we could share with the user, we needed to figure out what type of information we wanted to gain from our usability review. Next, I came up with a brief list of topics and content we wanted to focus on.
I wanted to first focus on the overall presentation and design, as well as have them look at the navigation and taxonomy that we were presenting. Then after getting their feedback on the overall design, I wanted to take them through a specific work flow, and see if it made sense to the user.
I think that a common error in usability testing is giving the person too much information as soon as they see your prototype. Don’t jump the gun!! Take this opportunity to get initial reaction feedback. Let the person participating in the usability review take a moment to take in the design, layout and wording. Let them get acquainted with the page and get that “first few seconds” feedback. Please don’t miss the opportunity.
Then after taking a few minutes to talk to the user about the overall design, you can then take a deeper dive in to a work flow. I found that in this instance, the first half of the conversation focused on the website’s design, terminology and assessing if the user understood how to get started on some general tasks. In other words, I wanted to see if the navigation choices made sense. Also, I wanted to see if they had any cognitive dissonance with any of the terms we had used. Next, we asked the users how they would perform a specific task. In this case, it was how they would start to place an order. Along their usability journey, they brought up a lot of good questions and educated us on how they do this process now. It was all very insightful, and helpful to find out what we had done right, and what we needed to improve. That, my dear friends, is the whole goal of performing this usability review.
Want to watch the entire usability review live in the flesh? Please feel free to watch the video. If you have specific feedback on my approach or any aspect of my session, please share your thoughts in the comments. Just like designing a website or software, my research methods are always in a state of improvement and iteration. Please help me make my product, in this case ME, even better.
Along with the requirements needed for the Virtual travel sheet (VTS) , also wrote out the steps a user will go through when working the VTS.
As posted before, we are creating a feature that will help doctors quickly build their medical plan and add items to the order. This feature, called a virtual travel sheet, will greatly increase the doctor’s satisfaction by making data entry easier, fast and perhaps quite pleasant with minimal typing. Doctors are familiar with the concept of a travel sheet. Many of them still use them in their practice still. So integrating a familiar paradigm in to the softwares used in the hospital should be greeted with delight.
Below is the user’s journey of working with the Virtual Travel Sheet for an Outpatient. What is an outpatient? That is a more “typical” type of visit to the doctor. This type of visit does not require the patient to be checked in to the hospital or to stay over night.
User Journey (Outpatient, Plan building)
- A pet is checked in to the hospital
- A VTS (virtual travel sheet) is automatically created for today’s visit when the pet is checked in
- Today’s medical plan is designated on the VTS by the background color and tab at the top being blue.
- Filters have been applied to the pet.
- The exam has already been added to the VTS. This is shown by the item highlighted on the VTS and it is listed on today’s medical plan. This is based on the type of appointment that was booked.
- The Outpatient VTS is selected (from the pulldown)
- The Dr. will examine the pet and determine what procedures, medications, labs, vaccines or other items should be included in the medical plan.
- To open the VTS, the user will select a tab (probably located on the right of the screen) that slides from right to left and covers the current screen with the VTS.
- The user adds items to the medical plan by clicking the item he sees on the VTS one at a time. This selection is instantly highlighted in yellow and is added to the right column under the Medical plan.
- If a user does not see a lab that he would like to add to his medical plan from the list provided under Labs In House, the user can select the MORE option.
The popup after hitting MORE on a category will:
- Give the user the ability to search within this category on the popup
- The items from previous VTS screen will be listed within the MORE list in alphabetical order
- The ability to select multiple items before closing this window
- The items selected will be visible on the TVS as highlighted selections
- While in the MORE popup screen, the user finds the lab he would like to add to the medical plan on the VTS and selects it. This lab is highlighted, which indicates that it has been selected. When all items are selected, the user then hits the DONE button to add the lab to his VTS
- The user can use alternative travels sheets, like medications, to add items that are not on the originally displayed VTS. The user selects to the Medication VTS from the pulldown and adds the medication he would like to include with his medical plan.
- Additional notes can be added to each item in the medical plan. To do this, just double click on the line item and a text field is revealed. Once a note is typed, just navigate away, and it is saved. An orange “N” will indicate that an item has a note.
- If the user would like to delete an item from the Medical plan, he can hover over the line item and a red “X” will appear to delete the item. The user can also delete the line item by right clicking and selecting the “Delete” option.
- When all items have been added to the Medical plan, the user can select the “Present estimate” from the pulldown.
- When the user chooses to present an estimate to a client from the medical plan, another window will slide from the Medical plan column, from the right to the left, covering the VTS selection area. This interactive screen allows the user to:
- Show the plan items in a larger font so the customer can review on screen
- By checking the “Show Financial” box, it will show the monetary values of each product and summarize the charges
- The doctor can add additional notes to this estimate
- Instantly get customer approval by checking the box, which will be time stamped
- Print estimate for the customer to review and sign if needed
- Save this estimate
- Update the medical plan if items have been declined by the client
- Move items from the medical plan to recommendations if the customer declines an item
- When the user prints this estimate, it automatically saves the estimate. The plan is also updated if any items have been removed, and therefore sent to the Recommendations section.
- When an item is declined, it is moved to the recommendation section. On the VTS, the highlight color also changes from yellow to green.
Optional: the user can designate order items to be linked to concerns. This would be done by right clicking on the line item, and selecting the concern from the pull down list.
Optional: the user can create additional estimates for today’s plan or a future visit.
Simply put, I love ethnographic research. I mean it when I say that this form of user research is probably the most valuable way to gain insight on your users and your product. And, unfortunately, it is far too often overlooked as time consuming or simply viewed as a waste of time. I could not disagree more!
First let’s define the term. According to Wikipedia, ethnography is:
The systematic study of people and cultures. It is designed to explore cultural phenomena where the researcher observes society from the point of view of the subject of the study.
So how does this apply to UX and research? By observing your users in their natural habitat, you get exceedingly more information and context about their real world.
The benefits of ethnographic research for me include:
- You see users use your product in a natural way, not in a fabricated lab setting
- It provides context to their environment
- You see things that you would never discover with a phone call or what the suer just tells you
- You discover that what users say they do, and what they really do can often differ greatly
- You see first hand the pain points that users are not aware that they have
- You can observe true behaviors
- You notice the environmental factors, like interruptions from c0-workers, slowness of equipment, and other physical attributes that affect the user
- You have the opportunity to ask questions, on the spot, as circumstances arise
- You can record aspects of the environment by taking photographs and video that could not be done remotely
- You can establish a better rapport with your users
- You can observe the entire context of the working environment, across rooms, buildings, people and other circumstances
- It provides impromptu “bitch sessions” that the user would probably not normally share
- It allows the user to feel like he/she is being heard
- It allows you to be an “eye” for the other team members who are not able to view the user’s world
- It gives the UX designer the best opportunity to really empathize with the user, by seeing how their work or life really is
Hopefully my reasons have given you enough understanding and reasoning to do your own ethnographic research. If you have your stories to share about ethnographic research, please do so in the comments.
I am working on a project that enhancing the EMR (electronic medical records) where I work. We are creating a feature that will help doctors quickly build their medical plan and add items to the order (or list of items to charge the client). This feature, called a virtual travel sheet, will greatly increase the doctor’s satisfaction by making data entry easier, faster and will hopefully create a pleasant data entry experience with minimal typing. Doctors are familiar with the concept of a travel sheet. Many of them still use them in their hospitals to this day. Integrating a familiar paradigm in to the computer software used in the hospital should be greeted with delight.
What does a travel sheet look like? See the image below:
I am writing the requirements and basic understanding of what the Virtual Travel Sheet (VTS) will do so that developers, QA, project managers and any other team players will understand the scope and expectations of the project. This is just a first draft.
The virtual travel sheet (VTS) will allow users to:
- Easily enter items in to the plan without having to type in free text (so easy that it is preferable)
- Easily enter items in to the plan without knowing any codes
- Transfer/translate the items in my plan to an order
- Transfer/translate the items in my plan to an estimate
- See my plan built in real time
- Create estimates (treatment plans) for items or services for the future
- Include exams, vaccines, medications, injections, medical services, lab, imaging, etc.
- Present items based on type of visit (outpatient, inpatient (hospitalized), boarding/grooming and retail products)
- Filter out codes that don’t apply to the patient by species, age, weight, sex, altered status)
- Present active, commonly used items (per hospital) as used per species
- Allow for search
- Ability to link to concerns
- Display recent estimates for this patient
Typical users would be
- Doctors writing their medical note
- Technicians entering in items for the doctor in to his/her medical plan
- Technicians entering in charges to the order
- Small tab to the right of the screen where user can “side open from left to right” the VTS.
- This allows the user’s work not to be interrupted.
- They can slide this open, and add items to today’s Medical plan or create an estimate.
- All actions will be saved automatically.
- The user can then just “slide” the window closed again and continue working on the lower/bottom/previous screen they were on before the opened the VTS.
Available travel sheets
- Boarding & Grooming
- Retail products
Filters applied to the VTS (can be turned off on the patient by the user)
- Altered (y/n)
- CareClub enrollment
The travel sheet will provide the user a condensed listing of codes based on
- Filters that have automatically been applied
- Available codes/catalog items for that hospital
- Most commonly used codes by VCA
- Most commonly used codes by that hospital
- User favorites (second iteration)
- Templates applied to plan
As part of my 2016 professional development, I’ve decided I am going to use my blog to showcase more of my UX skills. A tough decision any designer must make is to only show a select examples of my best UX work. I try to show my diversity of skills, as well as my breadth of design. So since I cannot show all of my clips in my portfolio, I am going to use my blog as my second clips stage.
Feel free to search the word “Showcase” for future examples of my UX work. But until then, examples of my work can still be viewed on my website www.jenniferblatzdesign.com.
User Testing recently published a handy guide on prototyping called “Getting out of the office: Testing mobile app prototypes with user”.
Here are a few pointers of what you should know after prototyping your project.
When you’re finished testing at this stage, you should be able to answer these questions to validate your concept before moving forward to a higher fidelity prototype:
- What problem does your idea solve?
- How are users solving this problem currently?
- Can your target market think of another product that does something similar?
- How have previous solutions failed?
- Do users understand what this product or service does?
- How do users feel about the product or service?
- Who is your competition?
- What is the app for? What can users do with it?
- Does your target market actually have a need for this product?
- What devices do users imagine themselves using when they interact with this product?
- What scenarios can they picture themselves using it in?
- Dropdown list vs. listbox
- Buttons vs. radio buttons
Sometimes you just forget what each UI term really is called. And it’s good to have the terminology correct, especially when you are talking with stakeholders.
Usability.gov is a great resource when you want to quickly remember the names of those pesky UI elements.
User Interface Elements
When designing your interface, try to be consistent and predictable in your choice of interface elements. Whether they are aware of it or not, users have become familiar with elements acting in a certain way, so choosing to adopt those elements when appropriate will help with task completion, efficiency, and satisfaction.
Interface elements include but are not limited to:
- Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field
- Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
- Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
- Containers: accordion
Checkboxes allow the user to select one or more options from a set. It is usually best to present checkboxes in a vertical list. More than one column is acceptable as well if the list is long enough that it might require scrolling or if comparison of terms might be necessary.
Radio buttons are used to allow users to select one item at a time.
Dropdown lists allow users to select one item at a time, similarly to radio buttons, but are more compact allowing you to save space. Consider adding text to the field, such as ‘Select one’ to help the user recognize the necessary action.
List boxes, like checkboxes, allow users to select a multiple items at a time,but are more compact and can support a longer list of options if needed.
A button indicates an action upon touch and is typically labeled using text, an icon, or both.
The dropdown button consists of a button that when clicked displays a drop-down list of mutually exclusive items.
A toggle button allows the user to change a setting between two states. They are most effective when the on/off states are visually distinct.
Text fields allow users to enter text. It can allow either a single line or multiple lines of text.
|Date and time pickers
A date picker allows users to select a date and/or time. By using the picker, the information is consistently formatted and input into the system.
A search box allows users to enter a keyword or phrase (query) and submit it to search the index with the intention of getting back the most relevant results. Typically search fields are single-line text boxes and are often accompanied by a search button.
Breadcrumbs allow users to identify their current location within the system by providing a clickable trail of proceeding pages to navigate by.
Pagination divides content up between pages, and allows users to skip between pages or go in order through the content.
Tags allow users to find content in the same category. Some tagging systems also allow users to apply their own tags to content by entering them into the system.
A slider, also known as a track bar, allows users to set or adjust a value. When the user changes the value, it does not change the format of the interface or other info on the screen.
An icon is a simplified image serving as an intuitive symbol that is used to help users to navigate the system. Typically, icons are hyperlinked.
Image carousels allow users to browse through a set of items and make a selection of one if they so choose. Typically, the images are hyperlinked.
A notification is an update message that announces something new for the user to see. Notifications are typically used to indicate items such as, the successful completion of a task, or an error or warning message.
A progress bar indicates where a user is as they advance through a series of steps in a process. Typically, progress bars are not clickable.
A tooltip allows a user to see hints when they hover over an item indicating the name or purpose of the item.
A message box is a small window that provides information to users and requires them to take an action before they can move forward.
|Modal Window (pop-up)
A modal window requires users to interact with it in some way before they can return to the system.
An accordion is a vertically stacked list of items that utilizes show/ hide functionality. When a label is clicked, it expands the section showing the content within. There can have one or more items showing at a time and may have default states that reveal one or more sections without the user clicking
When conducting user research, there are a variety of methods to acquire valuable data. This chart, courtesy of the Nielson Norman Group, illustrates the ranges that your research can measure.
Let’s break this down to the extreme ranges of this chart.
Ethnographic research is a fine example of behavioral research. This is where the researcher goes in to the user’s natural environment and observes the user in the user’s normal and regular context.
Surveys and Interviews are some ways to see what the user says they would or would not do something. Often users will give answers they think the research wants to hear or what they think is the “correct” answer. The key here is that the user might actually believe what they are saying is true. But in fact, when the researcher actually observes the behavior, what the user has said might not be accurate.
One-on-one interviews and ethnographic research are a couple of great ways to get qualitative research information. The researcher can devote individual time to the user, and really get deep information about them. This takes time, and therefore can be difficult to accomplish in mass quantities. But submersing yourself in the users world will provide much more in-depth information than more quantitative research methods.
Surveys accomplish quantitative research very well. Especially with the plethora of online survey tools (many of them are free), one can easily send out a survey to hundreds, if not thousands of participants and gather a large amount of data. This data can then be accumulated to show trends, make charts and post results of several people. However, this research method does not provide individual insight and appreciation that a more qualitative research will provide.
All in all, there are many research methods that a UX researcher has at his or her disposal. They key is to know which research method is best for the type of information he or she is seeking. Also, many of research methods fall within the middle ranges of this chart, and not at the extremes. I encourage you to use a variety of research methods in your next UX project.
For all P.C. (politically correct) purposes, I am not promoting skinning a cat. I work for a veterinary company, I am certainly not going to condone harming animals in any way.
But the headline did get your attention. ha ha
For the feature I am currently designing, pictured above, I used a variety of research methods to gather user feedback.
- Interview users about how they use the smartphone app.
- Observe users on how they operate the smarphone app.
- Mock up an interface, and ask users questions about the design.
- Create a clickable prototype to see if users understand how to operate the feature.
- Observe QA to see technical of UI issues that arise in testing environment.
- Be prepared to iterate once the feature has been released to make improvements.
User feedback is key. Don’t design in a bubble and assume you understand your user’s mental model. After talking to several users, and observing their behavior, I learned a lot of the assumptions I had were wrong. So talking to users early helped me to build a better product early, before it got too far in to the code. I encourage you to always run your design ideas by at least one person, very early in the process.
The original source for this file can be found at Smashing Magazine.
After nearly a year on the project, Community Coalition has launched the new design for their website. I am happy that I had the opportunity to participate in this process. Despite the longer than expected timeline to complete the project, I gained valuable experience and learned a lot of things on my journey as the team’s UX and graphic designer.
- People come from different backgrounds and have different experience to bring to the table. Take advantage of this diversity.
- When working with people, things can take longer than expected. But…
- Be patient and enjoy the ride.
- The organization knows their users best, or at least assume that they do, so trust what they tell you.
- Be empathetic, even if you don’t think you can completely relate to the user.
- Working together helps the overall understanding.
UX deliverables created
- Interviewing stakeholders
- Competitive analysis
- High fidelity mockups
- Process and user flows
- Content inventory, analysis and strategy
- Information architecture and taxonomy
- You get out of it what you put in. If you put in more, you can get very valuable assets.
- Be willing to learn from others. You learn more by keeping your ears open and mouth shut.
- Keep technology in mind. Not all users are on a high speed device with quick internet access.
- Do you best to get the organization to clean up items that are not being used on the site. Analytics is a great tool to validate this cause.
- Try to tell the organization’s story. The more you learn about them, the easier this is to do.
- Have fun and enjoy giving back to the community.
When a UI designer is assigned a new feature to build, it is crucial that you understand this process from the user’s point of view. You might think, “Oh I know all the steps the user will go through. I have it all in my head.”
Well I am here to tell you probably don’t have all of the steps the user might go through in your head. This is the advantage of creating a Journey Map. Call it what you will:
- Journey map
- User flow
- Flow chart
- Task flow
- Customer journey map
- Experience map
To me all of these terms are very similar. Yes I know I am bastardizing these terms by clumping them all together as one item. I understand there are difference in these terms and when they should be used. However, the point I want to make is just think about how the user will go through the process and make some sort of illustration to show these steps. You don’t have to use some fancy software like InDesign or Omnigraffle. Go completely low fidelity and just sketch it out on pencil and paper.
There are benefits of sketching the user flow on to paper and get it out of your head:
- You think you have thought of all of the options. Well you have not.
- You will discover unknown unknowns.
- You might leave out a step when it’s left in your head. Drawing each step really fleshes out the process.
- There will be additional avenues you have not considered that only sketching will bring to the surface.
- It forces you to visually consider the options and how many additional steps those option might provide.
- It illustrates how complicated a user flow can get. It’s often more detailed than we thought.
- As with all sketches, it provides a great communication tool that you can then show to your team to continue the discussion.
So before you start designing any software, or mocking up any of your fancy ideas in Photoshop of Sketch, take a few moments do perform this crucial step of creating a Journey map / User flow / Flow chart / Task flow / Customer journey map / Experience map. It’s a great idea to get any thought floating around in your head on to paper.
Card sorting can be used for much more than just organizing a website’s navigation. In fact, that is why information architecture is such a broad term. And one tool for helping people organizing and creating a structure is a card sort.
So what exactly is card sorting? According to the Wikipedia entry for card sorting: “Card sorting is a simple technique in user experience design where a group of subject experts or “users,” however inexperienced with design, are guided to generate a category tree or folksonomy. It is a useful approach for designing information architecture, workflows, menu structure, or web site navigation paths.”
Now that we know what it means, how do we use it? Or in other words, why do we use it? In my case, I wanted to test a few of the doctors who use my company’s enterprise software. We have a portion of the software that is Electronic Medical Records, aka EMR. I wanted to see how different participants thought the information should be structured in the patient’s EMR.
- Should each entry be strictly entered chronologically?
- And if that is the case, is the oldest entry first or newest entry first?
- Should the most important information be surfaced to the top somehow?
- Is there a way to create bundles of information or sub groups?
- What does the user think the best way this information should be organized?
All of these questions could prompt hours and hours of discussion and speculation. So instead of endlessly talking about it, let’s get direct feedback from the users.
I know that many UX Designers use post-it notes on a wall to organize thoughts and create a taxonomy. However, what do you do if you don’t have a wall? And what if you do if your tester is not located in the same room as you? In other words, you need to perform the card sorting remotely.
I looked high and low for online and electronic resources to perform a card sort. I found that most of the online options were either too expensive or simply did not offer the functionality I was looking for. In the end, I settled on the free Mac program called XSort. This great little program (though visually very outdated) had the basic features I needed to perform a card sort. It allowed me to have more than 10 cards, it had the ability for the user to create subgroups within groups, and the cards would not automatically “snap” in to place like some services would. The users could place the cards wherever they wanted to on the screen.
So far, we have performed a few pilot tests with a handful of doctors to work out some bugs. The main lesson we are learning is that what the user is saying as he/she is going through the card sort is actually more valuable than the actual results. So instead of “throwing the test over the wall,” or in the online word, just sending out a card sort link and viewing the results, it is actually better to have the user talk you through their thought process. What is also valuable is that being able to moderate the card sort, and to answer technical or clarifying questions probably produces more accurate results. If a user is confused about a term or abbreviation, he or she might categorize that differently, and thus throwing off the card sort, than if the tester clearly understands the term. Finally one more valuable gem that I realized while performing cards sorts: Keep your mouth shut! Let the tester talk you through the awkward silences. If you must speak, ask probing and clarifying questions. But do your best to try not to suggest ANY way that a tester could group items. They tester will struggle at first. But that is OK. Just let them absorb all the cards and try to make sense out of them the best way that they can. You will get great user feedback if you actually let the user provide you that unbiased feedback.
The bottom line lesson here: Yes kids, card sorting can be used for more than just organizing navigation of a website. Try it out!
Travel sheets are a traditional medical document used by doctors as a sort of a check list of conditions. It’s a quick way to mark items that a patient may or may not have.
What do I know about medical exam travel sheets? Absolutely nothing! But that is a great start for any UX Designer. You don’t have to be an expert on your subject so start researching. In fact, the less you know can work to your advantage. Approaching a topic from a completely new and innocent perspective allows you to empathize how someone else who is new to the subject will be introduced. You have fresh eyes, less bias and a lack of knowledge to jump ahead of yourself.
So if you don’t know a lot about a topic then get started on learning. Use the web to research what others have said on the same topic. I don’t have to tell you the wealth of resources there are online. Also, talk to your stakeholders and clients to learn from they. they know their subject, and they should not be afraid to share this valuable information with you.
Wireframes are not for everyone. I understand there might not be time to create wireframes. Some people don’t see the value of this middle step. “Just sketch out some ideas. Once you like something just code it up.” Others may not have it in the budget to create some deliverables.
I have to admit, I am guilty of not always creating wireframes. To me, they can be a luxury. There are times I don’t really have the time or the patience to go beyond sketches (if I have even created those) to going to the middle step of creating wireframes.
I strongly suggest that if you do have the time, and the budget, that you should make the effort to create some static wireframes. Here are a few advantages of creating wireframes:
- Get the concepts out of your head and on to a page/layout
- Visualize how your designs might work
- Get early feedback on your designs before it goes in to code
- Allow for quick changes before too committed to design
- Facilitate discussion across the team and with stakeholders
- Provides clarity for communication
- For developers to understand the functionality of the site
- To show the information architecture and navigation structure of websites
- Cost-effective level of fidelity for quick changes
There are many people trying to figure out how to make the jump in to the UX field. I too, not too long ago, was trying to transition (or to use the buzz word “pivot”) in to the field of UX. Thankfully, I made the transition and I am now a UI Designer. However, it took a lot of hard work, networking, self discipline, education and pushing myself to learn more about UX every day.
One way I went about getting experience about UX was to learn as much as I could about the deliverables in the UX field. I would hear a term like “personas” or “wireframes” and decide that I was not only going to learn as much as I could about these topics, but I was also going to put it in to practice.
Here’s an example. Say you are a web designer for a flower shop. Sure, you could just design the website per the shop owner’s request. But why not take it a step further? Why not do a bit of discovery and research before starting the design project? You could interview the owners and customers to find out what the business goals and customer goals are. You could do a bit of ethnographic research by observing people shopping for flowers or employees performing a transaction. Sketch our a few concepts before diving in to the code.
If you are trying to get experience in UX, and want to build up your portfolio, use some or many of these methods to show that you are so much more than a visual designer or developer. Show off your analytical skills and how they are applicable to a career in UX.
Here is a brief list of UX deliverables to get you started:
- User Stories
- Competitive Audit
- Stakeholders Interviews
- Brainstorming Sessions
- Annotated Wireframes
- Information Architecture (Taxonomy)
- Task Analysis
- Ethnographic Observation
- Heuristic Evaluation
- Examine Business Goals
- Examine Customer Goals
- Content Audit
- Sitemap Creation
- User Flow
- Usability Testing
- A/B Testing
- Card Sorting
- Pattern Libraries
- Site Map and Architecture
- Whiteboard and Sticky Notes
- Functional Specifications
- Interactive Mockups
- Style Guide
- Market Research
- SWOT Analysis
- Use Case Scenario
- Creative Brief
- Diary Study
- Navigation Model
- Web Analytics
- Persona Empathy Map
- Affinity Diagrams
- Ideation Workshop
- Task Model
- Cognitive Walk Through
Now take all of these deliverables and practice creating them. Then, use the most important UX skill of all: Tell us Your Story.
One way to really understand how your users work on your product is to view them in their natural environment. That puts their working circumstances and environment in perspective. By observing people, you see things they would not normally tell you. Maybe because it’s so routine they don’t realize they are performing such actions. Maybe because they do not think it is relevant. If you just observe a person in their work situation, then you can decide what actions they take are related to the software or product you are working on.
Here are some questions to keep in when when you are performing an ethnographic research study:
- Is the work place quiet and calm?
- Do the users get interrupted a lot?
- What other tasks do they do while working on your software or product?
- How is the work station set up? Is it on a desk? A counter? Shared by several users?
- What real world objects do they use instead of using the computer? (like post-it notes and pens)
You can learn a lot by acting as a “fly on the wall” and getting a feel for how the workplace is run and how the software interacts in that work flow.
Value of Ethnographic Research
I cannot express enough how important it is to get out of the office and get in to the user’s real world. In the photo above, had I not visited this doctor in her office, I doubt she would have told me about her paper files organization. It’s just as useful to understand a person’s physical environment as it is to understand their electronic or software environment. That way, you can figure out how you can make the two world meet seamlessly.
Plus, you get to see things like these cutie pies.
I think it is always good to try out different ideas when working on a project. I know that time does not always allow for exploration of several options. But I often find that by playing with a few different ideas, a good concept emerges that you did not expect.
If you are tied too strongly to one design, this expansion of ideas in to something better might not happen. So I encourage you to take some time to always try out different design ideas and layouts and see where the journey takes you. It is often surprising that the first idea you come up with, and the one that you thought was “perfect,” might not actually be the best. Play around with design a bit. That’s what makes it fun!
Here are some examples of me trying out different ideas of a page on a mobile website. Though they have the same content, the execution of the design varies quite a bit. Which design do you think is the most effective? How would you improve them? I am always happy to receive constructive and helpful feedback.
Sketching can help take you to the next step in your discovery phase. So you’ve done a bit of research on design ideas. Some you like, some you do no like.
I find that the best best place for me to start on a new project is to see what’s already out there in the world. I like to do a bit of research, and see what items exist that are similar in design and purpose. It helps me to think about possibilities, what I like and what I don’t like.
I am currently in the process of designing a Dashboard that will be used in several veterinary hospitals. Having never designed a dashboard before, I thought I would scour the internet to see what visual examples I could use as inspiration on helping me get started.
After viewing various dashboard examples, I figure out what traits apply to my design concept, and what do not. Even though I might not have a pie chart in my concept does not mean I would discard a design completely. It’s often useful to pull pieces from several designs and combine them in to one.
As you can see from the collage of Dashboards above, they have a variety of components. Some work within my design and some do not. As the project progresses, we will see if any of these designs or pieces of the design end up in the final product.
We are getting so close to implementing actual design. I created a few drafts of a wireframe for an upcoming client meeting. Wireframes are a great way to communicate.
I love that wireframe can be used as a discussion point for so many things:
- Take your sketch to the next level
- In some instances, ad branding color and logo
- Show basic flow of page
- See if you and your client are on the same page
- Illustrate some design ideas, and discuss interactivity or animation potential
- Allow the client to modify concepts because you are both looking at the same thing
- Working together in person to come up with a better solution
As a UX Visual Designer at mylife.com, I design simple and innovative solutions to complex User Interface problems. Create multiple iterations and concepts for the final online product for desktop and responsive mobile formats. Actively participate in a fully integrated agile/scrum team with product managers, developers, engineers, QA and others. Recommend and implement copy and design changes to improve customer conversion and engagement.
I will soon have some work samples on the regular website in my portfolio, but I wanted to share some of the projects I’ve been working on as the UX Visual Designer at mylife.com.
As a UX Visual Designer, I design simple and innovative solutions to complex User Interface problems. Create multiple iterations and concepts for the final online product for desktop and responsive mobile formats. Actively participate in a fully integrated agile/scrum team with product managers, developers, engineers, QA and others. Recommend and implement copy and design changes to improve customer conversion and engagement.
Though the original scope of the assignment was to design an app, I was also assigned the duty of designing a desktop version of a website that would be promoting the app. For this wireframe, I roughly laid out where the items would be on the home page.
It’s great to get some ideas out of your head and on to some paper. I know it may seem strange. But sketching is a great way to brainstorm and to visualize how things actually fit together on the page or screen. Plus sketching is a great communication tool. Want to have a discussion about some of the ideas you have? Sketch them out and use them as talking points to move the project forward.
I used skating and the first phase to exploring some ideas for a history page I was working on for a website redesign.
After sketching a few ideas, one can take these rough sketches to the next level with wireframes. This is a great way to explore more ideas, yet not commit yourself to a high-fidelity design. I created this wireframe in Adobe InDesign because that program is quick and easy to use (for me) and has all the functionality one needs to create a wireframe.
The final step of the design phase included mocking up the page in Photoshop. Granted, the interaction and motion of the elements cannot be simulated in Photoshop. But a developer could work from this mockup with accompanying annotations and notes and discussion.
Is your company thinking of updating their website and you need to figure out what content already exists on your site?
AND what new content they want to include?
AND what old content should be carried over in to the new site?
Then is sounds like you need to do a content audit.
What is a content audit?
According to Wikipedia a content audit is the process of evaluating content elements and information assets on some part or all of a website.
In a related term, content inventory, is a quantitative analysis of a website. It simply logs what is on a website. A content inventory will answer the question: “What is there?” and can be the start of a website review. A content audit will answer the question: “Is it any good?”
Specifically, Slater states that the content audit can answer five questions:
- What content do we already have?
- Who is making this content?
- How do people find it?
- How is it performing?
- Is the content current (accurate) or outdated?
I came across a great, and very in-depth resource to assist you with your content analysis. On The Moz Blog there’s a great article called “How To Do a Content Audit – Step-by-Step” and it chock full of great resources to help you get started.
Here is a breakdown of some of the topics covered:
A step-by-step example of our process
- Step 1: Assess the situation and choose a scenario
- Step 2: Scan the site
- Step 3: Import the URLs and start the tool
- Step 4: Import the tool output into the dashboard
- Step 5: Import GWT data
- Step 6: Perform keyword research
- Step 7: Tying the keyword data together
- Step 8: Time to analyze and make some decisions!
- Step 9: Content gap analysis and other value-adds
- Step 10: Writing up the content audit strategy document
Enjoy and good luck!
Maybe you’re interested in a career in UXD, but where should you start? This infographic from Schools.com looks at how to go about becoming a user experience designer.
I am not sure if I agree with all components of this graphic, but is an interesting way to present a lot of information.
I find that User Experience and User Interface are often used interchangeably. I was not even sure that I understood what the difference was. So I decided to do a bit of research on the internets and compiled a brief list describing each discipline. I know these are long lists. If you have some comments, please share with the group.
- UX is the overall experience one has with a product or service, which can include a UI.
- User Experience is how they feel when they look at the site, aka the broad scope.
- The interaction itself
- Includes interfaces
- Addresses all aspects of a thing as perceived by a person
- UX architecture intelligently provides for the user’s interactive experience via features and functionality of a software-based product or service.
- UX-er is known as the primary user-advocate on a team
- UX informs creative
- Developers are building what UX is architecting, and creative provides the visual look-and-feel based on UX architecture and brand requirements
- UX design is all the methodological steps that lead you to the conclusion on how to design the UI. They are responsible for how they feel when interacting with the interface or product.
- Generally start by conducting user research and interviews. The goal with this is to understand exactly what the users’ needs are.
- The wireframes are essentially the blueprints of what the UI designer will use to create the interface that the user interacts with.
- One who designs the user experience for applications after doing user and workflow analysis, producing user-centered design artifacts such as personas, site maps, taxonomies, and wireframes. A UX Designer may also conduct usability testing on prototypes or finished products to assess the quality of a user experience.
- UI is typically a combination of visual design (the look and feel) and the interaction design (how it works).
- User Interface design is the part of the product that faces the user when he looks at the site.
- A tool
- A point of interaction
- A means of communicating between a person and a system
- UI (aka ‘GUI’) visual design is the graphical user interface of a software product/service
- The GUI is the visual layer informed by the UX architecture, but based on branding/style guide and visual design principles.
- The design of a GUI should be heavily informed and guided by the problems that were solved during UX process.
- GUI deliverables include mood boards, sketches, mockups, visual toolkits, final art assets and even CSS specs.
- Interaction Design is the grey area between UX and GUI design.
- Interaction, in our vernacular today, refers to the motion between states of controls and states of an interface.
- Innately understand and prioritize what is best for the user and also understand the mechanics of physics and motion design; they also understand the capabilities of current dev tools such as CSS3 and HTML5
- User Interface (UI) Design generally refers to the user facing side of any type of physical interface
- A UI designer is responsible for everything that a user will see on the interface.
- UI designer’s responsibility to understand what the users’ needs are. They must be able to arrange the interface in a simple way that allows for the best user experience.
- One who builds user interfaces that support the exchange of information between an application’s users and its back-end processes and databases.
- UI Developer’s output is functional, testable, shippable code that lets users accomplish their goals when using an application. The UI Developer is also responsible for documentation that allows others to maintain their code.
- A UI designer may have the ability to create interactive designs, icons, colors, text, and affect a number of other elements that solve problems dealing with direct interactions to the user. Those elements are fantastic tools to affect user experience but they are only part of the equation.
- The very minimum:
- Learn HTML & CSS. Learn Photoshop. Learn basic typography. Learn basic color theory. Learn about layout. Get a feeling for producing UX deliverables. Learn about usability evaluation methods. Learn the best practices for web design. Understand the difference between designing web sites, web applications, mobile applications, desktop applications and experiences.
As part of my GluteninBeer app development, I wanted to create a story board. Please don’t judge me on my drawing ability! As I child, I was a pretty good illustrator. Now, as you can see, I am complete crap. Oh well….
But illustrating some ideas, in other words, getting them out on paper, is always a good idea. So I thought creating a story board would be a good step in the UX process.
I drew this by hand, first in pencil, then reinforced it in sharpie. The I scanned it in to Photoshop to clean it up a bit. I also added the color highlights in Photoshop. This will be part of a portfolio piece for the GluteninBeer app development
For CoCo’s redesign, I examined a number of website that CoCo said was similar to theirs, as far as the organization, not necessarily the design. It’s very helpful to see what other organizations that are similar to yours are doing on their website. What CoCo particularly liked about Homeboy Industries‘ website was the prominent “Donate” button that was on every page and was sticky at the top of the screen as the user scrolled down through the content.
It’s competitive analysis time! As part of any redesign, not only is it important to understand what your website is doing. It’s also helpful to see what other organizations that are similar to yours are doing on their website. For CoCo’s redesign, I examined a number of website that CoCo said was similar to theirs, as far as the organization, not necessarily the design. Here’s what Empower LA have going on at their website.
I wanted to create more than one persona since there are a few groups that use the CoCo website. So a part of my Community Coalition of South LA Taproot project, or better knows as CoCo I am working on some deliverables to accompany the project. Based another one of the stakeholder interviews I performed this week, plus additional resources that were provided by the organization, I came up with this fitting Persona.