Responsive Design: Department of Labor
Our mission is to provide a fluid and efficient user interface through clear organization and condensed information for easy navigation on a government website
Timeline
4 weeks
Role
Created visual design and layout of website using UI elements
Deliverables
UI style guide, proto persona, sketches and wireframes, information architecture/site map, responsive high-fidelity mock ups
Tools
Adobe XD, InVision
Preface
What is the DoL?
The Department of Labor not only provides development and fostering of the welfare of wage earners, job seekers, and retirees of the United States, but it also strives for the improvement of working conditions, profitable employment, and work-related benefits and rights.
Proto Persona
I wanted to begin this project with building a proto persona, which is based on the stakeholder's assumptions on what the target user may look like especially in terms of their needs and behaviors. The proto persona is what we think our users may be like and I think it set a good footing for how I approached this project.
Research: Analyzing State of Current Website
Through conducting a usability test, I had users complete three tasks on the current website to test how easy it was to navigate on the site and did a test analysis. I also did redline annotations to identify how the current structure of the website is set up as well. With the help of another designer, we conducted a card sorting activity in order to document the existing navigation atoms. The goal was to familiarize ourselves with how the website is currently structured so we could minimize the abundance of information.
Current Website
Usability Test
Usability Test Results Analysis
Test Results Analysis: I found out that many links were difficult to find and other links were not expected to be found in the place the users found them in. Users had to look thoroughly to find what the task told them to do.
Redline Annotations
Redline Annotations: A snippet of the redlining I did indicating what could be fixed and improved on
Card Sorting
Analysis: The card sorting assisted in listing out the website's current navigation state and gave us the opportunity to see where gaps and repetitive information were present.
Assessment
Little white space, information overload, repetitive links/information, mega navigation that was cluttered and sometimes not in alphabetical order, which made finding information confusing. The overall Department of Labor page was quite disengaging in the sense that it didn't seem like a welcoming page, very bland and boring for a first time user.
New Visuals and Website Structure
My Approach
The DoL website was splattered with dense information and crammed into the white space. Images and articles would be so close to one another that it would be hard to tell differing articles apart and there were two many articles present in the midst of other information that was in the vision of the user. Overall, there were too many molecules the user had to focus on and the eye wanders instead of focusing in on an atom, etc. The general experience on the website felt disconnecting without any hint of human warmth. To solve these issues, I planned to incorporate a whole new color palette that would pop out to the user and create a new site map to structure the site in a way that would not only be aesthetically pleasing but also functionally efficient and comprehensive.
New Site Map
Using the card sorting activity results, I discovered like items that could be grouped together and I found new labels and categories for these grouped items that might make discoverability easier on users. Through combining some categories and getting rid of redundant ones, I built a site map that allowed for more structure.
Site Map: Well-built information architecture can increase the user's flow on the DoL website
Redesign: UI Elements
Color Palette
We chose specific colors to create visual content that feels less dull to the user and more preppy or energetic in order to engage and connect with the user better. We wanted to stray away from the mundane blue and white website that seems more emotionally detached and more professional that may intimidate the user from exploring an already complicated website. The energetic colors and brighter blue makes browsing the site more lighthearted and less daunting in terms of the user reaching their goal or certain destination.
Typography
Raleway creates a clean, minimalistic, and educational experience that is legible for all types of users.
Buttons
Use Raleway in both Primary and Secondary Navigation buttons.
Style Tile - Additional UI Elements
Style Tile: Includes iconography to represent navigation buttons through mobile access, how buttons look like on the website, patterns I included in the visual design to blend in with the more lighthearted theme I created, and photography images that represent diversity, colorfulness, and realism that a majority of users may be able to relate to better
Style Guide - Web and Mobile
Style Guide: Another summary of our mobile and web UI elements and adds in some elements from the Style Tile as well. We created the Style Guide to present a more detailed version of what atoms and molecules we used for our redesign and it serves as a reference guide for the team so that we stay consistent while iterating the design. In contrast, the Style Tile is more of a mood board to visually see what ideas we came up with and it's easy to see our ideas while presenting these ideas to the potential client as well.
Responsive: Building the Design Process
Low Fidelity Prototyping
Low Fidelity Desktop/Website Prototype: Considered structuring of website to make visibility for user less stressful, eliminated links that don't pertain to user needs and goals, organized navigation in alphabetical order to be consistent, overall condensing of site
Low Fidelity Mobile Prototype: Heavily altered structure so user doesn't have to look at multiple stimuli on one screen at one time, made it so that there's one main focus on the screen at all times
User Testing: Menu Navigation
WEBSITE
I ended up making the high-fidelity version of our website from our low-fidelity prototype and conducted 5-second in-person user tests with three participants. I received general feedback on how they felt about our website and our spin on the color palette still made users feel like the site was trustworthy while also being clean and minimalistic. Other feedback included making text in the menu navigation larger and a darker color to be more legible.
Website Navigation Prototype
High-fidelity Website Prototype: Based on user feedback and tests, I iterated on the prototype and made a new option for what the menu navigation could look like.
An image of our user testing our website prototype.
InVision (Prototype) Links
MOBILE
We conducted 7 more in-person user tests and most participants were happy with the high-fidelity website and mobile versions. One pain point we came across was how some users found the subscribe button tedious because they had to scroll all the way down the page. Therefore, we made minor adjustments to fix this issue on both website and mobile versions.
High-fidelity Mobile Prototype: From user tests, I added a scroll option as a one-click tap button to make navigation easier for the user.
InVision (Iterated Version) Links
MOBILE*: Essentially the same flow - the only screen I changed was the home page by adding the "Tap to scroll all the way down/up" feature (as shown above) to increase user efficiency.
Reflection
Effective Minimizing of Information. It was a challenge to try and condense unnecessary information and links on the original website because we needed to decide what the main goal of the site was and from there, we had to eliminate atoms and molecules (chunks of information).
Creating Responsive Design. I have learned that more and more digital content is being viewed on different types of devices, which means different screen sizes. It was a lesson learned to be flexible and fluid when coming up with a design structure because ultimately, that structure will have to work not only on the desktop web version, but also on mobile, iPads, tablets, etc.
Consistency of Design. Finding a color palette was quite difficult because users are used to seeing blues on government websites to indicate a sense of professionalism and trustworthiness. Because the current colors are lackluster, we came up with a burgundy and bright palette that portrays a sense of sophistication and spirit. To make the site even more fun and engaging for the user, I included colorful patterns in order to energize the user and keep them on the site while making their goals easy to accomplish through dispensing an immense number of links that shadowed the information and links that actually mattered. Furthermore, applying a consistent structure and format for the whole site was difficult because I had to consider white space, gutters, and overall content structure because it heavily impacts the user's sight and decision to stay on the site or leave.
