Wrap Queens

Spend the season testing, not guessing

About the project

Wrap Queens is a seasonal gift wrapping service that needed an online platform.
Challenge:
After a successful 2020 launch Wrap Queens was looking to expand and streamline their business for the 2021 season. Create an advertising and e-commerce site to stimulate business and automate the ordering process.
My Role
  • User research & Analysis
  • Persona creation
  • MVP definition
  • Wireframes
  • UI design and Prototyping
  • Branding, Illustration, & Icon design
  • Usability testing

The Process

Define, Research, Ideate, Deliver

I used an agile UX process to develop the Wrap Queens site in order to focus on users and their needs at each phase of the design process.
‍
  • Conduct User testing to unveil unexpected pain points
  • Define MVP's
  • Focus on research results to provide users with features that they really need.
  • Create user based Personas
  • Develop a UI branding that keeps the Wrap Queens feel but builds brand trust.
  • Define user and task flows based on research and user feedback.
  • Develop wireframes and prototypes in fully responsive scale.
  • Conduct Usability testing with high fidelity prototypes to identify opportunities.

The Research

Research

I conducted six one-on-one user interviews in order to define the problem gain user insight. Half the participants came from the product owners and the other half I sourced from my own network. Questions were focused on competitor comparisons. Users navigated five different sights and provided feedback based on their experience.
Results:
  • 66% commented on sites feeling trustworthy based on clean and updated UI. Solution: Site needs clean/simple UI.
    ‍
  • 83% enjoyed seeing photos of beautifully wrapped presents. Solution: I need to source photos of gifts from product owners stock.
    ‍
  • 66% commented on the need for clear omnipresent navigation. Solution: provide a navigation bar that stands out from the rest of the site.
    ‍
  • 50% did not enjoy script that was difficult to read or understand quickly. Solution: Find a typography choice that is whimsical, yet easy to read at first glance.

Personas

Based on the research I set up two personas. I referred to them throughout the entire development process.
‍
  • Each persona is a synthesis of the users I interviewed, and represents real goals and fears.
    ‍
  • Personas goals/needs and frustrations/fears information is based on their experience with wrapping services and consumer trust. They guided the features and layouts of every page throughout the design process.

MVP

User research and persona development showed the pain points and goals of each user. Using this data I found that the main features that needed to be provided would be:

  • About page, providing users a personal view and building trust of the people handling their packages.
  • Ordering and purchasing process that was quick and simple.
  • Contact form to quickly reach out and ask questions.
  • An Explanation of the Wrap Queens process.
  • Customer reviews from real people in the users community.

MVP

User research and persona development showed the pain points and goals of each user. Using this data I found that the main features that needed to be provided would be:

  • About page, providing users a personal view and building trust of the people handling their packages.
  • Ordering and purchasing process that was quick and simple.
  • Contact form to quickly reach out and ask questions.
  • An Explanation of the Wrap Queens process.
  • Customer reviews from real people in the users community.

User Flow

I created this user flow based on the MVP's. The concept is simple and to the point. Simplifying and decluttering the site was the research based goal.

Ideate

Prototyping

Wireframes:
With quality research in hand I created wireframes for the site based on the user flows.
Methods:
  • Stay simple. Don't overwhelm users with too much.
  • Stick to the MVP's. Creating just two process. Landing and ordering.
  • Create consistency. Align all objects and text within a 5 column grid.
  • Use best practices. Don't reinvent the wheel. Show users the flows they are used to.

Visual Design

Designed with simplicity in mind

With the personas in mind I designed the final screen using Figma. I conducted A/B testing as well usability testing during the process to define patterns, elements, colors, and interactions.The design is a simple and whimsical feel incorporating both icon illustrations and warm seasonal photography. I designed all the illustrations myself.

Designed with simplicity in mind

With the personas in mind I designed the final screen using Figma. I conducted A/B testing as well usability testing during the process to define patterns, elements, colors, and interactions.The design is a simple and whimsical feel incorporating both icon illustrations and warm seasonal photography. I designed all the illustrations myself.

The Big Finish

What have I learned from this project?

  • Research is paramount: -I would not have reached the final design without extensive competitor research. The user interviews revealed so much unexpected information and really guided a user centric design.
    ‍
  • MVP's help bring simplicity: - By defining, early on, the MVPs of the design I was able to "trim the fat" before the fat ever existed. I let the most important aspects of the design really drive the needs of the entire site.
LinkedinEmailFacebook
© 2021 jesseklug.com. All rights reserved.