State of Oregon
This is a case study I did in UC Berkeley UI/UX certification course. From User Research, Sketching, and Lo to Hi-Fidelity Prototype, I was involved and collaborated with my designing classmates.
​
​
Problem
​
DMV of Oregon was a useful but cumbersome, not easily navigable website.
​
Navigation on the website did not deliver a close-to-flawless user experience, such as lack of basic online services and excessive and insufficient information for basic online services.
​
​
​
Goal
​
​
Redesigning DMV of Oregon makes the website to be more accessible and responsive web design in order to be compatible with mobile version.
My role
UI/UX Designer, Researcher, Lo-fi and Hi-fi Prototyping
Collaborate with 4 UX designers
​
Timeline
1 week / 2020​
​
Tools
Adobe Color, Adobe Illustrator, Adobe InDesign, Figma, Google Form, Google Slides, Miro, Trello
User Research
Interview/ Survey
​
Users of DMV of Oregon experienced three blockers while using the site.
​
While renewing driver license wasn't available on the site, getting information was still a headache
User Persona​
​
A persona is created based on how much wildlife living style residents in Oregon love.
​
While hiking is a big part of their lives, getting Real ID for boarding flights is very essential.
Ideate
Prioritzaton Matrix​
​
After the user interview and survey, we noticed that the website provided insufficient and inconsistent information.
Card Sorting
​
To build a better route for users to navigate, we suggested below card sorting for user experience and time saving.
Sketching and Wireframing
​
Sketching is the easiest way to show we want to improve, and wireframing allows us to visualize the idea even more.
​
​
Mobile version
Web version
Prototype
Lofi-Prototyping- Mobile
Based on our testing, we needed our users to easily access common DMV tasks
Easily schedule DMV appointments
Real ID should be at the forefront, due to upcoming laws around it
Effortlessly make payments from the homepage
Lofi-Prototyping- Web
Our initial design lacked imagery
Some buttons on the main navigation bar had text that was too long to fit nicely
The cards are supposed to be clickable, but they don’t look like obvious calls to action
Style Guide
​
The choices of color and typeface in the style guide are still based on the original site.
We would like users to feel comfortable using the website with ease, without having big transition like accessing a different website.
​
​
Five Second Test
​
The Five Second Test was conducted for a quick understanding of the overall impression by users.
​
​
​​
Final Web Prototype
​
I modified the search bar and indicated what users could search for
​
I added choices of languages at the upper right corner
​
​​
Final Mobile Prototype
​
Information cards became clickable elements for additional links
​
Navigation bar is now accessible through a hamburger menu
​
Call to action was removed due to space constraint
​
The footer content was adjusted from double column to single column
​
​
Conclusion
​
Designing navigation that works for responsive design
​
Designing a website is less concerned with spacing but takes more time to research for content and implement it
​
What's Next
​
Continue working on the website that includes all workflows
​
Develop more micro-actions that are inviting to users
​
​