⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

⭐️ Project Summary

In March & April 2022, I got to intern at OneCard, a Unicorn FinTech based in Pune. The two products that they offer are OneCard - Metal Credit Card Service and OneScore - Free Credit Score & Report Platform.

I worked on the OneCard Product and mainly on the “My OneCard” (card controls & settings) section, where I revamped the section to make it have a better experience by making it designed in a better way to improve the visibility and reduce the clicks.

In this, I’d be taking you through my process of getting to a solution. 😄

🎁 Problem Statement

Revamping the My OneCard section to make it have a better experience by making it designed in an optimized way to improve the visibility, reduce the clicks, and use the screen estate in a better way.

Original Screens.

😥 Problems Identified/Pain Points

Initially, I noted down all the issues I could see:

1. Too much screen estate for static elements

2. Excessive scrolling for limited information

3. Overall Information Architecture

4. Quick controls aren’t customizable

5. The wrong NFC icon used

6. Possible spacing issues

   
   

🎙️ User Feedback/Interviews

After a lot of casual discussions with the people in the office across floors and talking to a few users with the help of the customer experience team.

Major observations were:

1. Too much scrolling to view the content below, which includes statements, EMIs, etc.

2. Anything actionable, like card settings or controls, takes multiple clicks

3. The third one was interesting. Because the application was based on Flutter, it was more aligned with the iOS HCI Guidelines. That, combined with a long static card in the center, created issues for Android users.

   Android devices come in all shapes and sizes; on smaller phones, the card takes up about 40-60% of the space. Hence, leaving out a lot of screen estate unused.

This made me decide that the first thing to be done is to change the card’s current state.

I broke down the revamp into two parts — the card and the content.

🧠 My approach towards the solution

Looking at the feedback and the pain points I observed made me decide that the first thing to be done is to change the card’s current state.

I broke down the revamp into two parts —

1. The Card

2. The Content

I began working on the card section first because that comes on top. Once I’d be able to get the correct form of the card, it’d allow me to get more screen estate to further take better decisions about the information architecture of the content below.

However, my internship was unexpectedly curtailed due to the shift to offline university exams. While this was an unfortunate turn of events, it's essential to recognize the inherent opportunities. The groundwork for card redesign is in place, and the blueprint for content improvement was ready (back then) for exploration along with the team if the circumstances would've allowed. (this would always be one of my "I wish" moments)

🌱 Wireframes/Sketches

While I extensively engaged in wireframing and sketching, I, unfortunately, lack photographic records of these sessions. The visuals below are extracted from my personal diary. My preferred starting point usually involves raw wireframes, acting as foundational elements to guide the transition from concept to screen implementation.

Select sketches that give an idea of the direction.

Brainstorming for the content area.

✵ Iterations

Across the entire journey, I orchestrated approximately seven significant iterations, yielding five noteworthy versions. Each of these iterations carries substantial design refinement; while I won't delve into exhaustive explanations, I value your time and will present the pivotal highlights.

⍄ Iteration 1

⍄ Iteration 2

⍄ Iteration 3

⍄ Iteration 4

This particular iteration drew inspiration from the customary way men store cards within their wallets.

Picture a wallet: cards are typically arranged horizontally, with a slight section protruding, revealing their identity at a glance. Harnessing this inherent familiarity with OneCard's design philosophy, I envisioned replicating this tactile experience within the app interface.

💡 Iteration 5 - Final Version

This version emerged as the unanimous choice, earning the coveted title of the "best of all" among the discerning design team. Remarkably, it also stands as my personal favorite.

Within this iteration, a singular screen encapsulates the entirety of the user experience. Almost every critical element resides within this harmonious digital canvas, including:

• The Card

• Comprehensive Card Information

• The "Copy Card Number" Call-to-Action

• Statements, EMIs, Vault Access, and More

This consolidation of essential features into a unified interface fosters a streamlined and immersive user journey, setting it apart as a design triumph.

🔑 Key factors of why this iteration is impactful:

• Tilted card view anchored to the top mimics a physical card being held

• Clean, minimalist card style focused only on essential details

• High-priority controls and shortcuts available directly on the card

• Consolidated high-level sections reduce scrolling

• Clear visual hierarchy and layout

  
  

👁️ Visual Design

🏄 Flow of Screens

As a designer, for us, it’s one screen after another.

In reality, for the user, it's just one screen and multiple elements coming in and going out of it.

📱 Screens

Oh, also, I went through these iterations to get the correct card angle and Field of View.

🤹 Prototype

I had been a dedicated user of Figma for a while, and it had become second nature to me. However, when I had the opportunity to work with Adobe XD at FPL, I saw it as a chance to expand my design horizons.

While transitioning from Figma to XD, I encountered some unique features and experiences. One notable change was the shift in prototyping capabilities. Figma had been my trusted companion in this regard, but XD offered its own set of advantages and opportunities for creativity.

I also had the chance to explore InVision Studio, and though it may have seemed a bit glitchy during interactions at times, it was a valuable learning experience. It reminded me that every tool has its own strengths and quirks, and adapting to them can lead to new, exciting design possibilities.

It's best to perform 3D prototypes on After Effects, but in order to create an interactive one, I used Invision to create one. Although it is glitchy because of its limitations, the following prototype does give an idea of the deliverable:
https://yashdeshmukh314746.invisionapp.com/prototype/cl5f4rbub01bb3i01lcgg64ax/play

🎬 Conclusion

In summary, upon the presentation of the final design concept to the discerning design team at OneCard, critical insights emerged, warranting attention to the refinement of our design solution. These insights encompassed three principal areas of enhancement:

1. Rationalizing CTAs: The need to optimize the interface by reducing the number of Call-to-Action elements was evident. This adjustment aimed to streamline user interactions and promote a more intuitive user experience.

2. Design Elevation for Panel Notch: A specific focal point for refinement was identified in the form of a more refined and aesthetically pleasing design for the notch of the white panel. This deliberate enhancement aimed to harmonize the visual aesthetics of the user interface.

3. Enhanced Content Architecture: Notably, the full reworking of the content architecture was a critical aspect of our solution development. This goal aimed to build a better-ordered and efficient structure, guaranteeing that users could easily access relevant information.

🌸 However, it is imperative to acknowledge that my internship at OneCard concluded prematurely due to the unforeseen circumstances surrounding my university examinations. As a result, I regrettably could not undertake the comprehensive exploration of the secondary aspects of the project, as well as the impending project assignments lined up for me.

But if I had more time, my commitment to refining the project at OneCard would have encompassed the following key initiatives:

1. In-Depth Content Reengineering: A comprehensive overhaul of the content architecture would have been initiated. This would include improved categorization, user-driven prioritization, and seamless information retrieval.

2. Holistic Usability Testing: Rigorous usability testing involving a broader user base and collecting comprehensive feedback would have fine-tuned the user experience and refined interactions.

3. Iterative Design Evolution: The design elements would have undergone iterative refinement, ensuring optimal usability and aesthetic appeal.

4. Cross-Platform Adaptation: A comprehensive approach to cross-platform compatibility would have provided a consistently exceptional experience across diverse hardware environments.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

⚡️ Key Learnings:

My internship at OneCard provided an invaluable opportunity to immerse myself in diverse facets of the industry, equipping me with knowledge and insights that are instrumental in shaping my professional journey. Through active involvement in multifaceted roles and collaborative initiatives, I gained a wealth of experiences and uncovered transformative insights.

1. Multifaceted Engagement: My engagement spanned multiple domains, including Product Design, Product Management, Social Media Strategies, and participation in pivotal design and technology meetings. This multifaceted exposure allowed me to gain a holistic understanding of the dynamic interplay between these disciplines. My direct collaboration with esteemed professionals such as the Head of Design, Senior Designers, and Project Managers further enriched my perspective and skill set.

   
   

2. Strategic Marketing Leadership: A defining moment in my internship was the opportunity to steer a pivotal marketing strategy shift. During a critique session, I spearheaded an alignment of our marketing approach with OneCard's distinctive brand identity for the Indian Premier League (IPL) 2022 campaign on Disney+Hotstar. The success of this strategic realignment was reflected in the campaign's reach, which extended to a staggering 144 million viewers. This experience underscored the significance of translating design sensibilities into impactful marketing strategies.

   
   

3. User-Centric Design Realization: An epiphany that significantly enriched my design philosophy was the realization that "you are not the user." As a designer, it is imperative to recognize the biases that can lead to a narrow focus on a singular solution. By engaging with non-design and non-technical users within the organization, as well as the actual users of the app, I was able to shed these biases. This profound shift in perspective opened new pathways for design solutions, firmly anchoring my commitment to user-centric design.

   
   

4. Agile Decision-Making in a Startup Ecosystem: Working within a startup ecosystem underscored the importance of swift decision-making and iterative development. In this dynamic environment, the mantra "Iterate → Iterate → Iterate" became a guiding principle. I learned the art of rapid adaptation and the power of rapid prototyping, all geared toward achieving faster and more effective iterations.

   
   

5. Adaptation to Technological Evolution: In a realm characterized by technological innovation, the ability to adapt to new tools and methodologies is paramount. My time at OneCard reinforced the importance of staying abreast of emerging technologies and facilitating seamless transitions between tools and platforms to meet the evolving demands of the industry.

   
   

In conclusion, my internship at OneCard not only honed my professional skills but also fostered a deep-seated appreciation for the dynamic, collaborative, and ever-evolving nature of the design industry. Armed with these invaluable learnings, I am poised to embark on future endeavors with unwavering enthusiasm, a user-centric approach, and a commitment to making a meaningful impact through design.