UX + Visual Designer

Todd Rice - Presentation

For this presentation I will walk you through our high-level process for understanding User goals, UX and Visual design by using the Hum - Verizon project that is currently in the works.

 

User Personas

Personas are model users that the we create to help understand the goals, motivations, and behaviors of the people who will use the interface. The persona represents behavior patterns, helping us understand the flow of the user’s day and how the interface will fit into it.

Persona One - Daniel Clark

Daniel Clark, 35-year-old married father of two, lives near Washington D.C., in a quiet suburb. Works at the Pentagon concentrating on Manpower issues within the Marine Core. He is well liked and has obtained many connections throughout the years with the Marines. He spends a lot of time talking to others and on the phone. He prides himself in being an American and being able to devote his time working helping the Marines solve issues that matter.

Web Experience

Prior to asking for data from one of his contacts Daniel has become accustomed to searching for information on the Internet. He typically uses the Internet about 2 hours a day at both work and home. He has a computer in his family room at home and his kids use it to play games. His wife uses it to pay the bills and do shopping. Because he relies on so much information to do his job he doesn’t have time to waste sifting through enormous amounts of copy. He needs small digestible chunks that are easy to understand.

Information Needs  

  • Brief descriptions. He wants to be able to quickly scan headlines, topic areas to pick out the pieces that appear to be most important. If he finds a match he will look for more detail to ensure he is capturing the right information.
  • Clear factual information about manpower concerns and solutions utilized to affect policies.
  • Clear examples of similar issues and contact information of the experts in manpower issues.

Emotional Needs

  • Reassurance. It is important that the information he is gathering is coming from a reputable source since it will be passed along to others and his reputation is at stake.    
  • Ease-of-use. He’s a busy man who doesn’t have time for inefficiency. He needs his resource to be a timesaving, no-nonsense partner.
  • Knowledge. He needs to know as much as possible to make informed decisions regarding the various manpower issues at hand.
  • Proven. He wants to know that the information he is obtaining has been proven and or tested. He doesn’t want to waste any time if his particular issue has been covered previously.

Site Goals 

  • Find enough information or a person who can help to make decisions and move forward.

Offline Goal

  • Increase his knowledge and maintain his reputation as a problem solver.

 


Define

Data Models

Data models can facilitate interaction among the designer, the applications programmer, and the end user. A well-developed data model can even foster improved understanding of the organization for which the database design is developed. In short, data models are a communication tool.

Below is an example of a Data Model.  To begin the definition part of a project, we initially create an exemplary data model to map out the possible content pieces that might need to be used within the interface.

 

 
 
 

Flow Charts

The primary benefit of a flowchart is that it bridges the vocabulary gap that occurs between diverse groups that work together, such as between accountants and programmers. Both groups use specific jargon. A flowchart allows each to visualize a process, whether from the programmers' point of view or from the accountants' viewpoint.

Below, this flow diagram represents thoughts around the initial flow for receiving a notification and moving through app pieces to support finding participating service providers.

 
 
 

Below is a flow diagram represents initial thinking around repair maintenance and the ongoing management needed while using the app.

 
 
 

Sketching

Designing the user interface is a process. It all begins with an idea, but that idea needs user interface translation. Sketching allows you to visualize the screen-to-screen interaction so that your idea is something that’s visible and clear in user interface form. One of the biggest advantages to sketching is that it allows you to express your ideas quickly and involve others in creating the user experience. 

Below, the sketch on the left is the base-level notification and then the right represents when pressed and the possible actions that could appear. These are: Learn More, Talk to a Technician, and Remind Me Later. The later could potentially be a number of different options or simply something that says "Remind me Tomorrow". This would allow the customer to ignore the message and receive it again via their control.

 
 
 

To work through the different scenarios and possible interaction areas, we created quick sketches to represent the different screens that would be needed to move through the app. 

  1. This is an example of the existing notifications screen. This is simply just a reference to see how the customer might use this screen to access a particular vehicle alert, versus relying on the notification directly.
  2. This is an example of the vehicle alert detail screen. This screen provides details on the alert provided and description information to help inform the customer on how important it is and what they should do to possible remedy it.
  3. This is example of the screen used to locate a potential service provider. This utilizes the map control and allows the customer to scroll around the map or enter specific search criteria. It is assumed the app would utilize the customers proximity to initiate the map view.
  4. This is an example of the service provider details screen. This screen gives the customer the details surrounding the chosen service provider, including: Name, contact info, what services they offer and the option to make them your preferred provider for future uses.
  5. This is an example of the scheduling screen. Here we see a calendar control that allows the customer the ability to choose the desired date and time slot. When there are dates / times that are not available they would be grayed out. This information would be pulled directly from the service provider.
  6. This is an example of the scheduling confirmation screen. Once the customer chooses to make a reservation they will be taken to this repair confirmation screen. This screen provides details around the date and time they are to drop off the vehicle off. It also provides the ability to set a reminder on your mobile device (even though I am assuming a notification function will be part of the app itself - this was more of creating a reminder in your default calendaring app). There is also a mechanism to change the schedule if needed, which would return the customer to the previous screen.
  7. This is an example of the "My Repairs" repair management screen. Here is where you can get access to any active or completed repairs made. This would become a main navigational area within the app itself and can be accessed by the main menu.
  8. This is an example of the active repair. Here the customer can see the service provider details again and the status of their given repair. 
  9. This is an example of when the repair is complete. This screen provides the details on what the service provider did and if there is a charge and how much that charge will be. It also provides a mechanism to pay for the services rendered directly (this assumes there is payment capabilities associated with the given service provider built into the app itself).
 
 
 

Wireframe

A wireframe is a visual representation of a website showing:

  • Basic page layout
  • Structure
  • Navigational structure
  • Major components – web forms, sliders, advertising banners

It shows where design elements will go, although won’t show any finished design as we concentrate on the structure first. Wireframes help to focus the project and provide the most effective website which takes into account all our previous research. 

Below, is an example of our "polished" wireframes, identifying various screens and states needed.

 
 
 

Prototype

A prototype is a living, breathing exoskeleton for a website. It's interactive to the point that all elements can be navigated, manipulated and adjusted. The main reason behind taking the time to build an interactive prototype is simply having the ability to evaluate and work through usability issues. Since you are able to test UX in real time, you are able to see any issues that could arise or see what is missing from a page.  It allows you to nail down the UX and content pollination so when we finally complete the prototype, we are confident that the user will experience the site exactly how we/the client thinks they should. We know exactly what content will live on what page and what content will cross link between pages. We should have eliminated the prospect of surprises and set the framework to begin concentrating on design and how visuals will impact the site's visitors. It is also a HUGE asset for developers, they can see what needs to be built without any hesitation or questions.

Below, is an example of a prototype of that was created using the InVision app.

 
 
 

Visual

Mood Board

A Mood Board is a compilation of inspirational elements used by designers to flesh out ideas at the beginning of a design project.  We start by gathering adjectives, insights and desires. We analyze the visual landscape of competitors and trends, and establish the aesthetic feel of a web site.

Below, is an example of a mood board.

 
 
 

Visual Mockup

A Mockup is a scale or full-size image of a design, used for teaching, demonstration, design evaluation, promotion, and other purposes. .

The final design is visually digestible. At a quick glance, I can get information and make a decision about what I want to do next. We are HUGE believer in goal-oriented design. I want the customer get the information he or she needs at a glance and make sure everything visible is relevant and useful.