The keynote speech of the first day was given by Sara Wachter-Boettcher. The topic covered designing to avoid biases and exclusion. It was really interesting and inspiring. Here are a few highlight from her speech:
Think about how your app or message could make the user feel alienated or as if they don’t belong in some way.
Make sure the voice of your product does not push people out or make them feel like they are not part of the “crowd.”
When a person has to choose his/her race, think about how that makes him/her feel. What if they don’t identify with the choices? What if they are more than one race? Making a person choose a race could make them feel “flattened” and generic. This is especially true if they do not identify with the categories you have presented.
Security questions are not for everyone. Some people have never had a pet. Some people went to many schools and don’t know how they should answer. Let people create their own security questions that they can identify with.
We are used to defining our audience and we think it’s easy to do. We see what is “normal” or “like me” in the media and TV. We forget how diverse the world is.
We must own up to our biases and consciously work past them.
Stress cases normalizes the unexpected.
Talk like a human and add some delight. But delight might not always be appropriate. You can fail to see what could go wrong when you decide to add delight.
If you are not asking yourself “How could this design/text hurt or exclude someone?” you are not thinking about it enough.
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.
A UX/UI designer has a tremendous challenge when she is assigned the duties of translating a real-world process in to an electronic or digital process. The UX designer must keep the user’s mental model in mind when designing an electronic system.
When working on EMR, or electronic medical records, it is a completely different set up and system than the paper recording method the user has been using. They key to designing a successful EMR, is to closely match the work flow and system that the user is used to. That success has not really been achieved in most EMR systems. Often, software designers get too excited and caught up in the features and flash of digital possibilities. When working on any electronic system, it is crucial to always understand how the user works, and make your system as similar to that work flow as possible.
If you have any suggestions on how to bridge the gap between the real world and electronic world, please leave them in the comments. Thanks!
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
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.
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.
Here are the six characteristics of high-converting CTA buttons.
They are buttons. Save your creativity for another occupation, like writing novels. Button up.
They have compelling copy. Use verbs. And please, for the lost love of conversions, don’t use the word “submit.”
They have logical placement. Eyes move in paths, not jumps. Put it where it will be seen.
They use a contrasting color. Although I don’t advance the idea of toying with shades of gray or blue, or green, I happen to know that buttons with color contrast convert better.
They have close proximity to the previous action. The mind and the pointer have a symbiotic relationship. Your CTA becomes part of that symbiosis as it moves directly into the cognitive and visual flow of the user.
They don’t compete with other crap. If you want to purposely lose conversions by crowding out your CTA, go ahead. I, for one, advance the idea that the CTA should be king of the page.
More on the six characteristics of high-converting CTA buttons.
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.
Designing a better user experience means making sure that users can access information and services across multiple devices, especially mobile devices (phones and tablets).
In building a better experience, there are many questions about mobile device usage and how designers can best meet users’ needs with apps and responsive designs. We’ve conducted a lot ofmobile usability studies and in the process have encountered many common questions.
Here are 15 data points to help in answering some common questions about mobile usage and behavior. I’ve included as many sources as possible so you can double check our conclusions.
Tablets have a similar profile as desktops. While tablets get lumped together with smartphones, some data suggest that they are more similar to desktop computers. Tablet users are more engaged and view about the same number of pages as desktop users. That’s about four times more than smartphone pageviews.
People use full-size tablets at home and in the evening. In addition to size, part of the reason for the homebound devices might be that only about half of iPads have cellular data access. In fact, we found the most concentrated time was used at home, on the couch, or bed between 7 and 10pm[pdf].
Most user prefer shopping using websites to apps. One of the more pressing decisions for mobile teams is whether or not to build an app. Going down the app path means supporting multiple operating systems and platforms (usually having different development teams). In our lab-based studies, we also generally see users spending the most time with the web browser and often not knowing whether they have an app or not. One of the biggest complaints in the mobile browsing experience is the constant nagging of downloading apps and the non-continuity of links that don’t open the apps. We generally see users prefer shopping on websites rather than using apps. The percentage changes depending on the industry, app and demographic but the app should offer a compelling experience, rich features or something you can’t get in a browser. Update: Changed a link title that cited a somewhat misleading figure suggesting 87% of consumers preferred apps over websites.
Security is a still a major reason why mobile users don’t make purchases. In our 1:1 lab interviews, we consistently hear fear of stolen data as often as usability and screen size as reasons why users don’t like to use credit card or bank information on mobile phones and tablets.
The more consumers consider and research a purchase, the more they use their smartphones to find product information. For example, 73% of mobile usage in electronics stores was to read product reviews.
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.
I found a great definitive list of design, tech, web and UX podcasts. I listen to a lot of podcasts on my drive to and from work, so this is going to be a great resource for people like me who like to catch up on their podcasts on their commute. Yes some are in German, but pick the English ones if that’s your cup of tea.
Coming up with great content can be really tough sometimes. It is hard to figure out what you want to say. I know that I struggle with that when I am developing blog posts. Normally I report on things that I am working on. Or I share graphics that I find interesting. This is one of those such graphics.
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.
Collaboration is truly valuable. I revisited the truth in that statement this week while working on the CoCo website redesign project I am involved in.
The task at hand was to get the website organized so that I could start thinking about new design possibilities for the site. But before I could do that, I had to have a clean and organized Information Architecture structure to work with. Sadly, the stakeholders did not understand the importance of not only doing a content analysis of the current site, but thinking about where they wanted the site to go. I understand it is very difficult for non design and web people to see the potential that change can bring. So I don’t blame them at all for not having the forsight to dream about the site’s potential. But if they could not do it, we had to.
So my fabulous content manager Wendy and I worked one evening to really get a site map organized. We talked about how the site exists now. We discussed the ways they organization wanted to change and the new features they wanted to include. And we debated what the navigation terms would be used.
It was a great collaboration and it was so helpful to have someone to hash out this process with. So in the case of working on a complicated process, like creating an organized and cohesive site map, two heads are better than one.
I came across a great resource the other day that I would like to share with you. UXPIN is a paid service for wireframing websites, tablet and mobile pages online. Though UXPIN is a paid resource, they do offer several valuable and FREE resources. One resource I would like to mention now is their free ebook “The Guide to Wireframing.”
Some of the resources I like in particular are:
The pros and cons of various wireframing techniques and software
Provided UI patterns and resources
Common UI trends in today’s most-used apps
Yes, it is kind of a pain to have to provide your email to get the book sent to you. But for the UI pattern aspect alone, I think it’s worth checking out. Enjoy.
How about listening to something education while you are at work? Lynda.com has a lot of great video tutorials on a lot of subjects – like UX, web design and business. I saw this slide on one of the courses the other day and thought it was a great reminder to share. When working on a UX project, one will often go through these phases:
This particular slide was found in “Foundations of UX: Content Strategy with Patrick Nichols” and is often referred to as the product development life cycle.
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.
As 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 on one of the stakeholder interviews I performed this week, and other resources provided by the organization, I came up with this fabulous Shelia Persona.
As part of my class project, I also had to create a wireframe for a desktop version. Though my concept really focuses on just the mobile app, I was tasked with creating a computer version that would promote the app. Below is the wireframe for this desktop website that would be promotion the app and leading viewers on where they could download the app.
I am working on my coding skills a bit by creating this comparison table for the website Gluteninbeer. Like the name suggests, this blog focuses on the gluten level of beers. The interest here is not gluten-free beer. Nope. The site tests the gluten levels in popular and commercial beers that are not considered gluten free. I work with my partner to create the branding and content.
In this instance, aside from creating the logo and branding, I also coded up this handy little chart. After receiving multiple requests from our readers to create a summary chart, we decided to do so. The table breaks down the beer tests results so for. It is a quick comparison of which beers are safer or not safe at all for people with a gluten intolerance. Please note that this site does claim that these beers are safe for celiacs. The members of gluteninbeer.blogspot.com are just testing the gluten levels in beer for their own personal interest and consumption.
On Design Thinking on MOOC today, students were introduced the the evolution of the the Economy. See the graphic below:
Joseph Pine and James Gilmore suggested in their book ‘the Experience Economy’, that the economic value creation in developed countries went from an agrarian economy, to an industrial economy, to a service economy, to an experience economy.
The agrarian economy is mainly concerned with producing and dealing with commodities. Extracting natural resources is here the major economic driver. The value creation in the industrial economy is based on the production of goods. When the goods market is saturated the next level of value creation is the service economy, which refers to an increased importance on the delivery of services. And last but not least there is the experience economy, where the experience becomes a significant economical differentiator.
The reason could be seen in a natural evolution, that as soon as basic needs are met, humans seem to strive for improvement and development.
This is a portion of my first assignment for the Cal State Fullerton User-Centered Design for Web and Mobile Interfaces class. The charts here correspond to my chosen class project: A Hollywood Walking Tour App. I can’t seem to find a good and FREE walking tour app. So I thought about creating one myself.
The charts here discuss what the goals of the business are and what the customer goals would be. Though these charts are not perfect, their are a good first draft for the project.
The first of three award winning designs I would like to share with you is my website www.jenniferblatzdesign.com. This was my first ever web design award, and I won’t it from GDUSA Magazine’s Inhouse Design Awards. I have won several awards from them through the years. But this is the first year I’ve won a web design award from the organization. I am proud and inspired to design more great looking websites. Thanks for the confidence boost. Back to work….
This is the second Graphic Design USA award winning design for 2013. The concept here was a jovial and festive “Save the Date” reminder for a company’s holiday party. I needed to express the festive season, without promoting any religious affiliation. This design was well received.
I am now watching week 2 of Design Thinking on MOOC viewable on iversity.org. One of the interviewees said something very intruiging:
Question: What is Design in ONE word?
Now this is a very interesting answer isn’t it?
Design is so complex, and so difficult to define with just one word. Some might say design is “art” or “creativity.” Others might say it is “communication” or “planning.” But to think of Design in terms of Freedom is a very interesting approach indeed. There’s some food for thought.
Well it’s official. I now have both text books for my “User Experience and Customer-Centered Design” certification class. I guess I’d better get off the computer and start reading my books for the course. The course lasts only three weeks, so I need to start reading ahead of time if I want to be on schedule.
The day after WIAD (World Information Architecture Day) I participated in another day-long User Experience event. This time, I was not a passive observer who had organized the event. I was a hands-on, jump-all-in User Experience designer.
We were assigned the timely topic of Healthcare, so we chose to redesign the Covered California website. We did not feel that there was a clear call to action, so we wanted to simplify the interaction of the website a bit.
We were very tight on time, so we banged through a lot of brainstorming sessions, mind mapping and creative flow to narrow down the scope of the project. Just before the deadline, the team created a few valuable assets for our 3-minute presentation. Some are shown below:
UX Hackathon was an exciting experience and I learned a lot about working in teams, working under very tight deadlines, lean UX and creating deliverables in less than a day.
Jennifer Blatz explores the world of UX through words and imagery