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
ROLE
Product Designer
WORKED WITH
Business analysts, Developers, Leadership
DURATION
12 Weeks
Approach
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
Research & Discovery
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.
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.
Domain Research
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.
Competitor Analysis
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.
Understanding ICICI's competitors not only familiarized me with the purchase process user experience but also with the gift card market and peripheral companies.
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.
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.
User Research
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.
Stakeholder Interviews
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.
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.
This was a great learning experience and gave me a better understanding of the difference between interviewing users vs. stakeholders.
Ideation: Brainstorming & Iterating
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.
The goal for this part of the project was to define their needs, and the vision for the project.
Key Activities • Understand what the target users want to do. • Understand the current state of the experience and how it needs to change.
Downloading Findings
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.
Vision
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…
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.
Persona
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.
Goal: Put ourselves in our user’s shoes and keep their needs at the forefront of our design.
Key Touchpoints • Research current ICICI Bank’s account holders and target market • Use the information collected to create a persona representative of potential candidates.
Design Phase
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.
At the end of the design phase, I also worked on gift cards, brochures, and packaging design.
Key Touchpoints • Iterate quick ideas collaboratively. • Create wireframes and user flow. • Create high-fidelity screens of the user interface and branding.
Collaborative Iteration
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.
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 • Shared insights with the team. • Brainstorm to synthesize to your feedback. • Sketch and build a prototype for the project.
Concept Sketches
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.
The goal of creating sketches was to communicate user interfaces and understand the user journey, and the information architecture.
Key Touchpoints • Iterate through various ideas. • Reach enough fidelity that can be transformed into a mockup.
High Fidelity Screens
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.
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.
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.
Homepage
• Highlighted the key features prominently in the hero section to grab user attention. • Used illustrations and reduced text to create a visually appealing and engaging experience. • Simplified the information by breaking it into steps, making it easier for users to navigate without feeling overwhelmed.
Gift card category page
• Made it easier for users to visualize the actual gift card by improving its layout. • Created distinct categories for different occasions, events, and festivals to help users find the right card faster. • Added a filter option to refine search results.
Personalisation option
Introduced a new feature that allows users to easily personalize their gift cards, adding a personal touch and evoking memories during the gifting process.
Checkout page
• Highlighted the card's payment information upfront for transparency and ease. • Used a step indicator to simplify the process of entering buyer and receiver details, preventing confusion and guiding users through the flow. • Made topping up the card quicker and more intuitive. • Streamlined card comparison by showcasing other options available for the occasion. • Implemented two-way authentication to enhance the security of transactions, ensuring a safer and more reliable user experience.
Usability Test
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.
The feedback we implemented-
• 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. • 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.
Branding Design
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.
Reflections
“Good design is about process, not product.” This quote by Jared Sinclair inspires me to follow the design process religiously.
Working on the ICICI Bank’s website was pretty challenging. It required a lot of patience and teamwork to come up with loopholes in a brand's website that is doing so well but lacks a good online user experience. While doing the background research for ICICI Bank’s website, I figured out that not many people were happy about the usability and flexibility that it provides.
• I discovered unexpected insights from conducting usability testing. • Setting internal timelines for each design phase helped in achieving tasks on time. • It was crucial to build strong connections with the people I was working with as UX is all about people.
