Karissa Wong

StorQuest Site Redesign

Using product thinking to escape cookie-cutter designs

Company

StorQuest

Timeline

2024 June

Timeline

2024 June

Team

Ashton Taylor
(Senior Designer)

Kaheawai Kaonohi
(Associate Designer)

Karissa Wong
(UI/UX Intern)

Website Design

Website Design

Product Thinking

Product Thinking

Interaction Design

Interaction Design

Problem

StorQuest is a self-storage company with 200+ locations nationwide. They requested a website redesign that wasn't "cookie-cutter," which proposed a unique opportunity to design websites tailored to StorQuest's needs.

Problem

StorQuest is a self-storage company with 200+ locations nationwide. They requested a website redesign that wasn't "cookie-cutter," which proposed a unique opportunity to design websites tailored to StorQuest's needs.

Solution

I joined the team in building wireframes and hi-fidelity prototypes. To address StorQuest's content and design needs, we provided design alternatives, and I designed over 25+ module alternatives, 4 which made it to the final cut. In this case study, I'll be deep diving into the size guide module alternative that showcases my product thinking.

Solution

I joined the team in building wireframes and hi-fidelity prototypes. To address StorQuest's content and design needs, we provided design alternatives, and I designed over 25+ module alternatives, 4 which made it to the final cut. In this case study, I'll be deep diving into the size guide module alternative that showcases my product thinking.

Just want to skim?

Jump to the product thinking ↓

Jump to the product thinking ↓

01 Project Images

01 Project Images

02 Problem Context

02 Problem Context

First client project!

After my first week at Red Door, I was onboarding on StorQuest’s website redesign project, my very first client project.

After my first week at Red Door, I was onboarding on StorQuest’s website redesign project, my very first client project.

I worked mainly with Ashton (senior designer) and Kaheawai (associate designer).

I worked mainly with Ashton (senior designer) and Kaheawai (associate designer).

StorQuest's original Home page

StorQuest's original Home page

Being resourceful amidst PTOs

My direct manager, Candice, and my senior designer, Ashton, were both to be on PTO for 2-3 weeks at the same time.

My direct manager, Candice, and my senior designer, Ashton, were both to be on PTO for 2-3 weeks at the same time.

I asked for client meeting recordings, dug for the client briefs, and scheduled calls with the lead designer to better understand the project before they left.

I asked for client meeting recordings, dug for the client briefs, and scheduled calls with the lead designer to better understand the project before they left.

StorQuest’s main ask: “We don’t want designs to be cookie-cutter.”

I observed from the client meetings that StorQuest repeatedly mentioned not wanting “cookie-cutter” designs. They wanted something professional, yet distinctly StorQuest, so the team and I had the unique challenge of balancing creative and practical designs.

I observed from the client meetings that StorQuest repeatedly mentioned not wanting “cookie-cutter” designs. They wanted something professional, yet distinctly StorQuest, so the team and I had the unique challenge of balancing creative and practical designs.

03 The Work

03 The Work

Red Door’s design process, and my place in it

For this project, Red Door followed a very lean process that relied on Relume's building blocks and had minimal user validation. We mainly relied on research, knowledge of UX principles, and guidance from the senior designer.

For this project, Red Door followed a very lean process that relied on Relume's building blocks and had minimal user validation. We mainly relied on research, knowledge of UX principles, and guidance from the senior designer.

My role was straightforward: I would utilize the Relume library to create responsive prototypes, then collaboratively transform them into high-fidelity comps validated through internal reviews. In total, we designed 11 responsive pages with a total of 45+ modules.

My role was straightforward: I would utilize the Relume library to create responsive prototypes, then collaboratively transform them into high-fidelity comps validated through internal reviews. In total, we designed 11 responsive pages with a total of 45+ modules.

Learning to craft industry standard hi-fi comps

Creating the prototypes were simple enough, but I wasn’t familiar with designing professional sites.

Creating the prototypes were simple enough, but I wasn’t familiar with designing professional sites.

To make up for my gap of experience, I examined Red Door’s archived website projects, analyzed StorQuest’s competitors’ websites, and scoured inspo sites to apply industry standards to my work.

To make up for my gap of experience, I examined Red Door’s archived website projects, analyzed StorQuest’s competitors’ websites, and scoured inspo sites to apply industry standards to my work.

(P.S. I personally recommend Fountn and SLP)

My role as the anti-cookie-cutter designer

I finished my tasks early, so I took on the role of exploring ways to push the creativity in the modules we designed.

I finished my tasks early, so I took on the role of exploring ways to push the creativity in the modules we designed.

I finished my tasks early, so I took on the role of exploring ways to push the creativity in the modules we designed.

Batch 1 ideations (left) and Batch 2 ideations (right)

Batch 1 ideations (left) and Batch 2 ideations (right)

Batch 1 ideations (left) and Batch 2 ideations (right)

Initially, my designs were unusable because they lacked accessibility and cohesion with our visual system. This feedback helped me develop my eye for ideating intentionally.

Initially, my designs were unusable because they lacked accessibility and cohesion with our visual system. This feedback helped me develop my eye for ideating intentionally.

Initially, my designs were unusable because they lacked accessibility and cohesion with our visual system. This feedback helped me develop my eye for ideating intentionally.

I learned how to simplify and tried to strike a balance between minimalism and creativity.

I learned how to simplify and tried to strike a balance between minimalism and creativity.

I learned how to simplify and tried to strike a balance between minimalism and creativity.

I also suggested microinteractions like scroll and hover effects for a more immersive experience.

I also suggested microinteractions like scroll and hover effects for a more immersive experience.

I also suggested microinteractions like scroll and hover effects for a more immersive experience.

04 Deep Dive

04 Deep Dive

04 Deep Dive

Product thinking in StorQuest’s website

I designed many creative alternatives, but I want to dive into my process of designing the size guide module. When this design alternative was presented, the Red Door team quickly saw its value and adopted it despite needing to extend development time. StorQuest loved it as well, and requested to implement this module on other pages. This module will be shipped in the final design.

I designed many creative alternatives, but I want to dive into my process of designing the size guide module. When this design alternative was presented, the Red Door team quickly saw its value and adopted it despite needing to extend development time. StorQuest loved it as well, and requested to implement this module on other pages. This module will be shipped in the final design.

I designed many creative alternatives, but I want to dive into my process of designing the size guide module. When this design alternative was presented, the Red Door team quickly saw its value and adopted it despite needing to extend development time. StorQuest loved it as well, and requested to implement this module on other pages. This module will be shipped in the final design.

The Size Guide

The purpose of the size guide module is to help customers choose the appropriate self-storage size for their needs.

The purpose of the size guide module is to help customers choose the appropriate self-storage size for their needs.

The purpose of the size guide module is to help customers choose the appropriate self-storage size for their needs.

The original storquest site had a video and description for each size option, and the team’s redesign kept these elements in a neater format.

The original storquest site had a video and description for each size option, and the team’s redesign kept these elements in a neater format.

The original storquest site had a video and description for each size option, and the team’s redesign kept these elements in a neater format.

Red Door's redesigned size guide module

Red Door's redesigned size guide module

Red Door's redesigned size guide module

The potential for improvement

Looking at the original site, I put myself in the position of the user. I felt overwhelmed with all the text and videos–there were 7 size options, and I wasn’t going to go through all that content. But I also wasn’t sure how I could quickly skim to find the size I needed. I didn't know where to look, and the dimensions didn’t give me an intuitive understanding. What is 10” x 10” anyway?

Looking at the original site, I put myself in the position of the user. I felt overwhelmed with all the text and videos–there were 7 size options, and I wasn’t going to go through all that content. But I also wasn’t sure how I could quickly skim to find the size I needed. I didn't know where to look, and the dimensions didn’t give me an intuitive understanding. What is 10” x 10” anyway?

Looking at the original site, I put myself in the position of the user. I felt overwhelmed with all the text and videos–there were 7 size options, and I wasn’t going to go through all that content. But I also wasn’t sure how I could quickly skim to find the size I needed. I didn't know where to look, and the dimensions didn’t give me an intuitive understanding. What is 10” x 10” anyway?

These issues could drop conversion rates, and I saw the opportunity to make StorQuest’s experience more immersive, informative, and time-saving for users.

These issues could drop conversion rates, and I saw the opportunity to make StorQuest’s experience more immersive, informative, and time-saving for users.

These issues could drop conversion rates, and I saw the opportunity to make StorQuest’s experience more immersive, informative, and time-saving for users.

StorQuest's original size guide module

StorQuest's original size guide module

StorQuest's original size guide module

The 3 main issues

  1. The module was overwhelming.
    Too many videos, too much text, and users had to scroll to look at different options, which could be difficult when trying to compare multiple options.

  2. Understanding storage sizing was unintuitive and slow.
    To compare storage volume, users would have to multiply dimensions and compare sizes mathematically.

  3. The user flow to choose the size wasn’t straightforward.
    Should users watch the video first then read the text? How are these sizes organized, and which size should I look at next? How can I scan through this module efficiently to find the size I need?

Addressing Pain Point 1:
Using carousels to provide a focused experience

Carousels were common in our site redesign. So to condense the wealth of content in a familiar interaction, I used a carousel as a baseline. Not only do carousels have the flexibility to become non-cookie-cutter, the format helps users focus and explore content strategically.

Carousels were common in our site redesign. So to condense the wealth of content in a familiar interaction, I used a carousel as a baseline. Not only do carousels have the flexibility to become non-cookie-cutter, the format helps users focus and explore content strategically.

Carousels were common in our site redesign. So to condense the wealth of content in a familiar interaction, I used a carousel as a baseline. Not only do carousels have the flexibility to become non-cookie-cutter, the format helps users focus and explore content strategically.

Addressing Pain Point 2:
Indicating storage sizes in a visual navigation

When I read 5” x 10” and 10” x 30,” I wished I knew what that meant visually. So I did exactly that–I created icons to indicate the sizing options, which doubled as a navigation bar and tool to make visual comparisons. After exploring a sizing option, users might think, “okay, I just need something maybe double this size,” and they would look for an icon that was double in size. This makes finding the correct size much quicker.

When I read 5” x 10” and 10” x 30,” I wished I knew what that meant visually. So I did exactly that–I created icons to indicate the sizing options, which doubled as a navigation bar and tool to make visual comparisons. After exploring a sizing option, users might think, “okay, I just need something maybe double this size,” and they would look for an icon that was double in size. This makes finding the correct size much quicker.

When I read 5” x 10” and 10” x 30,” I wished I knew what that meant visually. So I did exactly that–I created icons to indicate the sizing options, which doubled as a navigation bar and tool to make visual comparisons. After exploring a sizing option, users might think, “okay, I just need something maybe double this size,” and they would look for an icon that was double in size. This makes finding the correct size much quicker.

Addressing Pain Point 3:
Using hierarchy to suggest an efficient user flow

I wanted this module's interactions to be intuitive by employing visual hierarchy. The large video is the first focus, because it’s easier to understand complex information (like spatial information) through video. Watching the video would remove the need to read the text, but reading the text might not do the same. After watching the video, the user might want to read more or explore another size. Using proximity rules, grouping the sizing information on the left and global information on the right makes it clear where users should look for their next action. Additionally, making StorQuest’s recommended size (which is also the median size) the default, users only need to explore 3 more sizes at most.

I wanted this module's interactions to be intuitive by employing visual hierarchy. The large video is the first focus, because it’s easier to understand complex information (like spatial information) through video. Watching the video would remove the need to read the text, but reading the text might not do the same. After watching the video, the user might want to read more or explore another size. Using proximity rules, grouping the sizing information on the left and global information on the right makes it clear where users should look for their next action. Additionally, making StorQuest’s recommended size (which is also the median size) the default, users only need to explore 3 more sizes at most.

I wanted this module's interactions to be intuitive by employing visual hierarchy. The large video is the first focus, because it’s easier to understand complex information (like spatial information) through video. Watching the video would remove the need to read the text, but reading the text might not do the same. After watching the video, the user might want to read more or explore another size. Using proximity rules, grouping the sizing information on the left and global information on the right makes it clear where users should look for their next action. Additionally, making StorQuest’s recommended size (which is also the median size) the default, users only need to explore 3 more sizes at most.

Drawing from Netflix to create a visual experience

I wanted to make this module immersive because it was an important user flow in the StorQuest site. Our designs had mainly white and off-white backgrounds, so I used off-black to draw users out of their typical experience. I wanted to invoke the feelings people get in a movie theater or netflix scrolling session–an experience that feels inviting and personal.

I wanted to make this module immersive because it was an important user flow in the StorQuest site. Our designs had mainly white and off-white backgrounds, so I used off-black to draw users out of their typical experience. I wanted to invoke the feelings people get in a movie theater or netflix scrolling session–an experience that feels inviting and personal.

I wanted to make this module immersive because it was an important user flow in the StorQuest site. Our designs had mainly white and off-white backgrounds, so I used off-black to draw users out of their typical experience. I wanted to invoke the feelings people get in a movie theater or netflix scrolling session–an experience that feels inviting and personal.

Reflection: Additional improvements

I wish I added a subtitle that described the space in more human terms, like “half a closet,” “half a garage,” etc, so it would further remove the need to read the body text or even watch the video.

I wish I added a subtitle that described the space in more human terms, like “half a closet,” “half a garage,” etc, so it would further remove the need to read the body text or even watch the video.

I wish I added a subtitle that described the space in more human terms, like “half a closet,” “half a garage,” etc, so it would further remove the need to read the body text or even watch the video.

05 Conclusion and Impact

05 Conclusion and Impact

05 Conclusion and Impact

The end of my journey with StorQuest

Similar to the size guide module, I had the opportunity to employ product thinking in a variety of instances. Not every design was adopted, but I learned how to design intentionally and create experiences in website design.

Although I didn’t get to see the project to the end, I’m happy that I was able to bring real-world value to both Red Door and StorQuest and create something awesome with the team.

Going the extra mile: Filling the cracks in a cross-functional team

With a small design team, we wear a lot of hats. I liked this because I could grow various skills, and my work attitude is very much “I want to take on more so I can learn.” So in addition to the design work I was delegated, I also did the following:

  1. Ensure usage of our StorQuest library
    I noticed that certain fonts, colors, and styles were linked to the wrong Figma library. The Relume library had styles with similar names as our StorQuest library, so some incorrectly linked styles went unnoticed. I combed through our Figma file to fix all discrepancies. 

  2. Quality checks on copy
    I was responsible for pasting in the copy into our designs. While I did this, I imagined being a user: Does this flow of content make sense? Is this information I want to know, or would something else be more helpful? Questions like this guided my informal audit, and I was able to provide helpful feedback to the team.

  3. Add to StorQuest’s design system
    I created an icon guide that explained our standards for different icon stylings and the library of icons we used.

  4. Present designs to experts
    I had the chance to present and receive feedback for my designs in an internal review meeting to copywriters, project managers, and developers.

Kind Words

Cody Leibert

Project Manager

Fantastic job team! This was a huge undertaking and I felt you guys really pushed the designs!

Cody Leibert

Project Manager

Fantastic job team! This was a huge undertaking and I felt you guys really pushed the designs!

Cody Leibert

Project Manager

Fantastic job team! This was a huge undertaking and I felt you guys really pushed the designs!

Ashton Taylor

Senior Designer

I really want to thank @Karissa Wong, who made a massive contribution in getting us there!

Ashton Taylor

Senior Designer

I really want to thank @Karissa Wong, who made a massive contribution in getting us there!

Ashton Taylor

Senior Designer

I really want to thank @Karissa Wong, who made a massive contribution in getting us there!

Kaheawai Kaonohi

Associate Designer

We couldn’t have gotten everything made so quickly and the design direction improved without your help @Karissa Wong! You did an excellent job taking on client work!

Kaheawai Kaonohi

Associate Designer

We couldn’t have gotten everything made so quickly and the design direction improved without your help @Karissa Wong! You did an excellent job taking on client work!

Kaheawai Kaonohi

Associate Designer

We couldn’t have gotten everything made so quickly and the design direction improved without your help @Karissa Wong! You did an excellent job taking on client work!

Next case

AllSeater

Next case

AllSeater