UX/UI Design Example
Developing a wireless phone e-commerce site can be a complicated endeavor, as they are hard to find ready to go out of the box. A complicated tree of database tables consisting of phones, rate plans, services, accessories, zip codes and geographic areas, etc. for each major carrier has to be created, maintained and tied to the various processes associated with the shopping cart.
While the the back-end processes was getting a major overhaul in our re-design, I worked on how the pages would look and function for the front-end user. I wanted to make it so that there were as few steps as possible from phone selection to checkout, and for the customer to always know where in the process they were.
Carrier Phone Page
So after choosing their carrier of choice, they would select their phone...
Product Page
The wireless checkout process would begin from this page. The customer would choose whether they are buying a new phone, or upgrading from their current phone. The zip code would need to be entered to make sure phones and rate plans would be available in their area. Until the past couple of years, Car Toys was only allowed to sell T-Mobile phones to online customers who lived only in the markets where Car Toys retail stores were located — Washington, Oregon, Texas and Colorado.
Rate Plans Page
Through each step, the order details box on the right side of the page would automatically update for the customer to view what they were putting in their cart before going to the next step in the process. If a family plan was selected, the next step would take the customer to another page (not shown here) with a list of the same carrier's phones. When selected, these other lines would also show in the order details box.
Optional Services Page
Each carrier offers there own optional services. We made it so that by selecting the check box, that service would be added to the order and displayed in the order details box.
Accessories Page
One last opportunity to offer a product to the customer and enhance the sale.
Shopping Cart Page
Once the customer was satisfied with their order, they would be taken to the shopping cart to complete the checkout process.
The goal of the Wireless Checkout re-design was to make it as simple and straight forward as possible. We also wanted to avoid what other wireless online retailers will do, which is to use a pop-up window or windows and added unnecessary steps that seem to prolong the process and cause confusion.