The City of Boston™

BIPOC Certification Website Update/Redesign (Case Study)

Click to enlarge

The City of Boston | Boston.gov
Timeline: 4-week Team Scrum Model
Delivery : Responsive Website & Mobile App
Tools : Figma, Optimal Workshop, FigJam, Google Suite, Maze.co, User Interviews, Zoom Video Conference

Click below to enlarge

In early 2023; I was contracted as part of a group of (4) designers to complete a scrum-based redesign of the City of Boston’s BIPOC Certification and Application process.

My role involved leading the projects data-infrastructure systems and implementation, as well as visual design. Team-based leadership tasks involved holding multiple, direct-client facing communication meetings to envision, set collective goals, set tangible and measurable points of success; and testing increased usability touch-points.

This project involved: a legacy client, complex data infrastructure and storage, real-time user data, stakeholder meetings and updates, user testing, client assessments, and finalized prototype of an updated client mobile application and website that improves user experiences and increases overall completed certification.

Legacy Client & Complexity

The City of Boston’s BIPOC Certification Office involved 12 different stakeholders physically located in different locations around the Boston Metro area – many of these included teams or individuals that have never worked together; or never even spoke to one another before this project. As a group, we quickly scrum built for our client an in-depth daily schedule that spanned the entire 4-week timeframe. The schedule included all collective goals and roadmap points during the design schedule. The schedule was shared with all stakeholders, but also required acknowledgement from all parties involved to ensure smooth information sharing and ability to make impactful changes to the project’s structure quickly and with conviction. My personalized role and contributions here in this design stage included understanding where the BIPOC form data storage was located, identify why the data was being stored or not stored for certain users based on certain user interface interaction criteria during a user experience, and finally advise what the best options where for the client to move forward with a comprehensive all-in-one solution to update, change, store, and then access data and user information. I was able to complete this task by integrating (3) complex data systems together in Drupal, Knack Form Builder, and the current City of Boston Website. These complex data systems were integrated directly into a singular mobile application backend controlled completely by the City of Boston BIPOC Team.

BIPOC Eligible & Affinity Maps

Click to enlarge

Our UX Team conducted multiple scrum-based interviews with potential, current, and past BIPOC certified business owners located in/around the Boston area. The interviews were completed within the second week of the overall project and design process and were conducted by phone, zoom.com, and by email. Our UX Team identified quickly that our legacy client had no direct ways to speak with current BIPOC approved, or even potential business leaders to gain insights on user flows and experiences. We set a high standard on the information provided back to our legacy client. Above is a snapshot of the compiled City of Boston BIPOC affinity-map created for our client. The affinity map above displays main categories, problematic areas or areas of concern, as well as displays multiple wants and needs, thoughts and experiences, or requests of over (30) current, past, or uncompleted BIPOC eligible business owners. Over (100)+ BIPOC eligible business owners were contacted for direct users insights; as well as to complete our user experience interview process. The insights gained here in the above interview and affinity mapping processes created an 82% increase or (8.2 of 10) overall users completing the BIPOC certification application upon the finalized prototypes delivered to the client.

Data Storage & Infrastructure

City of Boston | Screen Complexity
City of Boston | Prototype Complexity

Our UX Team was able to conclude a few major points while conducting and finalizing interviews and extensive qualitative research with both the City of Boston BIPOC Team, as well as eligible BIPOC business owners. These problem areas included but were not limited to:

1) The City of Boston BIPOC Teams were unaware of where or how their data and storage was organized and integrated.

2) The City of Boston BIPOC Teams were unaware of where or how their data and storage was organized and integrated.

3) The City of Boston BIPOC (Data Analytics) Team was aware that the Knack Form Builder being used as the main certification online form was outdated and created an incomplete experience for users trying to complete BIPOC certification or even gain more information on the overall BIPOC certification process.

4) The City of Boston’s BIPOC data was incomplete and outdated. The City of Boston BIPOC Teams were aware that many of the City of Boston’s data servers, and CRM-based data was unable to be used to improve the overall user experience.

5) Our UX Team was able to conclude there were highly-problematic, well defined, tenure or time-based issues also considered today as “job politics”. These issues were embedded within each stakeholder department we interviewed. This self-induced problem set was preventing collaboration between multiple parties in all stakeholder departments.

5a.) Multiple additional issues. (listed in detailed case study) – Available upon request. e-mail: paul@paullawlor.com

Our UX Team addressed each one of these problems with a solution set that matched the overall problem to a real-world set of steps to fix the problems. First, we conducted our research to help make our legacy client aware of exactly how their data and workflows are currently stored on their servers and databases. This was directly addressed by our team-leader (Xin) and I (Paul), acknowledging the major roles that both Drupal.org, and Knack.com (Knack Form Builder) was being negatively utilized in the current user flows and workflows. The persistent poor user experience users were reporting consistently during our research we linked directly back to information architecture. We quickly were able to make our client aware of the risks of two separate systems that did not integrate seamlessly with one another. We designed a complete website and application solution hosted and built directly on the servers of the City of Boston’s data servers, featured by highly-reliable server uptimes and stable, fast BIPOC form loads, as well as the overall updated landing page and dashboards for all new and returning users, and privatized client backend dashboards.

Design Studio & Sketching

Next, our UX Team conducted a design studio that included all the major stakeholders in the City of Boston BIPOC Certifications Teams. This specific design studio was directed and moderated by me (Paul), and was conducted to have the major stakeholders hand-draw specific user-flow ideas for (6) different parts of the user-flow experience. These user-flow experiences included: the Landing Page, Welcome Screens for Desktop Website and Mobile Application, Drop-down menus vs. Input Box options, and Finalized and Submitted Application and attached celebratory visual communication. The design studio was a great success, with all participants fully-engaged and submitting sketches by-hand for over 90 minutes. This design studio was conducted completely online via Zoom, with (11) participants active in the session.

City of Boston – Sketches Available Upon Request. Request. e-mail: paul@paullawlor.com

Personal By-Hand Sketches Completed – 22

Group By-Hand Sketches Completed – 103

Wireframe Designs

Click below to enlarge

Check Your Eligibility Page | City of Boston BIPOC
Eligibility Acceptance Page | City of Boston BIPOC
Example: Completed design of visual communication experience.

Upon completion of the Design Studio our UX Team immediately took what we learned throughout the design process and started to design the low-fidelity wireframes for our updated BIPOC certification user-flow experiences in Figma. My personalized role was to complete the “Finalized and Submitted Application” pages for both our Desktop Website (1), Mobile Application (2), as well as to lead overall design of the attached celebratory visual communication features (3). Our UX Team completed low-fidelity and mid-fidelity wireframes as a collective and collaborative group inside the Figma platform. These wireframes included all collected researched information, data infrastructure systems and data hierarchy, group-selected sketches and wireframes, and finalized and updated experiential user-flows for both frontend and backend experiences.

Prototypes

Click below to enlarge

City of Boston | Prototype Complexity

Delivery & Results

The UX Team is proud to have completed this case-study and prototype delivery with many very important metrics. These metrics include:

  1. 100% On-Time delivery of (2) highly-responsive, high-fidelity working prototype products. These products are the a.) City of Boston BIPOC Certification Mobile Application and the b.) City of Boston BIPOC Certification Desktop Website c.) Multiple Stakeholder meeting updates and an in-depth written Research Case Study.
  2. Overall client satisfaction for the City of Boston BIPOC Team was surveyed at 99.6% overall, with all major stakeholders selecting to immediately continue (2) additional projects with our UX Team involving additional in-depth changes to additional user experiences and internal workflows.
  3. Successful 47-minute digital display presentation presented by the entire UX Team directly to the City of Boston’s major BIPOC stakeholders. The digital presentation was followed directly by a collaborative, successful 1-hour follow-up session held directly between the stakeholders and UX Team. This was an opportunity for the client to direct specific or direct questioning towards members of our UX Team. Both parties engaged in a very successful and collaborative way.
(2) Products – (1) BIPOC Mobile Application and (1) BIPOC Desktop Application Website – Complete
Overall Delivered Project: 100 % (On-Time)
Overall Project Length: 4-week Scrum-based
Defined Client Goals Met: 98.7%
Overall Client Satisfaction: 99.6%

Project Finished.


Gates of the Arctic

Highly-Responsive Mobile Application (Case Study)

Click to enlarge

Gates of the Arctic | U.S National Park
Timeline: 3-Week Team Scrum Model
Delivery: Highly-Responsive Mobile Application
Tools: Figma, Optimal Workshop, Google Suite, Maze.co, User Interviews, Qualitative & Quantitative Research Method

Click below to enlarge

Gates of the Arctic is a highly-responsive mobile application developed in late 2022. Gates of the Arctic is a case study on developing a robust, highly-responsive mobile application for users during wilderness exploration inside an extremely remote location inside a United States National Park.

In Q2 2023; I was contracted as part of a group of (3) designers to complete a 3-week scrum-based buildout of a highly-responsive camping-focused lifestyle and wilderness living application; welcome to the Gates of the Arctic. My role involved leading the projects visual design, color hierarchy, and user-centered qualitative research processes.This project involved: a collaborative remote work environment – as the physical location (Alaska) was unreachable by our UX Team, visualization and high-fidelity design of multiple ideas from concept, into a fully-working prototype, including product blueprint and display inside the Gates of the Arctic mobile application.

User Interviews, Comparative Features & Analysis

GOTA User Interviews
GOTA Comparative Analysis
GOTA Feature Inventory

Our UX Team conducted (19) scrum-based interviews with potential National Park attendees or park visitors. These interviews were completed within the first week of the overall project scope. These interviews were conducted via phone, Zoom Video Call, and by email. The UX Team was able to identify a few main themes that were uniquely identifiable to this project and they are: I do not want to die in the wild (1), I do not want to get lost in remote wilderness without a map and compass (2), 4 out of 5 camping guests and/or park visitors will leave campsites in better condition than when they arrived (3), Wild animal, Bear, and wildfire/campfire data is critical information for all guests and campers during remote wilderness events and stays (4), and most park visitors complain about lack of crucial United States National Park data/information before their arrival to remote locations in Alaska (5). Above is the compiled Gates of the Arctic qualitative research data (1), as well as comparative and overall feature lists for industry-wide competitors or industry-alike businesses (2). All data collected above is directly from potential or past United States National Park visitors and/or remote wilderness campers.

Affinity Mapping

Click above to enlarge

The UX Team concluded that the Affinity Mapping process would help solidify the overall data hierarchy, as well as important life-saving features that were to be built into the Gates of the Arctic mobile application. These potential life-saving and important feature list included: a wild animal and/or bear emergency beacon (1) remote internet ability and/or connectivity hotspots are highly-recommended by travel guides (2), maps and weather forecasts are essential/required tools during wilderness living events (3), wilderness experts as park guides during all remote park exploration is highly-recommended for all non-wilderness experts (4). all potential park visitors indicated their main research method for a remote National Park visit, would be online or via phone call to National Park service before arrival (5).

Sketching

Gates of the ArcticSketches Available Upon Request. Request e-mail: paul@paullawlor.com

Personal, By-Hand Sketches Completed – 28

Group, By-Hand Sketches Completed – 82

Wireframe Design

The UX Team took all the hand-drawn sketches and started to design the mid-fidelity wireframes in Figma (collaborative). My personal role was to complete and lead the product blueprint integration into the design of the mobile application. These wireframes included all collected, highly-detailed qualitative research information, visual button details and button information hierarchy, emergency beacon integration, and real-time weather reports via our Gates of the Arctic mobile application. These wireframe integration features included the 10-day weather forecast, emergency beacon, park maps, and more. These feature options can be seen in a completed state in the prototype section (below).

Prototype

Click below to enlarge

Delivery & Results

The UX Team completed the Gates of the Arctic Case Study and complete prototype delivery with important positive metrics:

  1. 100% On-Time delivery of (1) highly-responsive, high-fidelity, mobile application prototype product. This product is the Gates of the Arctic Mobile Application.
  2. The UX Team was able to elegantly place an integrated “Emergency” button and associated user flow experiences complete with self-locating GPS features, campfire/camp abandonment, and wild animal attack option sets and solutions.
  3. (10)-day forecast-style weather report from the National Weather Service; including real-time data from all United States National Parks, as well as data from guests/visitors that are experiencing inclement weather, wild animal encounters, or might need potential emergency rescue from the National Parks.
(1) Product – Highly Responsive Mobile Application – Complete
Overall Delivered Project: 100 % (On-Time)
Overall Project Length: 3-week Scrum-based
Defined Client Goals Met: 99.76%

Project Finished.