Home Page Redesign
The biggest online shopping guide website with thousands of discounts, promotions, and coupons of all categories.
• Balance the engagement between search and browse.
• Personalization will bring users back and provides real value to them.
• A product identity (logo, tagline) goes a long way in connecting with users and converting them into loyal advocates.
• Intermingle paid placements with offers
Coupon Codes is one of the savings types available to the users in Coupons.com. It provides online shoppers with a coupon code or deal that they can use for their online shopping and save money.
This project was to redesign the Coupons Codes Homepage. My primary responsibilities were to frame current problems, set up the design strategy, brainstorm with all stake holders, create wireframe and visuals, and test with users.
This page needs to create a great first impression of Coupon Codes in order to capture user’s attention enough so that they remember to use Coupon Codes directly (without prompts). The ultimate goal is to create an experience that becomes a part of user’s savings habit. Paid placements are big revenue drivers, so I wanted to treat placements as a design problem not a constraint, which meant exploring ways to balance presentation with user needs.
1. Study Current State
The goal of the homepage redesign is not only to create a great first impression of Coupon Codes, but also deliver better performing paid placements.
The requirements for the redesign project were very open ended. The team expressed their desire for a “better home page”, though with no clear objectives or outcomes. What did I do?
Framing the problem of our current homepage was the first step.
I spent time on Google Analytics & click stream data to understand user behavior on home page.
2. Stakeholder Interviews
I met with stakeholders (PM, Engineering, Marketing, Business Dev) individually & as a group to understand their expectations & requirements.
3. Summarize Learnings
I summarized all the learnings in a Design Strategy document.
The biggest design challenge for this project was to balance different user goals (consumers, business and retailer partners).
Ideate - Group sketch session
I designed & conducted a sketch session with the team to collaborate & generate a breath of ideas. The participants were product managers, project manager, visual designers, user researchers, marketing team, engineers, and business development. At the end, the team gained a common understanding of the goals and themes that we wanted to explore in the solution.
• Sketch ideas for one of the 3 problems, individually
How might we make home page useful for new/first time users?
How might we make home page a destination for retuning users?
How might we create more/better paid placements on home page?
• Form teams with people who holds different color stickers
• Build on the ideas of others to create one team home page
• Present concept to the group
• Group votes with the Stickers
My process was to start broad - explored concepts in the initial iterations and dialed down into depth & interaction design as we narrow direction. During the process, I reviewed regularly with the team and iterated on the feedback. I like to think of reviews as a design exercise (and not a critique), where I am designing a conversation about choices & intent.
Next I selected base colors which are typically used for background colors within a design. This could be the background of the entire design or the background of an element like a card or pop-up.
I selected 4 font colors for different backgrounds: a light font color for dark backgrounds and 3 dark font colors for light backgrounds. These allow designers to play with content, readability and visual contrast.
I tried different images and formats to not only impress the users but also show them what they can do here. I picked one big banner image on top as the final solution, because it will make more impact and have a focus.
Top Section Options
Offer Gallery Options
For the offer gallery, I tried 3 different options to organize the contents. Mixed content version showed coupon codes, brands, deals and special events together with same size pod. Grouped content version separated special event and coupon code offers in different sections. Pinterest style version had zigzagged pod with mixed content. I picked Grouped content at the end, because it's easy for user to understand and find what they are looking for.
Combined offers, deals
and special events
Seperated offers and special events in different sections
Zigzagged showing all
the different content
Hero Image Options
Since our target audience is mainly moms, so we decided to include kids in the photos. Besides, all photos need to show natural, real moments, and be friendly & engaging. We had curated photos for special events, like Valentine's Day, Thanksgiving and Christmas.
After several rounds of iteration, I finally came up with the new homepage design. We decide to have one cohesive design for both new and returning users, and personalized their top coupon codes section without telling them. For content, we separated offers, stores, and special events so users won’t get confused about what they are looking at. Also, I created icons for all categories and shopping events.
Final Deliverables & Specifications
I created specifications and prototypes for developers with Axure, and also designed all the error states for visual. The developers could get all the specs from Zeplin.
After the release, we monitored the “feedback” tab and Google Analytics. The metrics were very encouraging and the Business Development team was very satisfied with the new design.