Role
UX Design, User Research, Visual Design, Usability Testing
Team
Individual Project
Tools
Figma, Adobe Illustrator, Adobe Photoshop, Adobe After Effects, Adobe Premiere, Rhino, V-ray
Timeline
Aug 2021 - Oct 2021
Oregon DMV web Redesign
Redesigning the Real ID appointment process of Oregon DMV
At present, Oregon DMV's Real ID appointment has many problems and inconveniences, such as lack of design, difficult to find appointment channels, and too complicated workflow. This redesign of Mobile web and PC web solves these problems one by one, and builds a convenient, efficient and pleasant appointment process for users.
Policy Background
On May 3, 2023, U.S. travelers must be REAL ID compliant to board domestic flights and access certain federal facilities, so it is imminent for users to quickly and conveniently complete the Real ID application.
The Oregon Department of Transportation is an award-winning organization, more than 4,500 employees strong. Together, they provide a safe and reliable multimodal transportation system that connects people and helps Oregon's communities and economy thrive.
In order to give users a convenient and efficient booking experience, I redesigned the interface and operation process of the official web based on the current problems.
.png)
After interviews and investigations, most users are dissatisfied with the current Oregon DMV Real ID Appointment process, such as messy information and complicated procedures.
Heuristic Test
In order to have a clearer understanding of the current appointment process of Oregon DMV, various aspects of the current web have been evaluated and fed back through the heuristic test model for the next step. Through the summary, the following issues are drawn:
1. Chaotic workflow organization results users hard to find the accurate appointment position.
2. Vague information classification causes users have difficulty to identify target information quickly.
3. Crowded page layout and insufficient design details.
Interview
I interviewed a number of users who have made appointments on the DMV official website to provide in-depth feedback and information statistics on current problems. Through the communication with users and the classification of specific information, the directions and goals of the next design are more clarified.
Empathy Map
Through empathy map, you can better understand the expressions, actions, feelings and thoughts of users, so as to further understand the current problems of web design. At the same time, by summarizing Pain and Gain, the current advantages and disadvantages can be more clearly defined.
Definition
Through the definition and summary of problems, challenges, goals, and solutions, so as to more accurately solve the pain points of users, and propose the following specific solutions:
1. Modify the workflow according to the feedback form users.
2. Categorize information according to different levels and types.
3. Modify the position and mode according to the visual needs.
4. Adjust font size and type, add illustrations.
In order for users to efficiently complete the appointment, on the one hand, the information and user flow must be rearranged, and on the other hand, the interface must be redesigned.
Iteration Cycle
Continuously optimizing and modifying the design results through self-iteration can think about the current problems in more detail, and better link the business goal and the user goal. And in this way, I can avoid ignoring the necessary pain points, and better meet the needs of users.
Findings:
1. The user flow should be simplified as much as possible to avoid duplication.
2. Information classification should be clearer to avoid overlap.
3. Need to optimize the design of illustrations, etc., to prevent the page from appearing too crowded.
Solutions:
1. User flow should provide users with a clear and specific workflow based on the answer to questionnaire provided in the precaution.
2. Reorganize the information according to the type of information and user needs.
3. Make unified changes to the illustrations and buttons, including colors and sizes.
User Flow Map
By reorganizing the user flow, I have a clearer judgment on the appointment process. And based on the user interview information, the workflow has been modified and optimized many times, and finally the steps of Homepage, Checklist, Questionnaire, Information, Appointment and Confirmation have been determined.
Wireframe Sketches
Determine the connection between the specific design intention of the interface and the workflow by drawing wireframe sketches. At the same time, it preliminarily determines the layout of the functional partitions of the interface and the selection of function buttons, as well as the insertion position of illustrations.
Findings:
1. Too many user operation buttons and function blocks can easily appear crowded.
2. The forward and backward of the interface are easily confused because of too many steps.
3. The list information of the Menu function is inconsistent with user requirements during operation.
Solutions:
1. The size of interface buttons and fonts are constantly compared and debugged to optimize the layout.
2. The forward and backward operations of the user flow need to be adjusted based on the appointment process and the user’s psychological feelings.
3. According to user needs, set different menus on the DMV Home Page and Real ID Appointment interface.
Wireframes
Perform user testing through the mid-fidelity wireframes, and modify and optimize the design based on suggestions. Through multiple critiques, the following information and feedback was obtained:
1. Important to Know requires a separate page to explain, to prevent users from missing information.
2. When choosing an appointment location, avoid searching with initial letters, and use a map instead.
3. When choosing an appointment time, use legends to replace the frame prompts, allowing users to determine the time more conveniently .
Illustrations
By drawing illustrations to increase the interactivity and interest of the page, based on the attributes of the interface and user feedback, I first drew the sketch, and then further deepened the details, and took into account the following design details:
1. Draw a simple character image to represent the specific appointment program.
2. Unify color matching and filling methods to ensure the harmony and unity of the interface.
3. The hovering color change function is designed on PC web to emphasize the position of the interface function and increase the interaction with the user.
Sketches
Deliverables
Color Changes
Here are prototypes! The key procedures are simplified and reorganized, including Homepage, Important to Know, Questions, Information, Appointment and Confirmation.
Your Home Page
Home Page has reorganized information according to user needs, and is divided into four parts: Online Services, Get Real ID, Go Paperless and Vehicles, each part contains different functions. At the same time, the Home Page has set up menus and notifications to facilitate users to quickly navigate and learn about the latest news.
Important to Know
Important to Know provides users with a checklist, which is convenient for checking the materials to be prepared, and provides answers to some common questions and notices of important information.
Fill in the Questions
Questions before the appointment are very important for the user to efficiently complete the appointment. A few short questions are used to determine the user’s needs and the information that needs to be filled in. Different answers will have different information filling requirements, so as to save the user’s appointment time.
Your Information
The input of information is a very important step for making an appointment, so in this step, the function of incorrect information prompt is designed. When the information entered by the user does not meet the requirements, such as the number of digits in the phone number and the zip code number do not match the correct format, it will remind the user to make changes according to the prompts.
Make an Appointment
The appointment procedure includes several steps in choosing an office location and determining the date and time of arrival. The location is determined by a map or zip code, which is convenient for users to select a location. The calendar function is added to the selection of the date, allowing users to quickly filter information.
Please Confirm
After completing all the user flows of the appointment, a page for confirming the information will pop up at the end to allow the user to check the appointment information to avoid problems. At the same time, there is finally an interface of congratulations to remind the user that the Real ID appointment has been completed.
User feedback is the best way to obtain optimization suggestions. Through summary, more user-friendly modifications are needed, such as the interfaces of location and time.
User Feedback
User Name: Ming Gong
Age: 23
Occupation: Student - No car
Feedback:
1. There are some drawbacks to the search by initials. For example, I don’t know how many offices there are near me and other offices except my location.
2. The calendar is not very convenient to use. I need to open it one by one to check which day I can make an appointment and which day is unavailable. It will be more convenient to switch to legends.
User Name: Garrison Zhu
Age: 25
Occupation: Student - Have a car
Feedback:
1. The function buttons of the homepage can be smaller.
Important to Know requires a separate page to remind users.
2. The type and size of the font can be unified.
3. Can add appointment shortcuts on Google search interface.
4. After the final appointment is completed, an email can be sent to the user, including the appointment information.
Here are some specific modifications. Mainly optimize the interface font style and size, the method of information notification, and the selection method of location and date.
Home Page
Before
The font types of Home Page are not uniform. The button next to the Menu is too large, and the title of the main function option is too small.
After
Reduced the types of font, and the button next to the menu was minified, and amplified the title size of the main functional interface.
Important to Konw
Before
Important to Know is placed at the top of the page. Many users will not click to read it, and will lose important information.
After
Set up a separate page for Important to Know, and refine the content and display mode of the checklist.
Location
Before
When choosing a location, searching with initials will confuse users, because some users don’t want to choose an office locally or don’t know the name of a nearby area, so that they can’t search.
After
Use map and zip code search instead, so that users can choose according to the map display. At the same time, users can choose to enter the zip code, so that users can quickly locate the office location.
Date & Time
Before
When choosing a date, the method of clicking on the prompt is sometimes annoying for the users, because it needs to be clicked one by one.
After
Use colored calendars instead. Different colors represent different attributes. Legends are located below the calendar so that users can quickly filter information.
A complete design, in addition to the designer's efforts, the user feedback and design iterations will also have a vital impact on the final deliverable.
Reflections
The redesign of the Oregon DMV functional interface needs to pay attention to practicability and convenience, so in this design, in addition to page illustrations and buttons, more attention is paid to the sorting and division of user flow and appointment procedures to optimize current problems.