Redesign corporate website to have industry best CMS with ecommerce capabilites and customer portal integration.
Client
Sector
Pipeline, Transmission and distribution
Challenge
The current website does not do justice to properly convey TDW’s brand promise and highlight the depth of expertise, experience and the passion for pipelines
My Role
Lead UX Designer - Creative Discovery, Competitive Analysis, Feature Setting, IA Creation, Prototyping
Research
User Experience Assessment
TDW is looking to build a new and improved corporate website tdwilliamson.com that provides a seamless and engaging user experiences depending on the user and location. The goal here is to have an Intuitive(UX) and Consistent(UI) webpages throughout the customer journey which reflects the rationalized products offerings including the commitment to TDW's communities and their employees.
Discovery Phase
In the discovery phase we focused on identifying the target audience, customers pain points, and needs. During the discovery phase, we tested our ideas against the reality of solving problems and meeting expectations of the users.
Design Process
-
Empathize: Survey, Focus Group & Competitive Analysis.
-
Define: Research, Observe, understand & create a point of view.
-
Ideate: Brainstorm ideas good & bad and not stopping at the obvious.
-
Prototype: Wireframe, UI Screens & Prototype.
-
Test: Implementation, Usability Testing, Improvements, Outcome & Lessons.
User Personas
There are 6 key personas that I have listed out here that details their priorities, fears, expectations and their primary usage for each key features. This persona work aims to provide not only what they want to do with the website but also the means to achieve it.
-
Asset Integrity Manager
-
Design Engineer
-
Field Engineer
-
Operations Manager
-
Project Manager
-
VP Operations
-
What do they want & how do we give it to them?
High Level Information Architecture
Once we figured the feature groups and what the users will be doing within those features, we then could create the high-level Information Architecture which will provide a holistic view of how the user will interact and navigate throughout the website.
Competitive Analysis
Now that we have an approved list of key features, I was then able to put together the competitor feature matrix which highlights the key features usage in each competitor. In addition, I have shown how each of competitors handled the key features in: Finding Soluitons and Getting information. I have also listed out which prime examples can be leveraged for TDW.
Sketch Work
After listing down the main features of the app, we are then able to label and organize all the features to allow the customer to perform a specific task with a minimal number of steps.
Wireframes for Hero Flow
The key with these wireframes was to showcase how to solve for the problem of integrating the solution finder and enabling the user to filter through those solutions and then take actions.
Hero Flow Mockups
Finally, the hero flow mockups provides visually for the client the high-level focus on what user intends to do with the application. It also provides the key components that will be approved and handed over to the development team to finish out the project.
Conclusion
It was a successful launch that resulted in client appreciation!
