Design mockup on boy'c computer

Digital Storefront Design

UX Design

View Prototype

Project Background

Jax Coastal Creations, a small, home-based, vinyl-printing company based out of Jacksonville, FL, recognized their need to invest in a digital storefront. In order for their business to grow, they would need a website capable of processing the large, heavily customized orders that their primary customers required.

  • My Role:

  • User Researcher
  • User Experience Designer
  • User Interface Designer
  • Interaction Designer
  • Information Architect
  • Content Strategist
  • Deliverables:

  • Competitive Analysis
  • Persona
  • Journey Map
  • Empathy Map
  • User Stories
  • User Flows
  • Site Map
  • Sketches
  • Wireframes
  • Lo-Fidelity Interactive Prototype

Problem Statement

Placing online orders for highly personalized vinyl products can be confusing and anxiety-provoking, leaving users frustrated and in need of support.

Audience

Jax Coastal Creations' audience is as wide and varied as the products they sell. Given the highly customizable nature of their products, people of many different backgrounds and demographics utilize their services.

Solution

By basing my design decisions on research and empathy for Jax Coastal Creations and its customers, I was able to develop a digital storefront capable of providing all of JCC's services, while also minimizing user frustration and confusion. Utilizing techniques such as progressive disclosure and feedback loops allowed me to create a simplified personalization process that gives users all of the expected flexibility without the cognitive load.

Discovery & Research

After clarifying the business requirements for JCC, I began the discovery phase of my design process by developing a research plan. In order to collect the qualitative and quantitative data that I required to make informed design decisions, I decided to utilize 3 types of research studies: a competitive analysis, a user survey, and user interviews.

Understanding the Competition

The first bit of research that I conducted was the competitive analysis. It helped me gain insight into features being offered by other vinyl printing businesses, as well as how they organized their content. The 3 vinyl printing companies that I researched were Uber Prints, Zazzle, and Team Shirts.

All 3 of these competitors have developed digital mockups that allow users to view their design before they move forward with the purchase.

Zazzle stood out due to the graphics editor that allows users to create original designs for their products without having to use any kind of outside software; however, the complexity of the editor also leaves users with a significant learning curve to overcome before they are able to fully utilize the tool.

Team Shirts stood out due to helpful collaboration tools that help users process complex orders for sports teams and organizations. They fell behind on the organization of their home screen, which is very busy and distracting for some users.

The opportunities that I identified through this process were the desire for digital mockups, the possibility of using progressive disclosure to simplify the personalization process, and the need for a minimalistic content strategy that does not overwhelm or distract.

Competitive Analysis Infographic

Identifying Pain Points with a User Survey

After learning more about JCC's competitors, I needed to learn more about the customers that they serve so that I could design a product that would better account for their needs and desires.

In order to obtain data about the types of experiences that people have when utilizing vinyl printing services, I created a user survey with Google Forms. The survey asked participants about things such as their motivations for utilizing vinyl printing services, what they enjoyed about the experience, and what improvements they would have liked to see. The survey had 20 participants recruited from various Facebook groups.

The survey was 12-14 questions long depending on if the participant's vinyl printing experience was with an online or in-person transaction. The survey included a screener question that ensured that data was only being collected from individuals with experience utilizing the services we were researching.

Many of the survey questions were written to be short-answer and open-ended. I chose this format intentionally to encourage honest, unfiltered responses. I analyzed the responses for greater themes that could be referenced when making design decisions.

Once analyzed, the data from the user survey provided many useful insights that were essential in making decisions about the scope of the project and developing the future user flows.

Pie chart depicting survey response results

Gaining a Deeper Understanding with User Interviews

The final research task designated in my research plan was user interviews.

For this study, I conducted interviews with 2 individuals (one 34-year-old male, and one 26-year-old female) regarding their experiences utilizing a vinyl printing service to place large, highly personalized orders. I decided on this particular focus for the interview due to the increased complexity of this type of order, as well as its importance to JCC's overall business goals.

  • Participants:

  • 34yo Male, interviewed over Zoom
  • 26yo Female, interviewed in person
  • Major Inquiries:

  • Customization Services
  • Positive Previous Experiences
  • Negative PreviousExperiences
  • Perceived Areas for Improvement
“The hardest part of the process was checking the order for mistakes...I was so afraid that I had entered something wrong.”

Summarizing Research Takeaways

By analyzing the data gathered through the user survey and the user interviews, I was able to identify the major pain points that user experience when utilizing a service similar to Jax Coastal Creations; knowing these pain points allowed me to determine user's needs that hadn't been met by the services they had interacted with.

With the survey and interview data, I was also able to identify some of the delights that users had encountered in their experiences, as well as what they would have changed to improve their experiences. While certain delights or desires may not be reflected in the MVP, they will inform future iterations of the product as it grows from base functionality to a more robust digital storefront.

  • Pain Points:

  • Lack of immediate feedback on how the appearance of their product's design
  • Confusion about sizing conversions
  • Difficulty communicating ideas to designers
  • Difficulty with aspects of the service's checkout procedure (e.g. shopping cart, payment forms, etc.)
  • Anxiety due to the inability to effectively review personalization information for large orders
  • Needs:

  • Immediate feedback in the form of digital product mockups
  • Ability to modify designs on their own so that interaction with designers isn't necessary as often
  • Simple, streamlined processes for the checkout procedure
  • Clear order review that allows users to double-check all entered data.
  • Delights:

  • Getting to feel like they got exactly what they wanted
  • Lack of Interaction with other people throughout the ordering and delivery process.
  • Anticipation of product's arrival
  • Desires:

  • Tutorials on how to utilize customization and personalization features to minimize the learning curve.
  • Ability to leave additional comments on products to explain any modifications that may not be noted elsewhere.

Identifying the Primary Persona

With my research complete, I created Jax Coastal Creation's primary user persona — Team Mom Tonya.

While Tonya does not represent all of JCC's target audience, she does represent a large, active part of the audience that requires an increased level of support. The highly personalized products ordered by users like Tonya require them to complete complex user flows that can easily be confusing and overwhelming. If the needs of users like Tonya are met, the needs of most other users will be met as well.

Team Mom Tonya

"Team Mom Tonya" holds a glove and prepares to pitch while looking into the camera.
    • Demographics:

    • Stay-at-home Mom
    • 36 years old
    • Married
    • 2 kids

    Bio:

  • Tonya is the "Team Mom" of her 8-year-old daughter's baseball team and loves getting to help the coaches design and order the team shirts at the beginning of each season. As she takes orders for the shirts, she compiles the information on a piece of paper listing the shirt sizes as well as the personalized names and numbers that correspond to each size. She is tech-savvy and familiar with the processes of online shopping, but always gets nervous that she will accidentally mess up the personalization form.
  • Goals:

  • Place a large order of t-shirts of varying sizes
  • Double-check the order to make sure that all shirts are correct in size, styling, and personalization.
  • Frustrations:

  • Entering all of the personalization information can be confusing and tedious.
  • Afraid that she will accidentally mess up personalization details.
  • Not knowing if the final product will look right.
"With all of the different names, numbers, and sizes to match up, I'm nervous that I'll make a mistake. I wish there was a way for me to double-check all of those personalizations so I would know if I had made a mistake."

Empathizing
with the User

Once I had completed my research and established a target persona, I needed to take the time to put myself in the users' shoes and empathize with the delights and frustrations that they would encounter when utilizing a service like JCC's.

The step of creating artifacts such as a storyboard, a user journey map, and an empathy map, allowed me to focus on exactly who I was designing for so that I could best meet their needs with my design decisions.

I referenced these artifacts frequently throughout the rest of the project to ensure that my efforts would always benefit the user.

Storyboard for the personalization sequenceCustomer journey map for "Team Mom Tonya"Empathy map for "Team Mom Tonya"

Prioritizing Features and Establishing the Project Scope

During my research and empathizing, I identified countless needs, frustrations, delights, and desires; however, only a limited number of those can be addressed at given a time. In order to establish a scope for the project and to focus my design efforts on the most important features, I created a list of the 4 highest priority user stories that should be addressed by any potential solutions.

Beyond these user stories, there were others that I determined were outside of the scope of the MVP due to their lower priority. These included enabling users to request fabric samples and allowing users to see the design mockup on different body types.

High Priority User Stories

1. As a vinyl shop customer, I need to be able to purchase products online so that I don't have to visit a physical storefront location.

This story is based upon the primary business requirement. Without a physical storefront for customers to provide payment, the website must be able to complete the entire transaction process.

2. As a vinyl shop customer, I need the ability to customize and personalize individual products in my order separately so that I can meet the needs of multiple people.

30% of survey participants reported that they have utilized vinyl printing services to create apparel for their sports teams. Orders such as these require the ability to personalize each piece of apparel individually so that last names or player numbers can all be unique.

3. As a vinyl shop customer, I need the ability to filter the available products so that I can focus on the products that fulfill my needs.

The ability to filter through products and designs is a high-priority feature because it reduces the amount of work that users must do in order to find what they need. This feature is offered by every single one of JCC's competitors.

4. As a vinyl shop customer, I need to be able to submit my own original designs so that I can create custom clothing for myself and others.

55% of survey participants reported that they had used their own original designs for at least one vinyl printing project in the past.

Clarifying the Information Architecture with User Flows

Once I had narrowed the scope of the project down to the 4 highest priority user stories, I began to develop user flows for all of them so that I could break each process down into the singular actions and resources that would be required for a user to successfully accomplish their goal. I completed multiple iterations of each flow to increase the level of detail and further break down user actions.  By completing these user flows, I took the first step towards developing the site's information architecture and content strategy.

Preliminary user flow for the digital storefrontFurther developed user flow for the digital storefront design

Ideating Potential Layouts with Wireframe Sketches

With my user flows completed and my information architecture started, I began to sketch out possible solutions. I began by completing a crazy 8s exercise to brainstorm layouts and information hierarchies. From there, I reached out for feedback from various stakeholders and began to narrow down and combine possible solutions.

During my second iteration of sketches, I developed solutions that combined the elements of multiple ideas into one cohesive design. I included annotations with the solution sketches to communicate with stakeholders and create transparency in my design process.

Crazy eights sketches as a brainstorming exerciseSolution sketch for the product details page with notes on design decisions

Refining Spacing and Alignment with Digital Wireframes

After developing the foundation of the digital storefront with sketches, I moved to Figma to develop low-fidelity wireframes. This step in the process allowed me to utilize grids to improve alignment and spacing.

In the second iteration of the digital wireframes, I began to increase the fidelity of the design to provide the necessary context for effective usability testing.

The second iteration wireframes were used to create the interactive prototype.

Digital wireframe of product details pageWireframe of search results pageWireframe of user personalization screenWireframe of order confirmation screen

Validating the Design with Usability Testing

Before expending resources on increasing the fidelity of the design, I utilized the prototype that I built from the second iteration of wireframes to conduct usability and preference testing.

  • Participants:

  • 7 total participants
  • 5 remote, unmoderated participants (Maze)
  • 2 in-person, moderated participants (Figma)
  • Tasks Tested:

  • Adding products to the cart
  • Modifying Designs
  • Uploading Original Designs
  • Filtering Products and Designs
  • Personalization Sequence
  • Checkout Sequence

Summarizing the Usability Results

The results of the user testing indicated that the design successfully provides the functionality mandated by the high-priority user stories. 100% of the usability test participants were able to complete all of the tasks that we tested. Additionally, participants gave the design an average rating of 7.6 out of 10 for its ease of use (10 = Very Easy).

The testing also revealed some areas that are in need of improvement. While users were able to accomplish their goals, some of the paths that they utilized were unexpected; this indicates that the design could be further improved to better draw users' attention to their ideal next step to prevent them from becoming lost or confused as they navigate the site. There was also some confusion among usability test participants regarding where they may find certain products (i.e. decorations). This indicates that additional research should be conducted to improve the content strategy so users can more easily located the products they are searching for.

"The personalization process was really straightforward and easy to use."
“It did not naturally occur to me to find decor option under ‘merchandise’.”
“I expected to be able to change the product’s color from the preview instead of having to go to a new page.”

Overall Experiences

The overall experiences of usability test participants were positive. Users were able to fulfill all of the high-priority user stories while rating the design as easy to use. Additionally, they found the personalization process,  which can be a source of confusion and anxiety, to be simple and straightforward.

Recommendations for Future Iterations

With the core functionality of JCC's digital storefront completed, the next steps for improvement will be aimed at simplifying processes and creating moments of delight.

  • Possible Future Features:

  • Contact Form
  • Instead of requiring users to contact JCC through email, a contact form would allow them to speak with a representative of the company more quickly and easily.
  • Collaboration Tools
  • Developing collaboration tools that allow users to contact their group to quickly vote on design options or enter personalization information would simplify the process for users making bulk or highly personalized orders. This is an opportunity to turn a pain point into a delight.
  • Graphics Editor
  • Incorporating a graphics editor into the design would prevent users from having to utilize multiple sites or pieces of software to complete their orders. Users could design original designs within JCCs storefront and immediately utilize that design for their purchase.

Interactive Prototype

The final deliverable for this project is a funtional, interactive prototype that exemplifies hows users will interact with the digital storefront once it is developed.

Prototype mockup on laptop at a desk

Final Thoughts

Successes:

The project was completed on time.

Given that this was my first design sprint, I was originally intimidated by the thought of going from concept to interactive digital prototype in only 2 weeks. By addressing my perfectionism and staying focused on high-priority user stories, I was able to stay in scope and meet my deadlines.

The interactive prototype received high usability ratings during the first round of usability testing.

While there is still room for many improvements during future iterations, the usability test indicates that users are able to quickly and consistently accomplish their goals with the designed digital storefront. With the core functionality successfully established, design efforts can focus on further improving the user experience.

Learnings:

Information architecture and content strategy are interconnected and should be developed at the same time.

As you develop effective information architecture,  you must already have a general idea of all of the content you want to include, as well as what format you want to present it in. It is very hard to develop wireframes or site maps without taking the time to thoroughly understand what information users need to accomplish their goals.

Progressive disclosure can be the key to simplifying complex processes.

In a process with as many variables as creating a custom-made piece of apparel or merchandise, it is crucial for designers to actively reduce the user's cognitive load. By utilizing techniques such as progressive disclosure, a designer can simplify complex processes into manageable bite-sized tasks.

Perfectionism has its place, but it isn't in a design sprint.

This prototype is the result of a 2-week long solo design sprint. As much as I would have loved the opportunity to further iterate and improve upon my design, this project required that I work within a short timeframe. Under this timeframe, I needed to prioritize functionality over aesthetics. As a very detail-oriented person, this was difficult for me; however, I continually realigned my efforts with the scope of the sprint and focused on completing the MVP successfully and on time.

Let's work together!

Looking to add a new product designer to your team? I would love to hear from you!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.