Tag Archives: design

BigD Conference: Design for Real Life

indifference-jennifer-blatz

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.

 

UX deliverables and skills

Jennifer Blatz design UX and UI design clips and work samples

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.

Real world vs. electronic world

Designing a paper EMR in to a digital format Jennifer Blatz UX Design
Creating an electronic version of a paper medical record is very challenging for the UI designer.

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!

Creating Wireframes for Dashboard Development

Jennifer Blatz Design UX

 

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.

Wireframes and deliverables by Jennifer Blatz UX
Wireframes can be created in a variety of programs. I chose Adobe Illustrator to create these first drafts of the dashboard.

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
  • Print

Exploring options in UX design

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.

Exploring design option for a mobile website Jennifer Blatz User Experience UX Design
Exploring design options for a mobile website.

The discovery phase in a new UI project

Jennifer Blatz design research and discovery UX
Looking at design examples of dashboards that already exist helps me to get in the right mindset of designing something similar, and hopefully better.

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.

Characteristics of high-converting CTA buttons

Here are the six characteristics of high-converting CTA buttons.

  1. They are buttons. Save your creativity for another occupation, like writing novels. Button up.
  2. They have compelling copy. Use verbs. And please, for the lost love of conversions, don’t use the word “submit.”
  3. They have logical placement. Eyes move in paths, not jumps. Put it where it will be seen.
  4. 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.
  5. 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.
  6. 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.

Visual designer for my life.com

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.

User Experience Visual Designer at my life.com
User Experience Visual Designer at my life.com

CC-Fail-PRR-Email-10-14

15 Mobile UX Facts And Insights

I cam across this interesting article about UX and Mobile.

Read the entire story including links at Measuring Usability‘s website.

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.

  1. Around half the US’s and 62% of the UK’s mobile phones are “smartphones.” The percentages are similar across Europe. Fortunately for us researchers, most consumers actually know what a “smartphone” is and whether they own one with around 8% not knowing what “smartphone” means. 
  2. Around 20% of the US population over the age of 18 owns a tablet.   It’s about evenly split between Android and iPad platforms.
  3. 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.
  4. 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]
  5. Most people have over 20 apps (5 or more paid for).  
  6. Most people forget what apps they even downloaded
  7. 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. 
  8. Around half of US smartphone users use their mobile phone to compare prices while in the store. The percentage is a bit lower for Europe.
  9. Most tablet owners still have another desktop or laptop, and despite high usage, it’s still not considered the primary computer. 
  10. Most smartphone users haven’t scanned a QR Code. But if they do it’s usually for finding more product information or obtaining discounts.  
  11. Portrait vs. Landscape?  For viewing content it’s about evenly split with 54% preferring portrait mode.   However, landscape might be more popular for using certain apps.
  12. Conversion rates from tablets are four times higher than smartphones 5% vs. 1% (about the same as desktop conversion rates). 
  13. Consumers who own both a tablet and a smartphone were significantly more likely (63%) to indicate increased overall mobile spending than owners of smartphones only (29%). Larger screen size, full keyboard, and touch screen capabilities are cited as the main reasons for a better shopping experience
  14. 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. 
  15. 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.

UX Radio and Podcasts Massive Collection

UX radio retro woman

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.

UX Radio: UX-, Design-, Usability Podcasts

Some of the podcasts that I think look particularly interesting are:

 

22 Ways to Create Compelling Content

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.

For the original story you can visit “22 Ways to Create Compelling Content When you Don’t Have a Clue”. What resources are you going to try to pull creative content from? I think I will personally skip the celebrities topics. You’re welcome.

22 Way to Create Compelling Content infographic
22 Way to Create Compelling Content infographic

Website Evolution: Wireframes

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.

Wireframes are a good middle step between touch sketched and a high-fidelity mock up.
Wireframes are a good middle step between touch sketched and a high-fidelity mock up.

Two Heads are Better Than One!

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.

UXPIN’s Guide to wireframing free book

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.

UXPIN's Guide to Wireframing ebook

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.

Lynda.com has great UX Tutorials

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 illustrates the basic steps of the product development life cycle.
This illustrates the basic steps of the product development life cycle.

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.

Check it out. You just might learn something!

Keep up the competitive analysis for CoCo

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.

Homeboy Industries website for the CoCo Competitive Analysis. Jennifer Blatz UX Design
Though Homeboy Industries has a different focus, than CoCo, they can reach the same audience in some ways. Not to mention both organizations are based in Los Angeles.

 

What are other sites like CoCo doing?

Competitive Analysis of the website for Empower Los Angeles.. Jennifer Blatz Design UX
Competitive Analysis of the website for Empower Los Angeles.

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.

Creating More Personas for CoCo

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.

CoCo Persona Jennifer Blatz Design UX
A good way to keep the CoCo project on track is to create Personas to always keep the website’s users in mind.

Creating Personas for Coalition website

Persona for Community Coalition UX Jennifer Blatz Design
Persona for Community Coalition

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.

 

Wireframes for desktop – Hollywood Walking Tour

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.

Hollywood Walking Tour App Desktop ad website Jennifer Blatz Design UX
Hollywood Walking Tour App Desktop ad website

Gluteninbeer comparison table

http://gluteninbeer.blogspot.com comparison chart
http://gluteninbeer.blogspot.com table which compares the tests results of beers that have been tested so far

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.

 

The Experience Economy

On Design Thinking on MOOC today, students were introduced the the evolution of the the Economy. See the graphic below:

The Experience Economy (according to B. Joseph Pine II and James H. Gilmore)
The Experience Economy (according to B. Joseph Pine II and James H. Gilmore)

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.

Customer Goals vs. business goals

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.

Business Goals for Hollywood Walking Tour app

Customer Goals for Hollywood Walking Tour app
Business and Customer Goals for Hollywood Walking Tour app

 

Graphic Design USA website award

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….

jenniferblatzdesign.com Graphic Design USA magazine's Inhouse Design award winning website.
jenniferblatzdesign.com Graphic Design USA magazine’s Inhouse Design award winning website.

Design in one word?

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?
  • Answer: Freedom.

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.

Design thinking week two on MOOC through iversity.org
Design thinking week two on MOOC through iversity.org.

Design theory on MOOC

I just started the online course titled “Design Thinking MOOC” and so far it’s pretty interesting. I love new courses that challenge my every-day thinking and teach me something new.

In Chapter 4 , Week 1 of “Design Thinking,” I was introduced to the Trajectory of Artificiality Theory by Krippendorff. Here is the theory illustrated below:

Trajectory of Artificiality chart
The “Trajectory of Artificiality” by Krippendorff as presented via Design Thinking MOOC on Iversity.com

Text book number 2: The Web Designer’s Roadmap

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 Web Designer's Roadmap
This is the second book for my CalState Fullerton course “User-Centered Design for Web and Mobile Interfaces.”

‘Healthy’ topic assigned, now get to work

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:

Information Architecture

UX-health-board

User Flow

UX-health-userflow

Redesigned Homepage

Interrobang UX Hackathon 2-14

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.