Dottie iPad app: Main Order Screen + Wishlist Feature

UI Design / UX Design

THE CHALLENGE

At trunk shows, Stella & Dot sales representatives use Dottie to take customers’ orders in real time. Through multiple iterations, the Dottie team and I worked on improving the checkout experience based on continuous feedback from the Stella & Dot sales representatives.

ROLE

UI/UX/Visual design

TEAM

  • Design
  • Engineering & QA
  • Product Management: Allison Kellman / Elise West

TOOLS

  • Adobe Illustrator
  • Keynote (for prototyping)

DESIGN DELIVERABLES

  • Wireframes & Visual Design
  • Design Annotations
  • Interaction Animations

THE PROCESS

Main Order Screen Wireframe

Initial wireframe provided by the product manager. Tapping on items on the left will add them to the order list on the right.

Developing a Visual Style: iOS6

Using the wireframe, I created a visual style for the interface that matched the Stella & Dot brand. I used color to make the main call to action more obvious.

Developing a Visual Style: iOS7

A later phase for this app included an iOS 7 redesign. To utilize more screen real estate, this redesign uses less containers to hold the content.

ITERATION BASED ON QUALITATIVE USER FEEDBACK

In the iOS 6 version of this screen, the sales representatives would overlook the change shipment button. In the iOS 7 version, we made the shipping and checkout buttons more prominent and reduced the visual hierarchy of the cancel order link.




ADDING NEW FEATURES

How-to Overlay

Wishlist Feature

Adding an option to "Add to Wishlist" gives the sellers an opportunity to convert customers at a later date.

THE CHALLENGE

Although this feature was in high demand, we did not want it to detract from the primary focus of the screen, which is still to add items to an order, versus a wishlist.

The visual design for this was challenging because the wishlist had to be visually distinct from the order list, while still being cohesive with the rest of the UI on the app.

SOLUTION

In my initial explorations, I added a separate, visible wishlist section to the Main Order screen. However, this cluttered the UI and would lead to overcomplicating the existing behavior of the left panel.

In the final solution, the add-to-order interaction is the same. To add products to the wishlist, they first have to be added to the order list and then moved to the wishlist afterwards.

FINAL DESIGNS




DOTTIE IPAD APP ACHIEVMENTS

← Back to Homepage KEEP Collective →