Project Decibel

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.

present.png

DEFINING THE PROBLEM

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.

GO_ST1.png

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

2.png

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.

5a98384147dc62000159e406_VCA screens.png

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.

ST1.png

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.

ST2.png

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.

ST3.png

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.

5a9839ccd790df0001e7d15f_Home Page Wiref
5a983a77798a010001645a86_post flow wiref
 

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.

5a983c93798a010001645ce4_DP.png
 

User Testing: Round 1

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.

5a987916b121860001388900_1design.png

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

INSIGHTS FROM DESIRABILITY TESTING

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.

5a987c0a2fa8fa00017aa374_design2.png

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.

5a987b372fa8fa00017aa321_design3.png

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

INSIGHTS FROM USABILITY TESTING

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 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.

5a988d1b3f7b610001b31073_Group 61-p-2000
5a988d312fa8fa00017ab84d_Group 72-p-2000
5a988d49bb843f00017af8dc_Group 79-p-2000