Tatty’s is a second-hand clothing store in Auckland’s Central Business District. They differentiate themselves from other second-hand stores by stocking higher-end items and providing commissions to original owners of sold items. This is a responsive redesign of the Tatty’s website that provides a unique context to presenting clothing online as the existing website doesn’t have a product gallery. My team and I focused on creating an engaging and memorable user experience for people browsing through two features of the product gallery; highlights and swatches.
Self-initiated | AUT | March - April 2016
Work Completed" UX and UI Design, Responsive Web Design, Layout and Photography
Team members: Nick Peek, Yuan Zhang and Vivian Wu (myself)
My role/contribution: UX and UI Design (Highlights gallery, filtering system), creating the layout and grid system, Wire-framing, User-research, One-on-one interviews, Information Architecture. All members participated in Concept Ideation, Secondary Research, UI Design, Prototyping, User-testing and Video-making for demonstrations.
The Process - highlights
User-Research: The first part of the user research process for our Tatty’s project involved one-on one interviews to learn about the thoughts, goals and motivations of our primary users. Through interviews, visiting the store and selling an item through Tatty’s, we identified the primary users as high-end shopping enthusiasts. I interviewed seven individuals of various demographics; the interviewees were given time to talk and share their past experiences with online browsing, retail websites and shopping. They also to thought out loud while browsing through the current Tatty’s website, stating what they liked, what frustrated them and what they thought was missing.
We discovered that users need an idea of what Tatty’s has to offer - i.e. new or special products and product information. This can be optimised through a filtering system. These interviews supported our decision to pursue the design of an online product gallery.
Prototyping and User-testing: Following initial wireframes, we made a series of screens that were compiled into low-fidelity prototypes on InVision that let users click through a predetermined path. This path was designed to test specific features of the website, including page navigation, item filters and actions such as favouriting an item or asking a question. We set a series of tasks that would lead the users through the established path, recording the process to capture success, mouse movement and time taken on each task - heatmaps were also made from this. Once the testing was complete we asked users for general feedback on the prototype. Initially, many users had issues with the navigation in the highlights gallery, often confusing the item navigation for alternative views of an item and this helped us with further development.