GIFTvalet (Responsive Web Design)
Project Overview
The Problem:
You've just realized it's May 11th and your wife's birthday is tomorrow. You remember she pointed out a gift 3 months ago, but you can't remember exactly what it was. Stores are closing and ordering anything online won't arrive on time. How can users avoid making this stressful mistake in the future?
The Goal:
GIFTvalet gives users a place to save ideas, find inspiration and automate gift giving to ensure that no one is forgotten.
The Product:
GIFTvalet is a site designed to ensure that users never forget to give a gift to loved ones on the most important days of the year. The target audience begins at 18+ and is geared toward people who sometimes forget what day it is. Users can preselect gifts that will automatically be delivered in time for the special event.
Responsibilities:
All elements of UX research, paper & digital wireframes, icon design, as well as the creation of both lo-fidelity and hi-fidelity prototypes.
User Research: Summary
I used to be really good at gift giving. That was in my youth, when I had fewer responsibilities and more time to be creative. As an adult, I find that holidays, birthdays and anniversaries sneak up on me and I find myself rushing to ship a gift overnight or hurriedly trying to arrange a gift certificate and praying that the date of purchase does not appear in the email. In conducting my research, I found that I was not alone.
Potential users had a wide range of responses to the usefulness of an app like this one. Whether it is a helpful reminder to make a purchase, a thoughtful suggestion specific to the recipient’s preferences, a place to note favorite gift ideas or the ability to automate the process and eliminate mistakes, all of the users surveyed had very specific applications for a site that would help in this way.
Persona #1: Margaret
Margaret is a retired grandmother of 9 who needs an actionable list of gifts for each child because she never wants to miss a birthday or special event.
Persona #2: Sam
Sam is an active army officer who needs to pre-arrange gifts for loved ones because he may not be able to get gifts in a timely manner otherwise.
User Research: Pain Points
“I forgot it was today!”
With busy schedules, we are able to automate bill paying but not joy of giving a gift. Forgetting a special day doesn’t just hurt the recipient but the giver feels guilt and often ends up spending more money to make it up to the loved one.
“I didn’t know what you wanted!”
Yes, we live with them, but we don’t live in their brains. Sometimes something seems right but doesn’t impress the way we hoped it would. It would be helpful to be able to note things specifically mentioned so that they can be purchased for those special occasions.
“I’m too busy to shop!”
Going to stores is rare and leaves a giver at the mercy of the inventory in stock. Being able to set up alerts to be able to get the perfect gift in advance can be helpful in arranging for the perfect present.
“It won’t ship in time!”
Last minute shopping. Hefty shipping fees. And it still won’t arrive on time. You’re empty handed. It would be helpful to be able to be guaranteed that something would arrive on the day.
User Journey Map
When considering the needs of users, I recognize that users often get caught up in the day-to-day responsibilities. By front-loading gift giving, users can interact with the site as needed without being surprised when an important date approaches.
Paper Wireframes
My research suggested that users would want the following information on the landing page:
Upcoming Events
Recipients still needing gifts
Suggestions of trending items for upcoming events.
Digital Wireframes
For the Calendar page, users can see the whole picture of recipients and gift selection. Research participants expressed stress when trying to purchase a gift for someone with preferences different from their own.
From this page, users can see each recipient, the events assigned to that person and whether a gift has already been selected. Further down, users are provided with suggestions of trending gifts that fit the demographic of the selected recipient.
The goal of this site is to ensure that gift givers are getting things their recipients love AND that they are getting things in time for the event.
From the Recipient page, users can set a notifications, see linked shopping lists/registries and again get suggestions specific to this recipient.
Low-fidelity Prototype
A user can log in and identify any recipients missing a gift selection for a specific recipient. The user chooses a gift that has been previously saved for any type of event and then they have assign the gift to the recipient's birthday. At the end of the flow, the user can return to the Home page.
Usability Study: Findings
Because this site is an unconventional type of ecommerce site, some of the structures challenging to anticipate. Usability studies helped to identify pain points the users may experience while trying to maximize their use of the tool. Below are some of the findings that guided my revisions in the design.
Round 1 Insights
Labels for the Profile and Quick Add Icons would be helpful.
When adding a product to the wish list or gift list, there should be an indicator to confirm that it was added.
Add trending items to the wish list page for easier shopping.
Round 2 Insights
There are buttons to add events and recipients but there aren’t any to delete events/recipients.
Notifications on the homepage is not engaging. Wouldn’t make me want to buy anything.
Having icons on the calendar on the calendar page will help users see their monthly obligations.
Mockups
While developing the mockups, I realized some redundancies in buttons on the layout. For the mockups, I removed the duplicate actions and utilized the space for sales promotions specific to the upcoming event in the notification box.
When revising the Calendar page, users expressed concerns about the empty calendar. Adding icons to the calendar and highlighting the icons of the selected recipient gives the user a better perspective of the expectations of the month.
Mobile Mockups
High-fidelity Prototype (Desktop & Mobile)
Accessibility Considerations
Hierarchy
In order to ensure that all users and any assistive technology could properly read the pages, I was very intentional with the use of fonts sizes and hierarchy. I want to make sure that all users can access the site.
Containment
Different sections within a page are contained. The user will know the difference between different capabilities not only by the heading, but also by the differentiation of colors and shapes. The same practice has been used throughout the various parent/child pages.
Contrast
I’ve used tools to ensure that my color scheme has a high contrast ratio to guarantee access to users.
Takeaways
Impact:
GiftValet users have important people in their lives but for a variety of reasons, they need help remembering to get the perfect gift to show just how much they’re appreciated. Our users are busy and are looking to accomplish a goal, thoughtfully but efficiently. As a result, the design for the pages are clear and concise. They allow users to navigate across pages and accomplish their goals in a timely manner.
What I learned:
In this project, I was able to explore the process of developing a responsive web design. I learned to be considerate of the user’s path in both desktop and mobile to ensure synergy between the two interfaces. Users need to be able to jump between the interfaces as needed and feel confident that they can accomplish their intended task successfully.
Next Steps
Further develop pages to allow users to delete and edit recipients & events.
Generate shareable pages that a user or their recipient (if the user chooses to share) can complete to better refine the suggested gifts.
Create payment/subscription pages to define users’ understandings of the site’s service policies.
Thank You...
for taking the time to view my design. I welcome you to explore my additional work on the rest of my site.