MELINDA WRIEDT KOZEL

Becky Shaul approached me to help her build a site for her new mobile notary business. As she is just starting out, she wanted something simple that looked professional but still felt like her personality. We discussed a beach color theme and from there the wave motif came through.

I designed her logo, incorporating the wave as a graphic image then using the wave background to delineate but give smooth transitions to sections.

Ultimately, her site stands out from others in field adding a more personal touch for people who may need her services.

Elements of the project:
In addition to designing, I:

• Established hosting and migrated domain
• Connected email accounts
• Built the site in WordPress, customizing Divi with tailored CSS, responsive and accessible design
• Performed QA on a variety of devices
• Provided original, image and greyscale versions of all logo files
• Provided documentation so the client could do small updates and understand how her site is constructed

When TechOmaha began organizing for their Project18 initiative to promote tech opportunities for women, they wanted to create a comprehensive site that gave resources and access for a variety of related groups.

Because there are so many groups, events and resources, I wanted to make sure all of these were easy to view and access.

The event calendar was the most-frequented feature of the current site so I embedded it to the front page. It uses linkable events to make information easy to find. 

The Meetups page was first a challenge in organizing a huge amount of information into a manageable page. Previously, this information was a long list of groups, their focus, meetup dates, contact info and other information. It was difficult to scroll and find what you were looking for efficiently.

So, I reduced the information to the names and logos of each group. Each block links directly to their page or social media profile. This allows users to get to the group to learn about it, and then can use the calendar to find their events more conveniently.

I was working with a local cabinet maker on my own kitchen when they mentioned they wanted a website. 

His requests were simply:

1) I want to just showcase our work

2) I want minimalism

The concept of the site was to make the whole page a gallery grid. The page scrolls with the nav fixed to reveal as many images as are uploaded. The images also shuffle on each load so it always feel fresh. 

Additionally, we added a little drama by making all of the images black and white by default. When you hover over the image, it turns full color. 

When you click on the image it opens in a lightbox for a closer look.

Then navigation simply has a link to a contact form and to their instagram profile.

Mark needed a website for his re-election campaign for the Learning Community Council in Omaha. He wanted to something that showcased:

• His tenure on the council
• What the council does
• How to connect with him and donate

I started by creating the site icon to complement the logo used in his print campaign. Next, I used content from his printed postcards to construct the different sections. I wanted to keep the eye active, but keep it simple. Mark wanted to share alot of information; my task was to find ways of presenting the text in efficient, clean ways.

Additionally, we were able to incorporate other information resources like the embedded Google map to give users a better familiarity with the district their school is in.

Problem statement: My notes from Spanish class are scattered and unorganized, written in a notebook. This makes it difficult to find a particular word or conjugation in the moment.

This is important because: The more pauses I have to take and when I am unable to find the correct word to practice speaking Spanish, the more I can become frustrated or will try to use something more familiar – even if it’s not accurate.

How is success measured? I can move between groups quickly. I can go straight to a verb, in its context, and find the conjugation table quickly. 

Concept

I want all of the notes to be accessible in one place but easy to sift through and minimizing text. I will use a tab system to keep information separated but easy to switch between.

Each tab will then be segmented further to keep similar words together. 

Verbs will be listed according to their topic area. Accordions will help keep text hidden until needed.

Steps and Tasks

• Group vocabulary by category (house, food, animals, arts, etc). These groups become individual tabs.
  • Choose verbs related to each category (e.g. Comer (To Eat): Food)
  • Create Subcategories (Food: Vegetables, Meat, Breakfast, etc)
• Determine layout of tabs and subcategories
• Find images to better illustrate each section with needing text

Discovery: I was handed a workflow for the new process but this doesn't tell the story of what a driver is experiencing. Instead, I created the experience of the driver as the workflow.

I determined two opportunities to alert and describe the function to the driver. First, the error message that prompts when the documents are unable to upload and finding a location to give drivers access to the document queue.

Ultimately, the product owner decided not to make the paperwork queue visible to the drivers since they don't need to do anything further with it. Choosing to focus on the Offline Mode Warning message not only gave complete, concise confirmation to users but also reduced the amount of work for developers and architects.

The Offline Mode Warning

First recommendation:

Add more specific explanation for what is happening.

Why?

Usability Heuristic #9: Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.

These error messages should also be presented with visual treatments that will help users notice and recognize them.

• Use traditional error-message visuals, like bold, red text.
• Tell users what went wrong in language they will understand — avoid technical jargon.
• Offer users a solution, like a shortcut that can solve the error immediately.

This error message does not show the reason the file is unable to upload. Additionally, it does not explain what the queue is and what next steps, if any, are needed from the user. This informs them that they have completed the process.

Proposed Solution:

Giving a specific explanation of what is not working as normal and further explanation of what the user can expect in the future allows that driver to feel confident that their paperwork will eventually be submitted properly and can otherwise have more control over what happens next.

Developers Tasks: None - this is entirely housed in the third-party app and will be constructed on their end.

Second recommendation:

Add confirmation for pending documents.

Why?

Usability Heuristic #1: Visibility of system status

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
When users know the current system status, they learn the outcome of their prior interactions and determine next steps. Predictable interactions create trust in the product as well as the brand.

• Communicate clearly to users what the system’s state is — no action with consequences to users should be taken without informing them.
• Present feedback to the user as quickly as possible (ideally, immediately).
• Build trust through open and continuous communication.

Proposed Confirmation with Queue Direction:

Currently, when a set of documents is successfully uploaded, the user is provided a confirmation screen that lets them know their scan has been submitted, along with a confirmation number. In the case where scans will be pending upload until the user is online, a similar confirmation screen will be provided to let the driver know that their documents have all been scanned and are kept safe in the queue. It also describes next steps and what the driver can expect.

Third recommendation:

Add help documentation on this and other process for this third-party app in our app's reference library.

Why?

Usability Heuristic #10: Help and documentation
It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks. Help and documentation content should be easy to search and focused on the user's task. Keep it concise, and list concrete steps that need to be carried out.

• Ensure that the help documentation is easy to search.
• Whenever possible, present the documentation in context right at the moment that the user requires it.
• List concrete steps to be carried out.

Developers Tasks: Build front-end for new help content supplied by technical writer.

The dashboard allows users to easily cancel appointments and access scheduling.

It also displays unused floats in their account and the ability to manage their account.

The calendar is scrollable to find a date quickly.

The timetable for each room is on a carousel to easily move back and forth to find a desirable time.

Selecting a time prompts a confirmation.

Finally, you can opt into reminders that not only tell users they have an upcoming float, but can also give reminders for things to bring, when to eat, etc. so they can make the most of their float. 

The profile window on the app has slowly had several fields added to it over time, to match the needed information for the CRM. Because the business prefer drivers to update information here, all CRM fields need to populate here. 

As you can see, this clutters up the screen, making it harder for drivers to find what they need with added scrolling and few breaks in the text.

Phase One Solution:

The quickest win for this situation was to group the type of information in the screen into individual accordions, allowing the user to open and see just what they need. An added benefit of this solution meant more updates to settings could be housed together - as users are more familiar with in other apps.

Phase Two Solution:

Another value-add to the profile update would be to incorporate the new gamification feature. As drivers hit certain milestones and have consistent positive accomplishments, they earn points to redeem for a variety of items. Having some of these stats in a snapshot on their profile may encourage them to explore more in the points screen.

Problem statement: My notes from Spanish class are scattered and unorganized, written in a notebook. This makes it difficult to find a particular word or conjugation in the moment.

This is important because: The more pauses I have to take and when I am unable to find the correct word to practice speaking Spanish, the more I can become frustrated or will try to use something more familiar – even if it’s not accurate.

How is success measured? I can move between groups quickly. I can go straight to a verb, in its context, and find the conjugation table quickly. 

Concept

I want all of the notes to be accessible in one place but easy to sift through and minimizing text. I will use a tab system to keep information separated but easy to switch between.

Each tab will then be segmented further to keep similar words together. 

Verbs will be listed according to their topic area. Accordions will help keep text hidden until needed.

Steps and Tasks

• Group vocabulary by category (house, food, animals, arts, etc). These groups become individual tabs.
  • Choose verbs related to each category (e.g. Comer (To Eat): Food)
  • Create Subcategories (Food: Vegetables, Meat, Breakfast, etc)
• Determine layout of tabs and subcategories
• Find images to better illustrate each section with needing text

In the past, I have created wedding and event invitations for friends. This menu concept was selected to appear in an advertisement for Microsoft Office in Martha Stewart Living Magazine, March 2011.

While working for the Kaneko-UNO Library, I created and organized the bi-annual Information Exchange conference. 

The mission of the conference was to showcase innovate ways to gather, present and disperse information effectively throughout the state. We centered topics around tech, agriculture, human services and more. 

The branding used pinpoint iconography with statewide backdrops that were updated for each conference. 

For the program, I created books that contained all the information. One year I put them on lanyards and they doubled as name tags.

The next, a local bookmaker offered to bind them.

My goals for my campaign really focused on keeping information simple and accessible. I chose the primary colors as my branding scheme, but tweaked the hues to feel a bit more modern.

The Omaha Data Science Academy asked me to update some portions of their website as well as create some graphics to showcase their certificate program.

This certification map needs to show potential students how they could take a variety of course to build on to certificates as they liked. It required including a great deal of information without it being too overwhelming, as well as easy for someone to follow.

Here are two versions:

The Inventory Module contains a variety of workflows that often overlap and therefore can be confusing to learn. I constructed a series that built from foundational knowledge and used the same sample from the beginning so learners could see how the transaction would evolve based on need.

Kwantek is an applicant tracking product that TEAM offers. When the Work Opportunity Tax Credit (WOTC) program was introduced and incorporated into the product, documentation was needed for training. 

No one in the company had experience with this program, so I became a SME and developed documentation on this workflow.

One area of training that was very important to me was having clear, succinct documentation to the field level employees. These resources need to be relevant, brief, and responsive to any language barriers. These resources should also be easily accessible in both print and on mobile devices.