Hardware Tool Folder Responsive Project

ThymeleafWeb ComponentsStencilJSTypescriptJSXSASSLighthouse
Responsive

This project involved multiple departments to restructure and apply responsive design to TI's hardware pages to improve the customer experience as well as the performance of the page.

With the Responsive Hardware project, I was one of the front-end developers bringing the comps to development factoring in responsive design and championing the customer as we made revisions in our design iterations working with the design department.

I was tasked to help lead, build up and establish our front-end process while developing the UI for the Responsive Hardware Web Application project.

I was also given the opportunity to take initiatives to improve the processes for our code contribution as well as building a stronger bridge between design and development teams.

  1. Taking on the leadership challenge
  2. My Development Contribution

Taking on the leadership challenge

Initiatives

  • Ensure our Design Department is connected during the development stage
  • Ensure design processes are being followed during development
  • Unified our development projects with our Design System, by integrating our design foundations as variables shared across all Web Components, UXPIN and Global CSS ensuring consistency across TI.com and saving time and resources across the design and development teams
  • Ambassador for Web Components with live training sessions for Designers and UX Team that helped Designers think on a component level when designing their comps

Problem #1

Developers and Designers were in silos

I recognized we needed accountability and visibility to ensure that those developing weren't running ahead and going straight from the comps and requirements to development without consultation with the UI/UX Designers who created the comps. By establishing a method of visibility for our Design Team we could ensure that designers and developers are meeting.

Solution

  • utilize Confluence to bring visibility and accountability to our Design Team leaders to capture the status of when and if the developer has met with the designers
  • assist in establishing our weekly meetups with our Development Lead and Creative Strategist as a forum to bring up UX Issues during our development

Result

As a result we were able to decrease development time, as key UX decisions that surfaced during development could be addressed quickly since links were now made between developers and designers.

Problem #2 Feedback from Creative Director was being lost

Our Organizational structure meant our Design team is in a different department than our Development team. Both resources are coming together in a Project based team with a Project Manager and business analysts. This means that in this new project setting our design feedback loop was new and unfamiliar to our team members and we were finding that as we're moving from Proof of Concept phase to Development, we were losing feedback from our Creative Director. This meant lost time and effort as the development team needed to sift through Jira comments and our Creative Director needed to rewrite her feedback on adjusting the UI to improve the UX or meet the UX requirements.

One reason for this is during development we were getting feedback that needed further exploration or went beyond the scope of that particular "story" (the component we were working on). The developer would explain and a verdict was reached that the story will move forward, but as long as the issue would be handled in the future. However we were finding that there were cases lost with no actions taken on them.

Solution

  • establish our UI/UX review process through updating the JIRA workflow that ensured the story was created in the backlog to capture anything needing further exploration or out of scope
  • ensure our Front-End Designers was taking the lead in ensuring every UI Story they are assigned has a UI/UX Review subtask that is signed off before progressing the status
  • presenting and obtaining buy-in from our Creative Directors and Designers in multiple sessions

Result

  • The team has adopted the new UI/UX Review process after a couple of iterations from feedback sessions
  • Feedback that is not implemented in the story is captured as an actionable item in the backlog