FIND DIRECTORY

80%

Angular 10

95%

Adobe XD

100%

Azure DevOps

100%

508 Compliance

CUSTOM ANGULAR WEB APPLICATION:

  • Client - FDOT Turnpike
  • Contract - Epic Engineering Group
  • Date - Jun 2020 - Dec 2022 ยท 2 yrs 6 mos

This project intends to create a state wide directory of all FDOT employees, GEC consultants and staff augmentation contractors. This solution will provide an internal, one-stop shop for all staff contact information within FDOT. The user interface will feature a modern, photo-centric design. Staff attributes will expand beyond the current FDOT Staff Search through the creation of a Business Glossary and complimentary Active Directory governance.

Background: This project called FDOT Information Directory, "FIND" for short, started back in December of 2020. Currently the application went live this past December of 2022 with Phase one. This was a full time, in house designing and developing.

Team Structure: I worked as part of a small team of a UI/UX designer, a front-end developer, two back-end developers and a business analyst. I served as both the UI/UX designer and the front-end developer for this web application.

My Responsibilities: My task was to re-design the current Employee Directory application to improve the user's experience. Providing a robust modern UI experience, responsive design, and AA level accessibility for all the FDOT employees to use.

Deliverables: After several meeting with the team and the stakeholders, our team was able to successfully establish a list of deliverables for phase one of this project.

I was responsibile for the following roles on this project:

    UI/UX Design:
  • Site Research For Best Practices
  • Site Maps
  • Low Fidelity Sketches
  • Low Fidelity Adobe XD Prototype
  • Hi Fidelity Adobe XD Prototype

  • Front-End Development:
  • Coded Custom HTML,CSS,TS (Angular 10)
  • Custom Coded XY Coords (Orgchart)
  • Git backups and downloads for current local branch development
  • Azure Dev Ops for project management with 2 week sprints
  • Bootstrap 4 User Interface
  • Responsive Design (Media Queries)
  • Browser Combatibility

  • 508 Compliance / Web Standards:
  • Coded Custom HTML,CSS for 508 Compliance AA Rating (W3C)
  • Followed FDOT Web Standards for Applications
Example 1 Example 1 Example 1 Example 1


ADOBE XD PROTOTYPE LOW FIDELITY WIREFRAMES:

Example 1
Example 1

ADOBE XD PROTOTYPE HIGH FIDELITY WIREFRAMES:

Example 1

SITE EXAMPLES WITH CODE:

Example 1 Example 1 Example 1 Example 1 Example 1

SITE EXAMPLES:

Example 1
Example 1
Example 1
Example 1
Example 1
Example 1
Example 1
Example 1
Example 1
Example 1

STYLE TILE:

Example 1 Example 1 Example 1 Example 1

TOOLS OF THE TRADE:

Example 1 Example 1 Example 1

GOING THE EXTRA MILE:

Example 1 Example 1