GiftOn
Gifton is an inspirational website where people share their stories about unique gifts. It aims to be the only platform that focuses on creating emotional connections to gifts and products through the power of storytelling
Role: UI designer
Client: GiftOn
Software: Sketch, Photoshop, Illustrator, Invision
Overview
Gifton's main request was redesigning the whole interface of the existing app, focusing on a mobile web experience. So we started with defining business needs and existing problems with the website. For the first meeting with a client we put together a deck in which we included a quick visual test for Gifton in order to gain a greater understanding of how they envisioned their brand. Through the visual exercise and following discussion we learned what they were looking for :
-
Fun, colorful design
-
Easy and effortless posting
-
Sense of the community around the gifting experience.
Business insights and needs
-
The intended audience was predominantly women, similar to Pinterest’s users
-
The design should focus on the story in the post instead of the image
-
push the user experience toward mobile-first interactions
-
Make app more gender neutral
User needs
-
Be able to share personal story at Gifton application
-
Interact with supportive and enthusiastic community
Gifton was open to exploring new visual directions and clearly communicated what they wanted their product to feel like. The primary goal of the redesign was to make the site inviting to new users and promote interactions that would build a strong community on the platform.
Kicking off
Brainstorming
After the meeting, my team immediately began to brainstorm ideas feel, while bringing a distinguishing element of fun and playfulness to the product. We started the research by analyzing women-focused websites from which to draw inspiration. We were eager to create a design that evoked an easy-to-use application with a social media feel just like my client mentioned.
Competitive Analysis
We 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 put aside well used design patterns and trends that we could incorporate into our own designs for a fun, effortless, inspirational user experience.
As direct competitors, we analyzed websites specializing in gifts, gift ideas and e-commerce.
( Greetabl, Etsy, Gifts, Personalizationmall )
( Instagram, Tumblr, Pinterest, Facebook )
As inspirations, we analyzed websites with the similar look of social media platforms that our CEO wanted to achieve. That included Instagram, Tumblr, Pinterest, Facebook.
Typography: Rounded sans serif fonts felt lightweight and friendly.
Imagery: User-generated images were more effective in drawing people into 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.
New features and problem areas of existing product.
At the meeting with our client we found out that not only website wants to build new features, they want us to fix existing problems and inconsistencies with design and functionality.
New Features
Problem areas of the app
We addressed a large amount of work, which included:
-
Rebranding, giving the company a new look and feel ( "less bloggy", more fun and inviting)
-
Getting rid of many existing inconsistencies on the website ( including picture sizing, font usage and overall aesthetics.
-
Building new features, including new posting flow, community spotlight and search results.
Defining the Path
We created three design principles that would best represent what Gifton’s and bussinese'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.
Creative playground
We want users to feel delighted while browsing the websile
Easy as a pie
Posting should be easy and effortless, users should see familiar patterns and design elements.
Inspire from within
Users should feel welcomed and inspired to post their own story.
With design principles to guide our work and a wide array of inspiration to draw on, we felt well equipped to begin our individual explorations for Gifton. I was personally inspired by the design principles our team developed and wanted my designs to directly reflect them. The fun aspect stood out to me particularly in a very illustrative and organic form and I was excited to try a very playful direction. I communicated my design ideas to Gifton in the form of three unique style tiles, each of which played up a certain guiding principle.
Style Exploration
Keeping in mind Business needs, user goals and existing problems, 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.
Creative vibe and artistic inspired theme with custom-made picture frames 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.
Creative vibe and artistic inspired theme with custom-made picture frames 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 minimal blue, purple and violet 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 minimal blue, purple and violet 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 big color blocks were used to produce a fun and exciting experience for users. Images for featured collections were highlighted with a colorful frames to quickly catch users’ attention to help with finding gift ideas.
The bright color palette and big color blocks were used to produce a fun and exciting experience for users. Images for featured collections were highlighted with a colorful frames to quickly catch users’ attention to help with finding gift ideas.
User Testing: Round 1
For the first round of testing I designed a long-scroll homepage consisted of header, community spotlight, latest posts, featured collections and popular tags.
Great aesthetics, friendly rounded shapes, fun colors, creative take on a hero text.
Not everybody liked gradient.
Users preferred browsing stories instead of being offered to follow people right away.
Play with the color system more in order to reach the goal of gender neutrality
Fonts, buttons and icons were legible and clear for the users.
Too much emphasis on a picture instead of a story.
Client wanted different (not blue ) post background.
Explore different background color options, add social media tools.
Client and users liked the style of featured collections.
Client decided to get rid of popular tags.
User Testing: Round 2
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.
Added description
Not everybody liked gradient. Users preferred browsing stories instead of being offered to follow people right away.
Play with the color system more in order to reach the goal of gender neutrality
Final Design
The Gifton team really liked and appreciated all of our designs and expressed that they would be quick to implement changes to their site. They still loved the social media feel and layout of my cards, with a profile image and name up top to communicate that these were stories from real people, and a bold header to draw the user’s attention to the story without overwhelming them with text. They also liked my proposed treatment of sponsored posts.
What I Learned
Working on this project allowed me to explore designing for an audience I was less familiar with. It was really fun to step out of my comfort zone and learn about other websites and corresponding visual elements that appealed most to our target audience. I can actively collaborate with engineers and clarify or build on any designs throughout the lifecycle of a product. From several years of working in tech I know that priorities or business objectives often change. As a designer, I want to be an available resource in that process so as to create the best possible final product for the users.