GiftOn

GiftOn

Sketch, InVision, Adobe Creative Suite

The final desktop and mobile screens are shown above. Scroll to bottom for prototype and full desktop view.

Project and client background

GiftOn was founded in Chicago in 2016 to provide ideas and inspiration for memorable gift giving experiences. It’s populated with user generated content and monetized through ads and optimized for mobile. Client research showed the “most effective source of gift ideas is another person’s narrative about what made that gift special.” GiftOn targets mostly female users and retail brands that advertise as their customers.

The client asked for a design for their new community spotlight section, posting preview and posting screens and an improvement for the Log In/Sign Up flow. She also requested designs to aid users in searching for other users and posts, and a consistent treatment for user identification. The set of annotated screens can be viewed here.

The client provided annotated screenshots for her idea of the new community section and messaging to give us a reference point for designing that section. Further client notes about other sections can be viewed with the link.

Understanding the client and the competition

We arranged a kickoff meeting to hear the client's thoughts on the current product, users and user experience. We also needed to understand the taste level and visual preferences that stakeholders have in mind for the future of the product.

We also looked at the competition. Since GiftOn is a product that not only can inspire people with gift ideas but provide a platform for sharing those memorable moments with a community, the team performed a visual competitive analysis of two kinds of sites. Sites we viewed some that focus on gift ideas like Etsy, Gifts.com, Personal Creations, Greetabl and ToxicFox. We also looked at online communities that inspire people like Instagram, Pinterest, and SnapChat.We felt this combination would help us craft some design principles and establish a starting point for design exploration.

The visual analysis gave the team clues as to what was currently in market for both categories. Sites like Gifts.com and Personal Creations used multiple card sizes, type sizes and too many colors and were visually noisy. These produced a shopper feeling, which is exactly what the client wanted to avoid since GiftOn is about stories and inspiration, not commerce.

Etsy and Greetabl had a more sophisticated use of typography and simpler layouts. I decided GiftOn should lean more toward those. This approach was better for a social site.

Some of this analysis provided inspiration on visual directions for the brand and product. I was inspired by the proximity of interaction options in Instagram, the simplicity of layout in Amazon, the colorfulness and fun of Waze and the card treatment of items used in ToxicFox.

With our research and client communication complete, the team needed a guide to inform and validate our design decisions. We each listed goals for the user experience along with the specific design techniques that could be used to achieve those.

Finding the right style

After being informed by our research and establishing design principles, I explored three style directions. I intuited the client didn’t want a completely new and unrecognizable design for her product and brand. My experience and instincts led me to an approach less divergent and more actionable. The post story and image card was important to the client so I used it as the keystone for all tiles. This approach was more immediately recognizable as a solution that could be iterated as design resources and user testing became available.

Style 1: This design used the current color palette and introduced a neutral background color to unify the brand colors and create a welcoming feeling. Consistent treatments of rounded corners for shapes and buttons created a friendly, easy-to-use interface. I used Helvetica to aid clear and legible information.

Style 2: I added a teal and brown color to the palette to warm it up and create a less gender- specific impression from client preferences. Icons, buttons and avatars became more rounded to create a more personal and comfortable interface from our design principles. I introduced textures to create a sense of delight to the user experience which was also a design principle.

Style 3: More bright colors in this design aided in the hierarchy of messages and typography and provided a visual system on backgrounds without user-generated photography. The background colors helped define gift categories and create an increased sense of fun for users, particularly when viewed on the desktop. I used a gradient in the bookmarking icon to promote more interaction and social engagement, and a more contemporary font to hint at the creative playground of the user experience.

Client feedback: The client reaction to the style exploration was generally positive. She liked the attention paid to icon styles and the way the story seemed more integrated into the post image with the shape containing the headline and interrupting the image container. For style one, she expressed she was “so happy to see this,” referring to use of her current brand colors with the background color addition. For style two, she especially liked the color palette, typography and tagging treatment. In style three, she found the bright colors to be too “shopper-centric” but loved the type treatment in the post.

Client feedback: The client reaction to the style exploration was generally positive. She liked the attention paid to icon styles and the way the story seemed more integrated into the post image with the shape containing the headline and interrupting the image container. For style one, she expressed she was “so happy to see this,” referring to use of her current brand colors with the background color addition. For style two, she especially liked the color palette, typography and tagging treatment. In style three, she found the bright colors to be too “shopper-centric” but loved the type treatment in the post.

The client reaction to the style exploration was generally positive. She liked the attention paid to icon styles and the way the story seemed more integrated into the post image with the shape containing the headline and interrupting the image container. For style one, she expressed she was “so happy to see this,” referring to use of her current brand colors with the background color addition. For style two, she especially liked the color palette, typography and tagging treatment. In style three, she found the bright colors to be too “shopper-centric” but loved the type treatment in the post.

From Styles to Screens

I created a set of screens for the first round of user testing that captured the client and stakeholder comments and preferences. The challenge was combining these three styles into a design that also captured the design principles. I chose and edited visual elements with both criteria that could still produce a brand starting point. At this point, users only looked at static screens to capture an understanding of the product purpose, brand feel and initial flow.Below are the screens and iterations based on user testing.

The Users In Action

I created a second iteration with significant design decisions for the next round of users in the test. Those are shown below with a description of what I addressed and why. In this test the users interacted with a working prototype.

I revised the copy and type treatment for the headline on both pages to make it seem more like a CTA and include the reason for posting.

I created solid color areas, included an illustration, increased the contrast in the icons and added a shadow for the buttons. I also added decorative elements to the section headlines. This all promoted a sense of fun to engage the users to interact more.

A added a light beige to the background for a more friendly feeling and a magenta button to the bottom to increase posting by users.

For the post preview state, I added a brightly-colored area to surround the post preview content. I made the icons larger and simplified the user identification section to reduce visual noise on the preview page.

I introduced colorful photography that showed the gift in use and people interacting for authenticity.

I added space above and below the buttons for posting options to engage interaction. The Popular Tags section was simplified and the self-tag link was highlighted with color.

For the main post state, I simplified the typography and layout, and moved the user identification to the top to clearly indicate who wrote it and encourage users to follow each other.

These revisions produced a more positive response from users during testing with the prototype. Users indicated that the site seemed fun and would engage in it for inspiration for gift ideas. This second round of user testing produced more interest and understanding of GiftOn’s purpose but still lacked sufficient incentives for posting. My next round of designs addressed that problem along with other refinements.

High-Fidelity Screens

With the results of the last round of user testing I iterated once more on the designs to produce a set of hi-fidelity screens. The client requested we investigate a design for the desktop home page, a treatment for sponsored posts and a treatment for people and gift search results.

Home Screen for Desktop: I used my revised copy and design for the header and included gifting categories as the first section from user feedback. The popular tags and featured collections became cards and moved to top left of page. I made cards consistent because the likelihood of odd-sized user generated photos like on Pinterest was probably not realistic. This consistent size also maximized numbers of gift posts in the visible area. Posts without user-generated images were assigned generic artwork due to client cost concerns for custom illustration. Sponsored posts allow for both product and people-focused photography. I designed the content using a three-column layout easily responsive for mobile while being comfortable and big enough at a desktop view. This is the link to the full desktop design.

Onboard Screens for mobile: I wrote new copy for the home page to more clearly indicate the site purpose. I also changed the illustration as the previous one led users to believe it was for DIY gifts.

I chose the new illustration to be more obvious about the gift-giving purpose of the site and to demonstrate to Tatyana the value of using illustration for seasonal occasions. I used the client home page copy as the CTA for the start of the posting, as it was perceived as more of a call to action than a headline in user testing.

Posting Path Screens for mobile: After user testing I consolidated the posting path to one scrollable screen with familiar UI patterns and icons to make posting easy. The new preview post screen allowed users to start over or go back, which was requested in user testing. I clearly showed category tags at the bottom to encourage users to tag posts. The final post screen had strategically-placed icons for bookmarking and social sharing. The interaction options were clearly visible at the end of story with a comment input field and add button nearby for ease of interaction. I added buttons for finding the latest and popular posts and a bright floating button for new posts as well.

Prototype and style guide

I created a final prototype using Sketch and InVision. Image below contains link to prototype.

For further exploration by future designers I created a style guide for reference.

What I Learned

I learned the value of user testing. My initial approach to the first round of user testing was liked by the client but proved unsuccessful in user testing. The client had assumptions and biases going into projects and it was important to evaluate them more clearly. I also learned it’s important to communicate the context and meaning of user testing results to overcome those assumptions and ensure the success of the product.

The team experience not only provided support when user testing didn’t go well, it provided ideas for improvement as we watched the reactions and comments. We were also able to coordinate and leverage each other’s special talents to get the project done faster with a higher level of quality. I look forward to the next team client project.