Responsive Web Design
A new branding and responsive website prototype for the Community Liaison Office, run by the US Department of State.
"For more than 30 years, the Community Liaison Office (CLO) program has provided support to U.S. government employees and family members who are assigned to American embassies and consulates abroad. The CLO office is among the first points of contact for newly assigned employees arriving to their new overseas post. CLO provides pre-arrival information, orientation, and assistance with settling in to their new home."
CONCEPT
This website prototype is for the Community Liaison Office, which is run by the Family Liaison Office at the US Department of State. This prototype is a new website design that will create a secure and invaluable resource for all US Department of State families as well as other agencies and military moving and living overseas while working abroad at US Embassies and Consulates.
This project will also be a re-branding of the Family Liaison Office and Community Liaison's Office image, will include training resources for Community Liaison Officers worldwide, and will be a template that can be used for over 270 Embassies and Consulates around the world.
Currently, there is no website prototype for this information provided by the CLO. There is however an intranet site, which is an internal US Department of State system. Unfortunately, this site is not available to spouses, partners or members of household of employees nor it is it available to other outside agencies until their arrival at post. Once arrived at post, family access is limited and the information they receive is received solely by the CLO office.
This design is a brief introduction to solve the above problems, and will be a SECURE way to communicate with those families before, during and after their move. This website will be their new Home Away From Home.
Overview
Role: UX / UI Designer
Project Goal: Design a secure website template for the Community Liaison Office to be used at over 270 embassies and consulates worldwide that will help employees and families prepare, and adjust to living in their new home abroad.
Challenges: The true challenge of creating this site is the breadth of information that this site will need to encompass. Although I will only touch on one aspect of this website through this prototype, the goal is to get enough research to plan and execute a complete website at a later time.
Designing a site that will encompass every aspect of the Community Liaison Officer's job at post will be time intensive; therefore creating a longer timeline than usual. Information will need to remain secure and will require a login in order to be accessed. Additionally, Community Liaison Officers at over 270 posts will need additional training on uploading and adding new information to a brand new database. This will also require additional time to acquire all of the pertinent information, have it loaded to the site in a timely manner and ready for a full world-wide launch.
RESEARCH
Competitive Analysis
By researching similar internal government sites, travel, and community websites, I was able to get a better idea of how they communicated their information. Some were more informative and others communicated through pictures. I wanted to focus on both.
Challenge
The internal government and/or password protected sites needed the most improvement. The style is lacking, the convenience and ease of finding information is missing. Overall, there is entirely too much information spread upon entirely too many different outlets. To conduct my research productively, I had to choose one area that was easy to use and did not have security constraints. My overall goal for this portion of the website was based on finding places to go in the area for food and drinks and exploring around the new country the user would be now living in as they worked overseas at an embassy or consulate.
Survey
Objective: Find out what information would be most valuable to a user when using the new Community Liaison website. This information would need to be broad, so I based the data on demographics: age, sex, & working in the military or government (and duration).
Findings: Survey was taken with 24 participants ages 21 - 50.
-
75% were married, 21% were married without kids at post, and 4% were single.
-
58% had lived overseas before and 41% this was their first post.
The items most important to them when planning to search in this website:
-
School Information
-
Employment Opportunities
-
Places to Travel.
When searching for information about the new place you were going to live, they chose many different options. The three main options were:
-
Reaching out to friends
-
Using Google
-
Searching Facebook
Other search options used: Tales mag, CLO Intranet Site, Real Post Reports, US Embassy Pages, and Books
The items that would have been more helpful, but were currently not available:
-
Info Packets about schools
-
Local Doctor Information
-
What Items are good to ship and not to
ship and DPO restrictions
Start up information when new to post:
-
Employee Association
-
Driving Rules
-
What is available on Embassy compound
-
Employment Information
-
Places To Travel
-
What do sponsors do?
Katy B.
"A vehicle would have been helpful to utilize before our personal vehicle arrived. I needed more accurate information for adjusting to life at post."
Sarah L.
"Housing and Schools have always been extremely important. We’ve always been very happy with the information the CLO Offices have provided us. Panamá was the most difficult as there were several schools to choose from. A preliminary visit would have helped this situation."
John C.
"More info will always be good. A database with information and key contacts like cell phone and cable Providers to make it easy for the hiring of these services would be good. The CLO office is vital to newcomers."
User Personas
Click on each persona for full story
Findings: Gathering this information did not come easily. Each person was very different in their opinions, wants and needs. It was very dependent on age, where they are in life, if they have kids, are single, married, or looking for a partner. A common theme did persist, but it wasn't the easiest to find due to the many different variations in answers. My research took longer that I had anticipated and it took me longer to clarify wants/needs.
By creating not just one, but three user personas, I was able to focus on each of their unique perspectives. It was important to factor in their ages, if they were employees with the military or government, or had significant others and if they also worked or had families. Each and every response to the surveys, any comments and notes, as well as any one on one interviews were all carefully taken into consideration to get the most information of each of these three personas.
INFORMATION ARCHITECTURE
Due to the many options needed to ensure any information a newcomer (person who had just arrived to their new overseas assignment) needed or wanted to view was available, a sitemap was created. I tried to make this as easy as possible to find and navigate. Even though the ultimate goal of this project is to help a user search for popular food and drink locations in their new country, making sure all searchable areas were covered was important. I also wanted to get the initial feedback from users for their overall feel of the site for future iterations and additional scenarios. Seeing what "would be" available is important when they start their navigating experience and I didnt want to miss out on any aspect of their searching efforts and future needs.
A User flow was created based on the users above and their needs in developing the site. To simplify the initial design, I chose two paths: Informative and Visual.
SKETCHING
AND WIREFRAMING
Low fidelity wireframes were created and tested with 8 key users below, all from ages 32 - 65, with those that work at the US government, those that are spouses or partners of those that work for the US government, military, retired military, single and family members. The feedback was well received in all areas, with 90% overall satisfaction in the site itself, layout, and design. There was also suggested improvements in alignment, color, size of photos, added features and suggestions for an easier navigation. Visualizing and drawing out the structure helped me figure out the functionality of certain components.
BRANDING & UI DESIGN
Logo Re-Design
I started with the re-branding of the Family Liaison Office (FLO) Logo Below. A simple logo design was made to keep in the same line as the U.S. Department of State branding guidelines. My goal was to create a historical yet modern logo, communicate as many brand attributes and focus on a conceptual design. I wanted the logo to be scalable—one that allows for growth, is easy to work with, and easily visible when scaled down.
Challenge: Regarding US government rules and regulations, it may be difficult to use an official logo inside an additional logo; however, since the Family Liaison Office is part of the US Department of State, I wanted to include its relationship as it is sometimes forgotten and felt this could be a good reminder for all those using the FLO services, if government or other that they are connected and those resourses are there for them as well.
Old
New
STYLE GUIDES
I wanted the Community Liaison Office site to be a little more fun and colorful than the original page, but I still kept with the continued design, using the same fonts and colors from the original US State Department website above consistent with their current branding theme.
Photos
USABILITY TESTING
An affinity map was created for a visual representation of the feedback from users that helped develop the final prototype below.
NEXT STEPS:
-
Add a softer light to background
-
Work on the menu bar for better clarification
-
Re-define logo message
-
Create larger images with more spacing
FINAL PRODUCT
After user testing was complete through Invision App, I was able to summarize the results, make any critical changes and tweak the design for the below final iterations. Backgrounds, additional icons, larger images and map details were added based on the user feedback.
What's next ...
All users were beyond pleased with the changes and were eager to see more. Personally, I wish I would have spent more time on more critical areas of need such as schools, but knew I would not get the broad amount of feedback for my initial prototype within my current community and team. With continued research and efforts, I will work on additional pages and eventually propose the new complete design (from original sitemap) to the US Department of State. For now, the goal will be to complete the following:
-
Create additional page and add to final design
-
Creating Video Tutorials for Training purposes
-
Improve current Iterations
-
Work on improved and secure social media channels
More Work...
