How do you redesign a website that balances business goals and user needs? During my tenure at ICICI Bank, I was responsible for redesigning the gift card section of the bank’s website to increase gift card sales.
ICICI Bank
<span data-metadata=""><span data-buffer="">ROLE
<span data-metadata="">Product Designer
<span data-metadata=""><span data-metadata=""><span data-buffer="">WORKED WITH
<span data-metadata=""><span data-metadata=""><span data-buffer="">Business analysts, Developers, Leadership
<span data-metadata=""><span data-metadata=""><span data-buffer="">DURATION
<span data-metadata=""><span data-metadata=""><span data-buffer="">12 Weeks
<span data-metadata="">Approach
<span data-metadata=""> I tackled the project in three phases.
Discovery- Domain research, Competitor analysis, User research, Stakeholder interviews
Ideation- Persona development, Brainstorming, Strategy development & How might we?
Design- User Flows, Wireframes, High fidelity screens
<span data-metadata=""><span data-buffer="">Research & Discovery
<span data-metadata=""><span data-metadata=""><span data-buffer="">The research for this project entailed domain research, competitor analysis, heuristic review, user research, and stakeholder interviews.
As the sole designer on the project, I developed a research approach that combined new and known approaches. With the support of my manager, I reached out to stakeholders and current account holders to conduct need-finding and user interviews.
<span data-metadata=""><span data-buffer="">Goals
• Leverage findings to inform strategy and design decisions.
• Research best practices within our domain and discover how to differentiate ourselves from others.
• Assess the ICICI Banks website to identify usability issues that conflict with known best practices.
• Capture the user's voice so that it can be used to inform the design process and strategy.
• Discover hidden issues or complexities and determine the stakeholders' view of success.
<span data-metadata=""><span data-buffer="">Domain Research
<span data-metadata=""><span data-metadata=""><span data-buffer="">Coming into this project, I did not have much familiarity with the domain of gift cards. Therefore, my first step was familiarizing myself with the gift card market, the different types of gift cards, and how companies like ICICI Bank offer them to customers. I was also very interested in the type of customer that purchases gift cards and the reasoning behind their choices.
<span data-metadata=""><span data-metadata=""><span data-buffer="">Competitor Analysis
<span data-metadata=""><span data-metadata=""><span data-buffer="">Competitor analysis helped us stay current in our business space by examining what others are doing. This was one of the main tasks for the research phase of my project.
<span data-metadata=""><span data-buffer="">
Understanding ICICI's competitors not only familiarized me with the purchase process user experience but also with the gift card market and peripheral companies.
<span data-metadata=""><span data-buffer="">
The competitor analysis I performed included three companies- Kotak Mahindra Bank, HDFC Bank, and SBI Bank. Prior to performing the analysis, I developed evaluation criteria to evaluate each company objectively and individually and compare them to ICICI.
<span data-metadata="">Key findings from the analysis
• Update Graphics: Outdated visuals can hurt user trust and engagement.
• Simple Design: Focus on straightforward functionality.
• Easy Recharge: Streamline the gift card recharge process.
<span data-metadata=""><span data-metadata=""><span data-buffer="">User Research
<span data-metadata=""><span data-metadata=""><span data-buffer="">User research is critical to UX design and there is no substitute for talking to real users. In addition, user interview is contextual observational research conducted to understand users' needs and behaviors.
After performing the domain research I decided to conduct a user interview to better understand the needs, pain points, and insights. Below are some of the findings from my interviews.
Key Touchpoints
• Create a script of questions to perform user interviews.
• Conducted interviews of 7 existing users.
<span data-metadata=""><span data-metadata=""><span data-buffer="">Stakeholder Interviews
<span data-metadata=""><span data-metadata=""><span data-buffer="">Stakeholder interviews are extremely valuable in understanding the strategy and business goals of the project. These sessions are invaluable by giving everyone the opportunity to express their needs and concerns.
<span data-metadata=""><span data-buffer="">During the research phase, I advocated for stakeholder interviews to gain a holistic view of the business side of the project goals. With the help of my manager, I reached out to stakeholders in various departments.
<span data-metadata=""><span data-buffer="">This was a great learning experience and gave me a better understanding of the difference between interviewing users vs. stakeholders.
<span data-metadata=""><span data-metadata=""><span data-buffer="">Ideation: Brainstorming
& Iterating
<span data-metadata=""><span data-metadata=""><span data-buffer="">After the discovery phase ended I downloaded all of the findings and leveraged them to define the goals and approach for the design. The brainstorming phase is best done collaboratively and, since I had other designers in my team, I decided to reach out to other designers to brainstorm with me.
<span data-metadata=""><span data-buffer="">The goal for this part of the project was to define their needs, and the vision for the project.
<span data-metadata=""><span data-metadata=""><span data-buffer="">Key Activities
• <span data-metadata=""><span data-buffer="">Understand what the target users want to do.
• <span data-metadata=""><span data-buffer="">Understand the current state of the experience and how it needs to change.
<span data-metadata="">Downloading Findings
<span data-metadata="">The discovery phase generates tons of information and insights. Downloading the findings essentially means identifying themes that emerged in the research to generate a guided vision for the redesign.
The goal of downloading is to visualize all the findings and begin categorizing them by themes and patterns to uncover relationships within all of the data.
<span data-metadata=""><span data-metadata=""><span data-buffer="">Vision
<span data-metadata=""><span data-metadata=""><span data-buffer="">I have developed a vision for the redesign of the page using the emerging themes and findings from the discovery phase. The new gift card section is…
<span data-metadata=""><span data-buffer="">
<span data-metadata=""><span data-buffer="">The new gift card section is a one-stop shop that showcases emotions and personalized gifting options, making it easier and faster for users to give meaningful gifts.
<span data-metadata="">Persona
<span data-metadata=""><span data-metadata=""><span data-buffer="">Understanding your users is key to meeting their needs. Persona helps us understand the needs and goals of the people we are designing for and therefore better empathize with their needs. Personas are not a single person but a representative of the entire user group.
<span data-metadata=""><span data-buffer="">
<span data-metadata=""><span data-buffer="">Goal: Put ourselves in our user’s shoes and keep their needs at the forefront of our design.
Key Touchpoints
• <span data-metadata="" style="text-align: var(--text-align);"><span data-buffer="" style="text-align: var(--text-align);">Research current ICICI Bank’s account holders and target market
• <span data-metadata="" style="text-align: var(--text-align);"><span data-buffer="" style="text-align: var(--text-align);">Use the information collected to create a persona representative of potential candidates.
<span data-metadata=""><span data-metadata=""><span data-buffer="">Design Phase
<span data-metadata=""><span data-metadata=""><span data-buffer="">After creating the persona and establishing the vision for the project I moved into the collaborative designing and iteration phase. The goal of this phase focused on creating wireframes, user flow, prototypes, and high-fidelity screens.
<span data-metadata=""><span data-buffer="">
<span data-metadata=""><span data-buffer="">At the end of the design phase, I also worked on gift cards, brochures, and packaging design.
Key Touchpoints
• <span data-metadata="" style="text-align: var(--text-align);"><span data-buffer="" style="text-align: var(--text-align);"><span data-metadata="" style="text-align: var(--text-align);"><span data-buffer="" style="text-align: var(--text-align);">Iterate quick ideas collaboratively.
• <span data-metadata="" style="text-align: var(--text-align);"><span data-buffer="" style="text-align: var(--text-align);">Create wireframes and user flow.
• <span data-metadata="" style="text-align: var(--text-align);"><span data-buffer="" style="text-align: var(--text-align);">Create high-fidelity screens of the user interface and branding.
<span data-metadata=""><span data-metadata=""><span data-buffer="">Collaborative Iteration
<span data-metadata=""><span data-metadata=""><span data-buffer="">Collaboration is key to the design process. Receiving input from colleagues is a great way to expand design ideas. In addition, Integrating the insights you gather from the people you're designing for is one of the essential elements of user experience design. Let the feedback of the users and stakeholders guide your design solution.
<span data-metadata=""><span data-buffer="">
<span data-metadata=""><span data-buffer="">The goal of collaborative iteration is to Integrate insights into design ideas and prototypes to refine your idea. Since I was the sole designer in my team I decided to recruit other designers to collaboratively iterate.
Key iteration activities
• <span data-metadata="" style="text-align: var(--text-align);"><span data-buffer="" style="text-align: var(--text-align);"><span data-metadata="" style="text-align: var(--text-align);"><span data-buffer="" style="text-align: var(--text-align);"><span data-metadata="" style="text-align: var(--text-align);"><span data-buffer="" style="text-align: var(--text-align);">Shared insights with the team.
• Brainstorm to synthesize to your feedback.
• <span data-metadata="" style="text-align: var(--text-align);"><span data-buffer="" style="text-align: var(--text-align);">Sketch and build a prototype for the project.
<span data-metadata=""><span data-metadata=""><span data-buffer="">Concept Sketches
<span data-metadata=""><span data-metadata=""><span data-buffer="">Sketches were made to formally communicate features and functionality, as expressed through the user interface. Usually, UX designers use quick sketches as wireframes with one another whereas a more formal document may be used when presenting to a client.
<span data-metadata=""><span data-buffer="">
<span data-metadata=""><span data-buffer="">The goal of creating sketches was to communicate user interfaces and understand the user journey, and the information architecture.
Key Touchpoints
• <span data-metadata="" style="text-align: var(--text-align);"><span data-buffer="" style="text-align: var(--text-align);"><span data-metadata="" style="text-align: var(--text-align);"><span data-buffer="" style="text-align: var(--text-align);"><span data-metadata="" style="text-align: var(--text-align);"><span data-buffer="" style="text-align: var(--text-align);">Iterate through various ideas.
• <span data-metadata="" style="text-align: var(--text-align);"><span data-buffer="" style="text-align: var(--text-align);">Reach enough fidelity that can be transformed into a mockup.
<span data-metadata=""><span data-metadata=""><span data-buffer="">High Fidelity Screens
<span data-metadata=""><span data-metadata=""><span data-buffer="">After finalizing the sketches, I moved on to the visual design phase, incorporating ICICI Bank's branding guidelines to align with their updated style and create a cohesive UI approach.
<span data-metadata=""><span data-buffer="">The design proposal for the Gift Card section adopts a one-page model, presenting all essential information in a clear and organized manner. The redesign focuses on "Emotional Gifting," highlighting the joy and emotional connection of gifting, while reflecting ICICI's values of nurturing relationships through a simple, meaningful experience.
<span data-metadata=""><span data-buffer="">The page radiates happy and celebratory vibes, enhancing the user experience and capturing the essence of gifting. Content is structured into three sections, guiding users seamlessly through the flow of gift card information.
<span data-metadata="">Homepage
<span data-metadata="">• <span data-metadata=""><span data-buffer="">Highlighted the key features prominently in the hero section to grab user attention.
• <span data-metadata=""><span data-buffer="">Used illustrations and reduced text to create a visually appealing and engaging experience.
• <span data-metadata=""><span data-buffer="">Simplified the information by breaking it into steps, making it easier for users to navigate without feeling overwhelmed.
<span data-metadata=""><span data-metadata=""><span data-buffer="">Gift card category page
<span data-metadata="">• <span data-metadata=""><span data-buffer="">Made it easier for users to visualize the actual gift card by improving its layout.
• <span data-metadata=""><span data-buffer="">Created distinct categories for different occasions, events, and festivals to help users find the right card faster.
• <span data-metadata=""><span data-buffer="">Added a filter option to refine search results.
<span data-metadata="">Personalisation option
<span data-metadata=""><span data-metadata=""><span data-buffer="">Introduced a new feature that allows users to easily personalize their gift cards, adding a personal touch and evoking memories during the gifting process.
<span data-metadata=""><span data-metadata=""><span data-buffer="">Checkout page
<span data-metadata="">• <span data-metadata=""><span data-buffer="">Highlighted the card's payment information upfront for transparency and ease.
• <span data-metadata=""><span data-buffer="">Used a step indicator to simplify the process of entering buyer and receiver details, preventing confusion and guiding users through the flow.
• <span data-metadata=""><span data-buffer="">Made topping up the card quicker and more intuitive.
• <span data-metadata=""><span data-buffer="">Streamlined card comparison by showcasing other options available for the occasion.
• <span data-metadata=""><span data-buffer="">Implemented two-way authentication to enhance the security of transactions, ensuring a safer and more reliable user experience.
<span data-metadata=""><span data-metadata=""><span data-buffer="">Usability Test
<span data-metadata=""><span data-metadata=""><span data-buffer="">After the ideation and prototyping phases were complete, we moved forward with user testing. I conducted virtual testing sessions with 10 participants using Zoom. These sessions allowed us to gather feedback in real time, observe user interactions, and identify areas for improvement based on their experiences with the new design.
<span data-metadata=""><span data-buffer="">
<span data-metadata=""><span data-buffer="">The feedback we implemented-
• <span data-metadata=""><span data-buffer="">Image removal during personalization: Some users had difficulty removing selected images, as the option wasn't visibly intuitive. We've now redesigned it to be more user-friendly.
• Category navigation confusion: Users clicked the category header expecting to be taken to the full page, not realizing there was a "view all" option. To enhance navigation, we've linked the category header directly to the full category page.
• <span data-metadata=""><span data-buffer="">Filter options for card colors: A user suggested adding color filters, which initially seemed redundant due to the card categorization. However, after considering the feedback, we've added filters for more specific selection options.
<span data-metadata=""><span data-metadata=""><span data-buffer="">Branding Design
<span data-metadata=""><span data-metadata=""><span data-buffer="">After designing the website for ICICI Bank, I also focused on branding. I created over 45 gift card designs, along with the packaging they come in. Additionally, I designed a brochure included with the physical gift cards, providing recipients with essential information about the gift card and its redemption process.
