SPLENDIGIFT

An online gift shop to help you find the perfect gift.

splendigift-snip.png

Details

Screens: Mobile

Role: UX Research, UX Design

Working Files: click

Tools: Adobe XD

Problem

 

Users need a service to find and order “the perfect gift.” Some services only sell certain types of gifts, some only sell for certain gift occasions. Some services are confusing or hard to browse.

Solution

 

Enable users to easily shop for highly-rated/positively-reviewed gifts for any occasion and any gift recipient, so that they can be confident and satisfied in their choice of gift.

Requirements

 

I determined these requirements from my research:

  • Users can view all product collections

  • Users can view products formed into collections

  • Users can search for products

  • Users can filter on pages by things such as pricing, ratings, and product options

  • Users can navigate to individual products

  • Users can view more information on individual products, such as pricing, product options, and ratings

  • Users can manage their cart, including adding and removing items

  • Users can purchase products in their cart

  • Users can utilize a coupon

  • Users can add a gift message

  • Users can add a shipping address separate from a billing address

  • Users can access the home page

RESEARCH

I searched Google for similar services and did a quick competitive comparison. I chose this method first because I needed to gather information on what was popular and relevant to that industry in order to craft my research plan.

From these comparisons, I learned that each site focuses on a different aspect of a gift: the "perfect" gift vs. the "popular" gift. Suggestions on selecting "the perfect gift" were present on both sites. Bestsellers and seasonal options such as Easter gifts were displayed prominently.

There were also options to filter by delivery zone, price, gift recipient - i.e. parent, spouse, child. Details such as shipping speed and multiple coupons/discounts were everywhere. Reviews didn't seem to be a large factor, although star ratings were visible.

From this comparison, I knew I wanted to focus on five areas:

  • What of these services are familiar?

  • Who are the recipients of these gifts?

  • When are these gifts given?

  • What are the top two considerations when choosing a gift?

  • Demographics data to help inform user personas, however, it would be optional.

I posted this to my Facebook page as well as some UX Slack workspaces I belong to. I received 16 responses. I set the threshold for focus at +/- 8 responses, which left me with these:

  • Gift Ordering Services Used: Amazon, Edible Arrangements

  • Gift Recipients: Parent/step-parent, Sibling/step-sibling, Partner/spouse, Myself

  • Gifting Occasions: Birthdays, Valentine's Day/Sweetest's Day/Romantic Holiday, Christmas/Hanukkah/Kwanzaa/Winter Holiday, Major life events (Births, Deaths, Marriages), Minor life events (Moving, new job)

  • Primary Considerations: Item has high rating/positive reviews

  • 68.8% Female, 31.3% Male

  • 50% aged 25-29, 18.8% aged 30-35, 12.5% aged 36-40, 6.3% aged 18-24, aged 41-50, aged 51+

DEFINE

Based on the survey responses, I identified a list of tasks that users should be able to complete within this app. I then mapped those to basic page flows in order to begin to build out a list of requirements. This also helped with information architecture as I could draw relationships between content on the same page.

I identified five main screens from the user tasks: Homepage, Product Collection, Product Detail, Cart, and Checkout. Some elements appear on every screen, such as the navigation bar, and at least one product name and price. There was also an opportunity for a lot of re-use with simple screen variations such as Product Collection filtering for recipient, or occasion, or price, or type, et cetera.

WIREFRAMES

Every screen started with the same navigation bar for consistency. I also created a lot of elements that I knew would be reused in multiple places - the page header, the dropdown, the different variations in the product boxes, and of course, buttons. The options for a specific product are actually modified versions of the filters from the Product Collection screens. The reviews section at the end of the Product Detail screen reuses a lot of the H3 and P text styles from further up on that same screen for consistency..

Very few things were specific to a single screen or “one time use”, but I developed a few. For example, the promo on the homepage utilizes the H2 style over the basic image placeholder because it’s more prominent content piece than a regular image.

Previous
Previous

Internal URL Redirection Tool

Next
Next

Online Grocery Store