TokenGift Case Study

Gifting Solution Responsive Web App

Project Brief

The client sought to revamp the UX design of their product. Upon review, we identified several issues, including information architecture, onboarding flow, feature hierarchy, token action flows, and responsive UI design. We resolved these issues, reducing cognitive load, improving workflows, and creating easier and more intuitive UI interactions.

Customer

A group of people from four different locations discovered a smarter way to gift with their Digital Gifting Solution App. Effortlessly redeem, exchange, re-gift, and donate digital tokens, reducing the impact of unwanted gifts while spreading joy and promoting sustainability. Perfect for all your gifting needs.

MVP Icon

Stage – Redesign of Mobile App

B2C Icon

Domain – B2C

The Design Process

Design Process Animated Infographic
  • Domain & Product Concept Understanding
  • Stakeholder Requirements
  • User Understanding
  • Heuristic Evaluation of Existing App UI
  • Product Concept Development
  • Created Use Cases
  • Created Workflows for Different Personas
  • Defined IA
  • Paper Sketches
  • Designed User-friendly UX/UI
  • User-friendly navigation
  • Planned media, online courses and shop.
  • Clickable Prototyping
  • Proposed Several Clean & Neat Visual Design Options
  • Final UX Specifications & Design System
  • Product Testing & Iteration after Development
  • Tested UI on different devices

1. Requirements & Planning

1.1. Understand Concept of the Product

A digital gifting app provides a modern solution for sending and receiving gifts. It allows users to send digital tokens instead of physical items, which can be redeemed, exchanged, re-gifted, or donated, making gifting convenient, flexible, and sustainable.

Purpose:

The purpose of the digital gifting app is to simplify the gifting process, making it more efficient and eco-friendly. It aims to provide a seamless experience for both givers and recipients by offering versatile options for gift redemption and management, reducing the environmental impact of traditional gifting.

Key Features:

Digital Tokens: Send and receive digital tokens that can be used for a variety of gifts. Redeem: Recipients can redeem tokens for gift card of any brand. Exchange: Tokens can be easily exchanged for different brands or items if the initial choice doesn’t suit the recipient. Re-Gifting: Simplified process for re-gifting tokens to friends or family members. Donation: Option to donate the value of the token to a charity of choice. Sustainability: Reduces the environmental impact by eliminating the need for physical packaging and shipping. Instant Delivery: Digital tokens are delivered instantly, ensuring timely gifting. User-Friendly Interface: Intuitive app design for easy navigation and use. Customizable Messages: Personalize your digital gifts with custom messages and photo or video to add a personal touch.

Summary:

The digital gifting app revolutionizes the traditional gifting process by introducing a versatile, convenient, and eco-friendly alternative. The app not only simplifies gifting but also aligns with modern values of efficiency and environmental responsibility, making it the perfect solution for today’s digital age.

1.2. Define User Personas

We tried to understand personas’ motivations, challenges, and expectations will enable online astrologers to create meaningful and transformative experiences that resonate with their spiritual journey and quest for self-discovery in the digital realm.

Pandit Profile Image

Pandit Ram Sharan Ji

Astrology Consultant

“Beginning a profession as an IIT student, today Pt. Ram Sharan ji is a well-recognized Vedic astrologer and Kundali Expert not only in India but in various different parts of the world. Being the best astrologer in Delhi, he is very popular for giving accurate predictions concerning political issues. According to him, astrology is a science, dealing with the position of various planets.”

Pain Points

  • I do not have an efficient tools and platforms to manage my client appointments.
  • Difficulty to maintain accurate birth charts, and deliver high-quality astrological interpretations.
  • Sometimes difficult conduct consultations in person, over the phone, or via video conferencing platforms, depending on her clients’ preferences and geographic locations.
Seeker Profile Image 2

Neha Shah

Seeker

“I am a 28-year-old marketing executive. I have recently developed an interest in astrology. I am an open-minded and curious about spirituality, seeking deeper insights into herself and her life’s purpose.”

Pain Points

  • I struggle to find an astrologer who aligns with my values, communication style, and approach to spirituality.
  • Difficult to find guidance and clarity regarding my life path, relationships, and career decisions.
Seeker Profile Image 1

Ramesh Kumar

Seeker 

“I am a 46-year-old Bank Manager with a keen interest in astrology and spirituality. I am working remotely and pursuing creative projects in my spare time. I value self-reflection, mindfulness, and holistic wellness practices.”

Pain Points

  • I feel difficult to find online astrologers who offer personalized readings and insights that resonate with my unique experiences and aspirations.
  • Finding time to schedule and attend online astrological consultations or readings amidst hectic schedules and competing priorities may require careful planning and flexibility.

1.3. Heuristic Evaluation of Existing App UI

After conducting a thorough heuristic evaluation, it became evident that the app lacked professional design standards. Specifically, it did not adhere to UI guidelines, UI color theory principles, or implement user-friendly workflows, resulting in a subpar user experience.

Heuristic Evaluation Image

1) The top section of the interface suffered from clutter, primarily due to the similarity in color between the navbar and tabs. As a result, users found it challenging to differentiate between the two elements. Additionally, the abundance of clickable elements compounded the issue, further complicating navigation. The lack of sufficient click area for each element exacerbated the problem, making it frustrating for users to interact with the interface.

2) Noticed the visual clutter primarily due to the size and color of icons within the cards. Additionally, an abundance of cards occupied significant screen real estate, further contributing to the cluttered appearance.

3) The absence of bottom navigation hindered UI navigation, creating usability challenges for users. Without this navigation element, users found it cumbersome to move between different sections or features within the interface.

4) Users encountered redundant access to the same content and found that the organization of content lacked hierarchy, leading to confusion.


5) A lack of links in the top navigation bar, which would have facilitated easy access to essential features. Additionally, the absence of the user’s name made it challenging to identify who the displayed details belonged to.


Overall this workflow appeared to lack a focus on usability, causing inefficiencies and user frustration.

2. Ideation & Paper Sketches

2.1 Paper Sketches & Whiteboarding 

Concepts were iteratively developed through multiple rounds of paper sketches before jumping to the digital medium and preparing the wireframes.

AstroApp Paper Proto 2
AstroApp Paper Proto 1

3. Wireframing & Refine

3.1.Wireframes

Our Designers created several wireframes to freeze user flows, UI, interactions and it was helpful to avoid more & more Hi-fidelity iterations and a clear focus on functionality. The wireframes allowed us to visualise exactly what kind of UI elements will work in different scenarios and making sure there is consistency in the pattrns.

3.2. Zero-Code Clickable Prototype

Our UX Designers created a Finished looking Zero-Code clickable Prototype.

The Clickable demo proved to be really useful for customer approvals as well as Developer communications.

4. Visual Design & UX Specification

4.1 Final Hi Fidelity Screens design for the MVP

After the Clickable prototype demonstrated and discussed with prospective customers, we finalised a set of features for the MVP.

Finalising the Visual Design: Our Visual Designers created branding for the product, (which later became branding for the company as well) The Visual Designers created 4 modern visual design options complimenting the brand design guidelines.

Detailed UX Specifications: The Detailed design for all the screens was created for every flow in the product. Starting from the login screens, Landing page, User’s horoscope & prediction, Online Courses & shopping etc.

4.2. Design System

Since the product had several stakeholders and interdependent workflows, Consistency was utmost important to increase the learnability of the system. OUr Design system expert created a very detailed ‘Design System’ with all the Commonly used UI patterns like Tables, filters, buttons, stepper, form fields, and Notification systems.

The UI developers could pick from the final design system and build / customise certain UI elements to be used in the application.

Some examples of component specifications and visual style guide from the design system.

AstroApp Design System Image 1

5. Implementation & Quality Control

Design Specifications Handoff :

  • Detailed design specifications provided to development team.
  • Designed reusable & responsive UI components that helped developers a lot while implementing.

Recommendations for Specification Corrections:

  • Co-ordinated with front-end developers to adjust HTML & CSS as per UI specs.

Identification of Bugs and Loopholes:

  • Observed many UI & functionality related issues and raised those issues in JIRA and assigned to respective person to fix.

Multiple Rounds of Testing and Feedback:

  • Conducted iterative testing sessions post-implementation.
  • Solicited feedback from design team and relevant users.
  • Implemented optimizations to make the product more lightweight and efficient.

Refinement of Design Specifications:

  • Revised design specifications based on feedback and corrections.

Thank You For Scrolling!

Let’s Craft Brilliance Together