A lifestyle brand dedicated to design, travel and creative expression.
Rocksbox_cover.png

Rocksbox

Founded by Meghan Rose, Rocksbox is a jewelry rental service that inspires women to look and feel her best. Her membership gives her unlimited access to designer jewelry for $19 a month by rotating 3 pieces at a time. This case study was completed in July 2016.

My role: user interviews, user research and UX design

Responsibilities: to find quick wins and make improvements to the manual stylist curation page to help stylists curate their clients with ease at a faster rate

Process:

• Create a concept map to understand user work flow and information architecture

• Work with senior stylist manager to determine best stylists for user interviews based on a criteria (e.g. length styling at Rocksbox, feedback score, location and availability)

• Organize, contact and schedule stylists for phone interviews

• Conduct and record stylist interviews

• Create affinity diagrams to fit puzzle pieces together

• Identify best solutions that meet business level metrics

• Work with Development to handoff final UX wireframes

Project Goals: to understand the functionality of how stylists curate, and improve how to send a better box by streamlining relevant and available information

Challenges:

• First UX designer to work across functions with marketing managers, merchandizing, engineers and developers to ensure product needs were met and their representations were aligned with overall company vision

• Trained the lead UX designer during a rebrand and project transition

• User testing and validation measured by qualitative data

Results:

• Rich user insight to make valid assumptions on problem areas

• Understanding of curation process and struggles stylists encounter

• Wireframes ranged in fidelity from quick sketches to detailed renderings based on who I needed to communicate details to

• Solutions involved reworking information architecture, moving different components and prioritizing relevant details, and using a color system for tagged items

 

Listen to a sample user interview I conducted here.

 Concept maps help facilitate visual thinking to understand the various elements of a page and how they relate and function together. 

Concept maps help facilitate visual thinking to understand the various elements of a page and how they relate and function together. 

  Affinity Diagram (Part 1)   In order to interpret my stylist interviews, I created affinity diagrams to better understand how information fit together and surface any recurring issues and problem areas to target. I segregated the data into 7 major sections: features the stylists found easy, difficult, what they would like to see, how they curate a client, common errors, information they found most helpful, and information I did not fully comprehend.

Affinity Diagram (Part 1)

In order to interpret my stylist interviews, I created affinity diagrams to better understand how information fit together and surface any recurring issues and problem areas to target. I segregated the data into 7 major sections: features the stylists found easy, difficult, what they would like to see, how they curate a client, common errors, information they found most helpful, and information I did not fully comprehend.

  Main User Findings   Based on the first round of user research interviews I scheduled and conducted via phone, I wrote a list of improvements based on priority, value, and cost.

Main User Findings

Based on the first round of user research interviews I scheduled and conducted via phone, I wrote a list of improvements based on priority, value, and cost.

  Affinity Diagram (Part 2)   To reduce response bias and understand other factors about how stylists curate, another round of interviews were scheduled and conducted. The second round involved more validation from the user about slight nuances, which helped me understand the different complexities of how difficult it is to match a woman's jewelry style and preferences. The data collected was segmented into 7 more buckets to increase comprehension of the stylist's behavior.

Affinity Diagram (Part 2)

To reduce response bias and understand other factors about how stylists curate, another round of interviews were scheduled and conducted. The second round involved more validation from the user about slight nuances, which helped me understand the different complexities of how difficult it is to match a woman's jewelry style and preferences. The data collected was segmented into 7 more buckets to increase comprehension of the stylist's behavior.

IMG_5425.jpg
IMG_5419.jpg
IMG_5420.jpg
IMG_5423.jpg
IMG_5418.jpg
  Example Wireframes   Wireframes are a crucial part of the design process and help organize various elements of the website and allow the team to understand how to prioritize visual layout before content. The example wireframes above show multiple iterations of concepts and layout (sketches) before a higher resolution mockup was decided with the leadership team. I typically start on pen and dotted grid paper before going into Sketch.

Example Wireframes

Wireframes are a crucial part of the design process and help organize various elements of the website and allow the team to understand how to prioritize visual layout before content. The example wireframes above show multiple iterations of concepts and layout (sketches) before a higher resolution mockup was decided with the leadership team. I typically start on pen and dotted grid paper before going into Sketch.

  Final Mockup   After collaborating with the major stakeholders (CEO, VP of engineering, stylist manager and data scientist), the high resolution mockups were delivered and handed off to engineering during the rebranding period.       What We Learned   • Showing time stamp and box history in reverse chronological order gave stylists a better idea of what members received last—this prevented duplicate items that increased our Box Feedback metric.  • Moving the 3 items up to the top right gave faster Box Curation Times as stylists often found their eyes wandering across the page inconsistently with poor navigational flow. Shorter box curation time leads to more members getting styled.  • Using tabs for organizing jewelry improved less scrolling between the top and bottom of the page and more efficiency for understanding her wishlist.  • Adding a Recommended Items tab based on her ratings allowed stylists to pair her wishlist items with similar metal tones, styles, and designers.  • Grouping the last three boxes with her jewelry rating and box feedback created more visibility and  flow in conversation for other stylists to understand her jewelry style and know what she loves best. 

Final Mockup

After collaborating with the major stakeholders (CEO, VP of engineering, stylist manager and data scientist), the high resolution mockups were delivered and handed off to engineering during the rebranding period. 

 

What We Learned

• Showing time stamp and box history in reverse chronological order gave stylists a better idea of what members received last—this prevented duplicate items that increased our Box Feedback metric.

• Moving the 3 items up to the top right gave faster Box Curation Times as stylists often found their eyes wandering across the page inconsistently with poor navigational flow. Shorter box curation time leads to more members getting styled.

• Using tabs for organizing jewelry improved less scrolling between the top and bottom of the page and more efficiency for understanding her wishlist.

• Adding a Recommended Items tab based on her ratings allowed stylists to pair her wishlist items with similar metal tones, styles, and designers.

• Grouping the last three boxes with her jewelry rating and box feedback created more visibility and  flow in conversation for other stylists to understand her jewelry style and know what she loves best.