Category Archives: Web Design

Giving back as a UX Designer – Dallas Give Camp

Jennifer Blatz UX design website
Jen Blatz lays out the sitemap for the Dallas Goethe Center website for all of the team to see.

This past weekend was a busy and productive weekend for me. I participated in my first Dallas Give Camp.  What is Dallas Give Camp you might ask? Dallas Give Camp is an annual event where professionals ranging from UX designers, business analysts, project owners, developers and other technology-related professionals come together with non-profit organizations to design or redesign the organizations website.

Dallas Give Camp’s Mission:

“We support our communities by bringing together motivated volunteers to dedicate their professional expertise, deep insights, and individual talents to further the missions of local charitable organizations through the applied use of knowledge sharing, technology solutions, and innovative design.”

It’s a jam-packed weekend starting Friday evening at 5 p.m. and ended Sunday evening at around 4 p.m. Yes, you do get to go home and sleep. It’s not one of those all-nighter type hackathons (Thank goodness. I am too old for those. Ha!) But I was there, fully-invested for each hour and minute.

What was my assignment?

I was the UX designer helping redesign the Dallas Goethe Center’s website.  I’ll refer to the organization as DGC for short. The DGC is a local organization that promotes German language learning and culture in North Texas. They have two primary audiences: students and parents of students who want to learn to speak German, and members who participate in the cultural events.

What was my role?

As the UX designer, I worked with the team of developers to come up with a technology solution. I also worked with stakeholders to surface DGC’s problems, pain points and needs to understand what they wanted out of the new website. Also, I helped make sure that the project was moving forward, all pages and components were being built, and the content was being added to the pages.

What was the problem?

Their current website platform was on Drupal, and they wanted a platform that was easier to work with. That new platform was WordPress, which is what Dallas Give Camp encourages all teams to work on. Drupal was difficult for DGC’s Drupal-challenged volunteers and staff to update. It was also technologically limited, restricting features like easy “customer shopping” and website customization. The Divi theme on WordPress would help with org overcome these challenges.

Jennifer Blatz UX design website
BEFORE The Dallas Goethe Center website before the redesign. This was the page to purchase or renew your membership.
Jennifer Blatz UX Design Goethe Center website redesign.
AFTER The new way to sign up for membership is much more visually appealing than just a boring table. Now there are interesting icons to illustrate the different levels one can purchase. The purchase buttons are also more interactive.

How did I get started?

As with any good UX designer, I wanted a better understanding of the problem. The week before Give Camp, I talked with three members of the DGC staff to get their perspective of the website. We talked about reasons why customers come to the site, their pain points and goals for the new website. I wanted to do this initial research to get different perspectives on how the website could be improved.

What was my challenge?

I was very new to the Divi theme and have very little experience with WordPress. My experience is pretty much just posting stories to this lovely blog. Nothing too fancy. So I am not in the regular practice of building out pages or components within WordPress. I needed a tutorial quickly on how to work in the Divi theme, where to find things and how I can get up and running asap. I will say, I am really spoiled in working within WYSIWYG programs like Sketch.

How did I collaborate?

I worked with developers to understand our technology constraints. The devs also helped me understand Divi themes, WordPress and basic CSS. Thank goodness I had a basic knowledge of code. It did help me customize things a bit – once I found out where to do that within the Divi theme interface. I also worked with several stakeholders from the DGC who were our on-site subject-matter experts. It was wonderful to have them on site, right there to answer any questions we might have at any moment. The best part is the staff members from DGC were at Give Camp from the start of the day until late in the night. They were just as committed and involved as we were.

Jennifer Blatz UX design website
I put up the sitemap fo all of the team to see and validate. I also included sketches for basic website structure.

Friday

We started Friday evening, with a hearty dinner to get us ready for the first night of the event. We met the team, broke down the problems and prioritized the major issues we needed to solve. We talked about what aspects of the website needed to be improved, what new pages we needed to create and we were introduced to WordPress and the Divi them. But the end of Friday evening, at 10:30 p.m., we had a pretty good plan of the site map, what pages we needed to build and what elements would go on those pages.

Saturday

Bright-eyed and bushy-tailed, we all rolled in around 9 a.m. ready to build out the site. I wrote the site map on the whiteboard so that we could verify that we had all of the content included. I also started sketching out some basic wireframes to further validate that all content was accounted for. Then it was time for me to get to work.

Like I mentioned earlier, I was pretty inexperienced with WordPress, and had no previous knowledge of the Divi theme. So I was pretty slow to jump right in and churning out components. That is what I wanted to do. I am so used to just being able to build things at a pretty hefty speed in Sketch. But this proved to be much more challenging than expected. I wanted to get pages build and templates ready ahead of the team so that they could just plug and play.

A number of pages had 3 cards, in a box, of content to lead the page. I wanted this component to be built and ready to go so that it would be consistent across all instances. But it took the developer and I over an hour to get it built to (near) the specifications I had in mind. Yes we got it built, but it ate up a lot of time. Yikes! Now we were approaching early afternoon and time was pressing against us. We had a lot of pages to build. We had to get components like boxes, buttons, purchasing options and other website elements on the page. We had to get all of the content on those pages. The content was all really, really long, so we needed to edit that content down to digestible chunks. Then we needed to apply some design style to improve the design beyond the basic offering.

Well, shit started hitting the fan in the early evening. We were very behind. We still needed pages built, components added, content added and interactions tested. We started to panic. Well, I did. We did not know who was working on what. We were not really sure what was and was not finished. It was a mild case of chaos.

We called in some help. A floating developer came in and assessed the situation. We had not been using Trello. Hence, we did not know who was assigned to what part of the project and how that was progressing. So we got all the remaining work on the board. That way we got a bit more organized and figured out who was responsible for what. By 10:30 at night, we were running on fumes. We finally got all the pages created, components on them, and basic content on most of them. We had not adjusted the style from the out of the box offering. And we had not even begun to test items like links, shopping cart functionality or other interactions. But that was OK. We still had a few hours on Sunday to do our best to make it to the finish line. At least now the fire was contained.

Jennifer Blatz UX design website
AFTER The events page after the redesign. We could now highlight the major events happening within the org.

Sunday

Bright and early again. It was a calm atmosphere, coming to terms with the fact that not all of our to-do list was going to be complete. Content was on the pages, but it still needed to be edited. Style was not going to be modified, but it was pretty good looking for now. Links and buttons were going to be tested. The shopping cart experience was working. We were very close to a functioning website. The stakeholders were very pleased with the progress we had made in just one weekend and were very excited to launch. We were 90 percent to complete success. And 90 percent is not only good enough, it’s pretty damn good.

We wrapped up the day updating the Trello board with tasks that still needed to be completed after Give Camp. We all gathered again for all of the Give Csamp teams to share their stories and display their much-earned success. We had built a website in just one weekend and it was pretty kick-ass.

What did I learn?

I need to get ahead of the game: I should have worked on the design solution earlier and started constructing wireframes, mockups and structure.

I need to learn the technology: I should have looked in to Divi a bit more. I should have learned the capabilities before hand and thought about how I wanted to tackle some of the design challenges.

I need to track the progress: We were assigned a Trello board well before kickoff, but we quickly abandoned it in the midst of the chaos. But there’s a reason why they gave us access to Trello, and we should use it. Tracking our progress on Trello got us back on line and better organized.

I can do it: I can pick up new technology. I can work with a new team. I can get a lot of work done in a short amount of time. I can establish a good comradery with a team and help us get to a common goal. I can do it!

Jennifer Blatz UX design website
Our volunteers and Dallas Goethe Center stakeholders made it through the weekend.

Would I do it again?

Hell yeah! Maybe not for another year. But yes I would do it. It was fun to work on something different and get fully emerged in the website design process. It was great to have stakeholders on hand who were willing to get their hands dirty and pitch in to get things done. It was exhausting to put in so many hours straight. But it was exhilarating to jive through and get it done. Most importantly, it felt really great to contribute my skills as a UX designer in a positive way and to give back to the community in some way. Working with Dallas Give Camp and the Dallas Goethe Center was professionally and personally rewarding for sure. Sign me up for next year – after I get a bit of a nap.

See UX samples on Dribbble

Jennifer Blatz's UX design work can now been seen on dribbble.com
Jennifer Blatz’s UX design work can now been seen on dribbble.com.

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.

User Interface Elements

  • 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

Input Controls

Description Examples
Checkboxes

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.

Example of checkboxes
Radio buttons

Radio buttons are used to allow users to select one item at a time.

Example of radio buttons
Dropdown lists

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.

Example of a dropdown
List boxes

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.

Example of a list box
Buttons

A button indicates an action upon touch and is typically labeled using text, an icon, or both.

Example of buttons
Dropdown Button

The dropdown button consists of a button that when clicked displays a drop-down list of mutually exclusive items.

Example of dropdown button
Toggles

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.

Example of toggles
Text fields

Text fields allow users to enter text.  It can allow either a single line or multiple lines of text.

Example of text field
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.

Examples of date and time pickers

Navigational Components

Description Examples
Search Field

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.

Example of search boxes with various functions
Breadcrumb

Breadcrumbs allow users to identify their current location within the system by providing a clickable trail of proceeding pages to navigate by.

Example of breadcrumb
Pagination

Pagination divides content up between pages, and allows users to skip between pages or go in order through the content.

Examples of pagination
Tags

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.

Example of tags
Sliders

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.

Example of sliders
Icons

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.

Examples of icons
Image Carousel

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.

Example of an image carousel

Information Components

Description Examples
Notifications

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.

Example of a notification
Progress Bars

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.

Examples of progress bars
Tool Tips

A tooltip allows a user to see hints when they hover over an item indicating the name or purpose of the item.

Examples of tool tips
Message Boxes

A message box is a small window that provides information to users and requires them to take an action before they can move forward.

Example of message boxes
Modal Window (pop-up)

A modal window requires users to interact with it in some way before they can return to the system.

Example of a modal window

Containers

 

Description Examples
Accordion

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

Example of an accordion

Community Coalition’s website relaunch

Jennifer Blatz UX design community coalition website redesignAfter 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.

Lessons learned
  • 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
  • Wireframes
  • Personas
  • Interviewing stakeholders
  • Competitive analysis
  • High fidelity mockups
  • Process and user flows
  • Content inventory, analysis and strategy
  • Information architecture and taxonomy
Takeaways
  • 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.

 

The Practical Psychology of Conversion

Jennifer Blatz Design UX color theory in buttons and design
Keeping in mind ideas about color theory can help you in your design.

I recently came across an article titled, “The Practical Psychology of Conversion” and I thought it had some great points to remember when designing a web page. Here are a few highlights.

In design and implementation of a call to action, everything from contrast, clickability and placement to directional cues affect buyer behavior.

Some of the recommended action copy to use to convert:

  • Get” something vs. “Buy” or “Download” or “submit”
    • one of my favorites: “Get the thing” (this was the button text to buy Louis C.K. tickets on his website)
  • Add to cart” vs. “Buy Now”
  • Start
  • Begin
  • Find
  • Become
  • Learn
  • Receive
  • Launch
  • Achieve
  • and of course, a healthy use of Free

In fact, the 5 most persuasive words in the English language are:

  • You
  • Free
  • Because
  • Instantly
  • New

 

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.

Creating wireframes for CoCo Website

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

wireframe as a UX deliverable

 

Email design in the UX World of mylife.com

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.

CC-Fail-ID-Premium-Email-3v1-10-14 Onboarding-Welcome-ID-Prem-email-4v4-10-14 Privacy-Meter-email-Cheetah-9-14

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.

When to Use Which User-Experience Research Methods

This post originally came for Nielsen Norman Groups website in the full article “When to Use Which User-Experience Research Methods”. Here is an excerpt  from that article highlighting a comprehensive list of research methods.

Research methods chart on Jennifer Blatz UX Design

20 UX Methods in Brief

Here’s a short description of the user research methods shown in the above chart:

Usability-Lab Studies: participants are brought into a lab, one-on-one with a researcher, and given a set of scenarios that lead to tasks and usage of specific interest within a product or service.

Ethnographic Field Studies: researchers meet with and study participants in their natural environment, where they would most likely encounter the product or service in question.

Participatory Design: participants are given design elements or creative materials in order to construct their ideal experience in a concrete way that expresses what matters to them most and why.

Focus Groups: groups of 3-12 participants are lead through a discussion about a set of topics, giving verbal and written feedback through discussion and exercises.

Interviews: a researcher meets with participants one-on-one to discuss in depth what the participant thinks about the topic in question.

Eyetracking: an eyetracking device is configured to precisely measure where participants look as they perform tasks or interact naturally with websites, applications, physical products, or environments.

Usability Benchmarking: tightly scripted usability studies are performed with several participants, using precise and predetermined measures of performance.

Moderated Remote Usability Studiesusability studies conducted remotely with the use of tools such as screen-sharing software and remote control capabilities.

Unmoderated Remote Panel Studies:  a panel of trained participants who have video recording and data collection software installed on their own personal devices uses a website or product while thinking aloud, having their experience recorded for immediate playback and analysis by the researcher or company.

Concept Testing: a researcher shares an approximation of a product or service that captures the key essence (the value proposition) of a new concept or product in order to determine if it meets the needs of the target audience; it can be done one-on-one or with larger numbers of participants, and either in person or online.

Diary/Camera Studies: participants are given a mechanism (diary or camera) to record and describe aspects of their lives that are relevant to a product or service, or simply core to the target audience; diary studies are typically longitudinal and can only be done for data that is easily recorded by participants.

Customer Feedback: open-ended and/or close-ended information provided by a self-selected sample of users, often through a feedback link, button, form, or email.

Desirability Studies: participants are offered different visual-design alternatives and are expected to associate each alternative with a set of  attributes selected from a closed list; these studies can be both qualitative and quantitative.

Card Sorting: a quantitative or qualitative method that asks users to organize items into groups and assign categories to each group. This method helps create or refine the information architecture of a site by exposing users’ mental models.

Clickstream Analysis: analyzing the record of screens or pages that users clicks on and sees, as they use a site or software product; it requires the site to be instrumented properly or the application to have telemetry data collection enabled.

A/B Testing (also known as “multivariate testing,” “live testing,” or “bucket testing”): a method of scientifically testing different designs on a site by randomly assigning groups of users to interact with each of the different designs and measuring the effect of these assignments on user behavior.

Unmoderated UX Studies: a quantitative or qualitative and automated method that uses a specialized research tool to captures participant behaviors (through software installed on participant computers/browsers) and attitudes (through embedded survey questions), usually by giving participants goals or scenarios to accomplish with a site or prototype.

True-Intent Studies: a method that asks random site visitors what their goal or intention is upon entering the site, measures their subsequent behavior, and asks whether they were successful in achieving their goal upon exiting the site.

Intercept Surveys: a survey that is triggered during the use of a site or application.

Email Surveys: a survey in which participants are recruited from an email message.

Image-Focused Design: Is Bigger Better?

UX, user experience, Jennifer Blatz, design, hero image

The Nielsen Norman Group has released an article discussing the importance and flaws of using a huge hero image on the home page. I am sharing the important check list that is included in the article. Read the entire article about image usage “Image-Focused Design: Is Bigger Better?” now.

How to Ensure that You Use Images Appropriately

Follow these steps to make sure you have the right balance of elements:

  1. Identify and prioritize all the goals of the page — both the user goals, and the business goals (including brand goals.) Is the page primarily a marketing vehicle to build your brand? Or are most visitors already familiar with your organization (or at least your industry vertical), and now need specific content or functionality?
  2. Define how each design element relates to the page goals. Images are usually decorative, and support branding goals. Navigation and structured search relate to specific user tasks.
  3. Assign visual weight based on goal importance. If a design element supports a high priority goal, it should have more visual emphasis; conversely, design elements related to secondary goals should have less emphasis. (This guideline sounds obvious, but is often completely disregarded, or gets lost along the way to creating a ‘modern’ looking website.)
  4. Select images that have a strong relationship with brand goals. Remember, the purpose of your site is not just to showcase images (unless you’re Flickr). Instead, the images you select should showcase the purpose of your site.
  5. Choose striking visuals that capture attention. Once you’ve identified the goals of your images and their relative importance among other design elements, and you’ve determined what types of images relate to these goals — only then should you focus on selecting the most compelling images you can find.
  6. Be selective about which trends you embrace when ‘updating’ your site. For many redesign projects, creating a site that looks ‘modern’ is an important goal. But there are many ways to accomplish this goal. Typography, layout, and brand colors — just to name a few—can all be effectively used to create a modern look and feel, while still providing appropriate emphasis on critical site functions.

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

Usability Testing for User Experience Course

When testing the Weather Channel App, I discovered a number of usability issues. Clearly, if the UX team had run some basic usability tests, a number of problems would have discovered and corrected.

Some issues I discovered:

• Make clickable items like buttons seem clickable.

• Remove ads within the feed, especially if they look like weather (editorial) content.

• Do not use ads as a background image on home page.

• Put useful information like search functionality in side drawer.

• Put more information, like a few days’ forecast on the home page.

• Use arrow indicator to notify the user to scroll down.

• Do not include every searched location in the favorites list.

• Allow user to just search a location without saving it.

• Allow users to include more than 10 locations in the favorites list.

• Clearly indicate current city with writing the city name, rather than relying on image.

• Give clues on social weather page as to what the icons mean and what will happen before a user clicks the icon.

• Make icons intuitive and less confusing and add a word them to clarify the function.

• Allow user to return to the top of page by tapping on the bar at the top of the screen.

• Move radar closer to top of feed. Or allow users to modify the order of content or remove something that does not interest them.

weather channel app usability problems
Make sure that items that are clickable in an app or website are clear to the user

Website Evolution: Sketches

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.

Use sketching as a communication tool to get the ideas out of your head and on to paper.
Use sketching as a communication tool to get the ideas out of your head and on to paper.

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.

How to do a Content Audit

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!

 

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.

Great resource for brand guidelines

Find Guidelines on the Web website

  • Want to know the design differences between Apple’s iOs6 and IOs7?
  • Need to know LinkedIn’s brand guidelines?
  • How about getting Twitter’s .eps logo? Or understanding the ways that logo can be used?

 

Find Guidelines on the Web is a fabulous resource for finding many of the top brand names on the web right now.

Some of the brands featured:

  • Behance
  • LinkedIn
  • Apple iOs
  • Twitter
  • Vine
  • AirBnB
  • Android
  • Google
  • Mailchimp
  • WordPress

 

 

New www.jenniferblatzdesign.com website redesign

Since you made it to this blog, it’s very likely that you came here through my home page at www.jenniferblatzdesign.com. But just in case you did not, and came in some special “back door” way, I wanted to emphasize that my portfolio site has a new design.

I opened with my UX portfolio. As you can see, I am accumulating a lot of UX assets and deliverables. One can also view some examples of my visual design work.

Thank you for taking the time to visit my newly-designed site. I would LOVE your feedback if you have any suggestions for improvement.

New cleaner layout for jenniferblatzdesign.com website.
New cleaner layout for jenniferblatzdesign.com website.

uxpala.org website is a work in progress

The wonderful Strategic Projects team of UXPALA (User Experience Professionals Association of Los Angeles) spent a good part of Sunday afternoon working on the “not quite ready for primetime” uxpala.org website. Though it is still in it’s very early stages, the team came together to get a lot of work accomplished. We have to pull information form the already existing meetup website, plus create new content that must also be included on our formal website. All if this while working with the Information Architecture and structure of the site. Though there is yet a lot of work to be done, we made some great headway.

uxpala.org website created by the strategic project team.
The UXPALA.org website is a work in progress, but it is certainly coming along after a long afternoon of work from the Strategic Projects team.

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.