Category Archives: Web Design

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.