Gifton

Overview

Role

UI Designer

about Gifton

Gifton is a website to post personal stories about gifting experiences and to find inspiration. It aims to be the only platform that focuses on creating emotional connections to gifts and products through the power of storytelling.

DEFINING THE PROBLEM

Americans spend more than $600 billion on gifts annually, and the average person purchases 16 gifts a year. Thinking of unique and sentimental gift ideas, whether it’s for a birthday, holiday, or special occasion, is a challenge for even the best gift givers. People need a space to share heartwarming stories about great gifting experiences to hopefully inspire others with ideas and to post their own experiences and stories.

The challenge

My team of three UI designers and I were responsible for redesigning the Gifton home page and posting flow for mobile web. We worked closely with the CEO, Strategist, and Developer to revamp their current website to feel fun, effortless like social media, and to evoke a positive emotional experience with its users. I created style tiles, high fidelity mockups, prototypes, and a style guide to present at the end of week long sprints.

Competitive Research

Visual Competitive Analysis

My team completed a visual competitive analysis in which we researched a variety of platforms similar to Gifton’s. Our two main areas of focus were platforms for gift inspiration and social media. We sought out well used design patterns and trends that we could incorporate into our own designs for a fun, effortless, and inspirational user experience.

Gift Inspiration Platforms: Gifts.com, Giftagram, Xiaohongshu, Etsy, Pinterest, and Amazon.

Social Media Platforms: Tumblr, Reddit, Twitter, Snapchat, Instagram, and Facebook.

Design takeaways

Typography: Rounded sans serif fonts felt lightweight and friendly.

Imagery: User generated images were more effective in drawing people in to reading posts than stock photos.

Layout: Cards were effective in laying out content in a clean and easily digestible way.

Color Palette: White and light colors evoked a happy, fun, and friendly mood.

Element of fun: Illustrative icons and elements contributed to a lighthearted and celebratory feeling.

Feeling effortless: An organized and simple layout with endless vertical scrolling made scanning content simple.

Connected to the community: Visible social interactions contributed to a feeling of being connected to the community.

Getting inspired: Images and story previews evoked quick reactions, which contribute to feeling inspired in return.

Looking at various platforms for visual inspiration: Instagram, Xiaohongshu, Facebook, and Etsy.

Design Explorations

style tiles

I presented three style tiles to offer different visual design languages and moods to move forward with when designing for Gifton. Each style direction was created to showcase how icons, typography, color palettes, and interface elements would look together in the context of a storytelling site.

The minimal white, light blue, and bright pink color palette was chosen to help users feel relaxed and cheerful so they feel comfortable sharing their personal stories with the Gifton community. The ample negative space, sans serif font, and thinly stroked icons were used to feel friendly, simple, and approachable.

The bright color palette and colorful icons were used to produce a fun and exciting experience for users. Images for featured collections were highlighted with a colorful stroke to quickly catch users’ attention to help with finding gift ideas.

A muted pink, green, and navy blue color palette was chosen to comfort and inspire users to browse and post their gifting experiences. Fun icons were used to encourage interactions within the Gifton community, and colorful call to actions easily caught users’ attention.

The Scope

DISCUSSING THE needs

The client presented to my team the mockups that she had designed to help guide us in what she envisioned for the redesign of Gifton. She stated that the home page and posting flow were in need of the most work and to be our two main areas of focus. We discussed what what was required as necessary or unnecessary and were tasked to explore the possible design solutions to the problem areas.

Visual Design Goals

Design Principles

My team and I created three design principles that would best represent what Gifton’s and my team's visual design goals were for the website. Our client emphasized that she wanted the new designs to feel fun, inspiring, and less “bloggy.” The design principles were to be a reference whenever possible so our designs continue to remain consistent with the client's needs and in the visual language throughout the design process.

User Testing: Round I

TESTING DESIRABILITY

For our first round of user testing, my team and I interviewed four potential and current users to examine their emotional response to our individual designs of the home page. Our main goal was to gain insights about the look and feel of our designs so we can iterate, strengthen, and validate our design choices for the second round of testing.

To find insights on users’ emotional response to the designs, we asked questions, like “What emotions do you feel when looking at this site? Does it remind you of any other sites?” It was important that the answers we received were open ended and actionable so we can continue to iterate our designs to our client’s liking. I received valuable insights, which I analyzed to further improve my designs for the next round of testing.

Version 1 of the Gifton's home page I user tested.

Insights From Version 1

Insight: The design didn't evoke feelings of excitement and fun.
Goal: Explore other color palettes, icons, and design patterns.

Insight: Site looked "bloggy" and seemed to target people who liked to read a lot.
Goal: Shorten the post previews and rearrange layouts of the cards.

Insight: Users didn't know what the background texture was and found it distracting.
Goal: Explore other fun background patterns that are not distracting from the main content.

Insight: Users found the post button easily, but it hid the content behind it.
Goal: Put the post button into the bottom navigation.

A/B Testing for desirability

After receiving similar feedback regarding the lack of excitement felt in the first design, I quickly iterated before the second half of user testing and chose a different background, card layout, typeface, and color palette in order to A/B test which design felt more fun and similar to a social media site.

Version 2 of the Gifton's home page that I A/B tested with version 1 of designs.

User Testing: Round 2

TESTING USABILITY

The goal for the second round of testing was to see how users navigated task flows and functionality of UI elements and to test the usability and learnability of the designs through an Invision prototype.

I asked the users questions and prompted them with specific task flows. An important feature on the site was to post a gift experience, so we asked users, “How would you share a gift experience you had?” We tasked them with searching, reading, and saving posts and followed up with questions asking if there was anything confusing or surprising about the flow they just completed.

Version 3 of the Gifton's home page I user tested for usability.

Insights From Version 3

Insight: Users enjoyed the background – it felt fun and was easy on the eyes.
Goal: Continue to play with the opacity and saturation of the colors.

Insight: Users liked seeing categories at the top for quick and easy inspiration.
Goal: Continue to explore different ways categories can be displayed.

Insight: Users liked being prompted with what to write about when posting.
Goal: Explore other ways to include this on the page without taking up too much space.

Insight: Stickers added a fun element to the photos and posts.
Goal: Change the sticker icon so it is more noticeable.

Insight: Users didn't like having to scroll to the bottom to find the "Post" button.
Goal: Move the post button to the top for easy access.

The Solution

The Final mobile design

With all the insights, feedback, and multiple rounds of interviews and iterations, I created the final version of the home page and posting flow that I presented to the client at the end of our three weeks together. The CEO loved my design, and shortly thereafter, she made changes to the site to reflect my work, like the background, buttons, color palette, and more. It was encouraging and exciting to see my original work greatly appreciated and seen on a website.

Final product for Gifton's home page.

Final product for Gifton's posting flow.

Final product for Gifton's "Search" and "Categories" pages.

Try out the prototype!

Desktop version

I presented to the client a desktop version of the Gifton site to show how it can potentially look on a larger scale. I chose to put a clearly visible search bar at the top of the navigation bar as well as pages where users can read about Gifton, view all the categories, and explore posts from the community to easily find inspiration.

Desktop version of Gifton's Home page

Wrapping Up

Future Considerations

In our last client meeting with our team, we suggested future considerations we had for them – ones our team was unable to tackle because of time constraints. The recommendations were based on insights from user testing and our own suggestions that would further enhance the gift sharing and inspiration experience.

Users were confused as to what the logo was and what it represented. Having a more clear and original logo would help identify and represent the brand.

Users wanted to see more inspiration from posts and categories before being suggested to follow people. Users were unclear how suggested people to follow were curated if they were a first time user.

Users stated that it was unlike they’d post their own stories, but instead use the platform to find inspiration. If there was an incentive to sharing, possibly more people will post.

Check out my other work!