Home Portfolio
John Deere Web Application
Task: John Deere Sales Center Design
This initiative aims to improve the end-to-end sales process used by John Deere Dealers. Currently, dealers have to navigate through multiple applications to complete the sales process. This project offers an opportunity to enhance the user experience and streamline all aspects of the sales process.
My Role
  • Collaborated with product owners to collect and comprehend the requirements.
  • Designed low-fidelity wireframes, high-fidelity prototypes, and workflows.
  • Designed interactive prototypes for mobile, tablet, and desktop resolutions.
  • Designed and implemented John Deere branding and themes (C&F, Ag & Turf, Hitachi).
  • I ensured that John Deere and external standards were followed to ensure consistency and compatibility across different browsers and devices.
  • Responsible for creating style guides and implementing new technologies such as Flexbox and CSS Grid for all Sales Center styles.
  • Implemented a responsive design initiative to ensure compatibility with various browser resolutions and devices.
  • Analyzed user research survey results and worked on developing a better user experience design.
  • Presented new features and designs to product owners and leadership for demonstration.
  • Embedded in Agile project management methodology.
Analysis and Design Process
  • Worked with the product owners to understand the business requirements and existing flows of all the individual legacy applications.
  • Understand how these individual application connect with each other.
  • Understand what are the John Deere design specifications and standards that I need to follow in designing the mockups and the workflows.
  • After understanding of all the basic needs, worked with other designers to identify the common pattern in all the application.
  • Conducted design thinking workshops with product owners and other designers to solve complex workflows so that we can provide better user experience.
  • White boarding with other designers and product owners.
Wireframes

Wireframing is the best techniques for quick iterations.

  • Conducted design sessions with product owners to design wireframes and workflows.
  • Updated wireframes besed upon discussion and feedback provided by product owners and leadership (quick iteration is the beauty of wireframing).
  • Few sample wireframes.
Prototypes

High fidelity screens established a realistic experience to encourage useful stakeholder feedback.

  • Created hi-fi interactive prototypes based upon approved wireframes.
  • Conducted usability testing on hi-fi interactive prototypes to get the real feedback from the product owners and from the dealers that are going to use this application.
  • Conducted A/B testing with hi-fi prototype to analyze real, factual results.
  • Enhanced the prototype based upon feedback and did the testing again.
  • Few sample hi-fi mockups.
Dashboard
Module 1
Module 2
Module 3
Branding
Positive Effect of Solution
  • Earlier dealers has to maneuver through multiple applications to complete the sales process. This project provides an opportunity to streamline the user experience across all aspects of the sales process.
  • Now dealers have to login one application as compare to multiple different applications.
  • This solution saved the time of dealers and they can quickly complete the sales process.
  • We provide the new look and feel and a better user experience as compare to legacy applications, which gives a good feelings to the dealers while using the application (as per feedback).
  • Now individual legacy applications are individual modules in the new application to provide a symmetry between legacy application and new one.
Challenges
  • Understanding of the business functionality and workflow of all the individual application and keeping in one application.
  • Providing and maintaining the consistency as JDSC is become a very big application.
  • UX team is a shared service for all the development teams, providing the values and managing the priority is a big challenge.
  • Maintaining and updating the mockups when standards changes globally.
  • Reviewing developed application and working with multiple stakeholders for common changes.
Workshop: Atomic Design Methodology

A methodology for creating design systems!

Prepared a presentation and guide the organization about concept of Atomic Design, and how we can implement Atomic Design Methodology in our application design and development so that all the designer and developers have a same mind set while design and development of reusable components, sections, templates and pages.

What We Learned
  • We have to use components pattern for common structure so that we can keep consistency, fast delivery and we can reuse the code when needed.
  • Designing and providing the style guide at the initial face of development reduced the rework.
  • Creating the variables in css will save lot of time, easy to maintain, easy to update and very helpful to keep consistency.
  • CSS is very powerful, you can achieve any design and responsive behaviour if you are master in CSS but at the same time it is very easy to break the UI if you are not familiar with the magic of CSS.