T Solutions: Navy Port Engineer Program Website Application Development
-
My Role
Product Designer / Owner
Coordinate with development team to implement a Product Design phase, revealing key product initiatives & understand user needs. Co-own the project & communicate with client to deliver a fully interactive Prototype & case-study.
-
The Client
U.S. Navy x T-Solutions
T-Solutions is a thought leader in marine engineering, process improvement, & requirements management programs. They are an agile provider of technical solutions for clients around the world & offer a renowned U.S. Navy Port Engineer Program.
-
Timeline
June 2022 - Continuing through 2023
The design phase of this product development project took place over 6 sprints employing agile methodology.
Hi-Fidelity Prototype
DEFINING THE PROBLEM.
Outdated User Interfaces & poor information hierarchy means Port Engineers, Program Support Team-members & Leaders of the Port Engineer Program website struggle to effectively navigate/locate materials, update content & collaborate with one another, which negatively impacts productivity & impedes on sharing of important knowledge.
Where can we start? How might we learn more about our users & the problems they’re facing?
USER INTERVIEWS.
We elected user interviews as the primary research method to enable characteristic decision making opportunities and then synthesized the findings into three major categories through which we could begin defining our user: Lack of collaboration resources, poor information hierarchy/organization, and low website egagement.
-
Collaboration
Important information or knowledge is being withheld or limited by lack of communications opportunities through the website. Users are forced to reveal sometimes critical information through outdated means such as word-of-mouth and calls/emails instead of an open collaborative space.
-
Organization
Even if the website contains all relevant information or materials, it lacks any organization, which often finds users confused or lost unless they specifically know what they are looking for and how to find it. There is a very low level of control over information & hwo to extract it.
-
Engagement
Aside from difficulties around access, users have little motivation to currently use the website in its state, often using bookmarked sites to navigate to important information, communicating through email or phone calls and using it more as a ‘training portal’
“All the information I need is there, but unless I know exactly where to find it or who to ask, it’s impossible to get a hold of.”
— U.S. Navy Port Engineer
Next, we placed our personas onto an experience map to look at higher level touch points & actions of the user to better understand how they behaved while interacting with certain parts of the application, and how they felt while doing so. This allowed us to begin thinking about how we might prioritize certain task flows.
TASK PRIORITIZATION.
How might we provide Port Engineers & Leaders control
over the information they require?
We created Task Flow Diagrams next to visualize our User Stories. This is a more detailed map of what actions a User would need to perform on the new website to accomplish/satisfy a User Story/Task. We created task flow diagrams to address our identified pain points & key insights.
BRINGING IT TO LIFE.
-
Now that we had a better idea of what actions a User might be making, we could shift our attention to the UI. Gathering inspiration and researching existing UI’s is a valuable step in making important design decisions that inform the new website’s capabilities.
-
We can use this inspiration to create Concept Sketches to explore what our final screens will look like, but also how it might behave.
-
We now have all the information and direction required to start creating the high fidelity screens & prototype.
The High Fidelity Wireframes were presented to the client to solicit feedback and gain alignment before moving to implmentation.
Next Steps
-
01 User Testing
We will conduct testing on all major task flows, collecting data to refine user needs & build a Sessions Output to inform Design changes.
-
02 Design Iteration
Using data from user-testing, we will adjust the designs of pages and flows to supply a greater level of support.
-
03 Continued Development
We will continue to build out wireframes for all pages & flows for the new PE Website. Data models and infrastructure will be built out in accordance to designs in 2023.
Working with the development team as well as the sales team, we mocked up a Product Roadmap to illustrate to the customer how the project might unfold to reach an MVP. The breakdown focuses on the 3 main components of the new Port Engineer Website based on our designs (Content, Community, Training) and takes a look at how much time and effort will be required per phase of work. We also highlight individual contributions from each team to showcase what processes will be involved in building up the final product. This helps the customer visualize and map out the scope of work, as well as establish a reference for costing for developing further SOW’s (Statements of Work).
The Product Roadmap for implementation phase, signed for development in early 2023.
