Havenly Order/Tracking Re-Design

Product Design

As part of a design challenge, Denver based Havenly asked to redesign their order/tracking page. The goal was to enhance the overall user experience when viewing the page, and two of my primary goals were enhancing user interactions with the page and incorporating a stronger brand identity throughout the page. Since this page is one of the final pages users interact with when ordering products, it is important for it to be as inviting and user friendly as the rest of Havenly’s website.



I have included a video showing some interaction/animation design when users engage with each design, in addition to detailed explanations of design decisions for each concept.







The Problem







My Role: Product Designer

I approached this redesign with a product designer lens. It was crucial to understand business needs and objectives at the start of the project as I maintained this thinking throughout each phase of my design process. Since I was unable to interview users in person, I was able to conduct remote interviews with members of the team and learn about user pain points and user needs. For Havenly, I designed both desktop and mobile designs, focusing on brand identity, UI design and interactions. All work presented in this case study was completed by me.




The Process





Testing Initial Concepts

I conducted quick usability tests with friends and family who have never used Havenly before. I created prototypes from my low-fi wireframes and asked users to complete 3 tasks and identify main areas of the UI. I also asked for general feedback on layout and what they would expect to see on this page as a user.




The Solution

The video below shows interaction desing and animation choices for each of my 4 concepts. Please read the text in the video for an explanation of the interaction of each concept, and continue scrolling down to view an in-depth look at my design decisions and high-fi mockups.




Havenly Re-Design (Interaction/Animation Design) from Michael Tsirakis on Vimeo.







Takeaways

Option 2 was the overwhelming favorite amongst those who tested and reviewed the designs. Havenly felt that this design was the most on brand, had enough inventiveness to stand out from their original design, but wasn't too much of a departure from the old design to where users would experience pain points. Users expressed a need for visuals, as having the image of the product provided a visual reminder to users who might have forgotten what they purchased (with products like furniture, text only does not provide the same feedback).

Color was an important part of my redesign, both from an overall UI design standpoint, but also when looking at accessibility. Using color and icons to represent key parts of the UI allows this new design to be accessible and useful for all users.

Further, color, hierarchy and layout makes this design easy to read and digest. This is especially true on mobile, where users were originally used to a long receipt type design. By consolidating each section into its own expanding accordion section, users are not overwhelmed with a high cognitive load, and all of the content is presented in an easy to read layout that makes sense for the device.