TE Connectivity Ecommerce Site

Overview: TE Connectivity did not have an Ecommerce site. Customers could only make a purchase by placing a call to a call centers or use a 3rd party provider. TE Connectivity wanted to create an online inventory of their products, and have their buyers become more independent.

Whiteboarding Workshop

With the product owners, business analysts, and developers, I co-lead a whiteboarding workshop to better align the team. I quickly sketched general pages that would be included, such as product detail, profile account, order history, etc. Next, everyone wrote down elements and ideas needed for a specific page and ranked the items as a want, need, or mvp for first release.

Research: While researching, we interviewed members from the Call Center that took customer orders and discovered it was important for customers to purchase from their favorite suppliers, or in low quantities to test components in their products. 

Designs

I designed the desktop version first because a majority of TE Connectivity’s users accessed their site through a desktop. We then created a mobile design because TE Connectivity wanted to expand their markets to include startups, and hobbyists, who primarily use their phone for smaller purchases.

I designed the following pages in Photoshop. Desktop designs are on the left, and mobile designs are on the right.

Checkout

Results and Takeaways

The site is up and running!

Most of the time, I don’t get to pick which design tool to use. Our client wanted to use Photoshop for all the wireframes and designs, which was challenging, but possible. Photoshops are used to edit photos, not for page layouts with a lot of copy and information tables. We tried to recommend other prototyping and wireframing tools such as Sketch, iRise, or Invision, but Photoshop was what they were comfortable with. Even though I don’t think Photoshop was the best tool for the job, I was able to adjust.