Tayyari means 'Preparation' or 'Readiness' in Hindi.

Tayyari is a mock test platform used by over 100K+ students in India preparing for competitive exams like JEE and NEET. I designed the app for both desktop &amp; mobile. Initially this started as a web app, then iOS.

This project is about designing it to align with iOS HIG (Human Interface Guidelines), ensuring a delightful, intuitive experience for learners on iOS.

Project, originally for web app, ran for 4 months which included total 197 screens, including both desktop &amp; mobile viewports.

Students have many ways to prepare for JEE &amp; NEET. Mock tests can be full length, sectional (subject based), or they can create custom mocks to practice a specific topic. IA was crucial to understand the flow of information inside app JEE and NEET based on their exam patterns.

Based on multiple type of users - School, college, or drop year students.

A basic block wire framing was important to communicate with the client side PMs and Developers in order to understand &amp; match the expectations of user journey.&nbsp;

To create seamless UX that feels unified across devices - information hierarchy &amp; screen layouts were designed separately for each both. (Given it was a web app and had to be built for Android &amp; iOS later)

Users can just practice the topics, other than mock tests.

Type of questions can differ, ranging from only text options or diagram/image options. This changes the layout of the screen, and requires scrolling in some mobile devices.

To create better understand of what is working in the market, it is important to analyse the available products/services. I tried to map some references for design &amp; content structure for &nbsp;landing page, dashboard, etc.

Understanding iOS guidelines as per the Human Interface guidelines was critical &amp; table-stake for designing this app for iPhone. It brought immense clarity to me about how iOS is structured fundamentally.

I followed the iOS design guidelines and platform specific pattern considerations. Breaking down components' anatomy and iOS UX patterns&nbsp;helped me a lot in understanding how to leverage in my context.

For example, nav bar and lists are very versatile and offer a great range of variants to work with. I used the platform structure from iOS &amp; then re-imagined the UI elements from web app as per iOS.

Onboarding is split into mandatory and optional flows. Currently app is only accepting 'Sign in with Google' for user registration and log in.&nbsp;

Below are the screens based on the onboarding phases:

Making Dashboard as Home was important to revolve around the theme of helping students get better at their performance.

Below is the dashboard from web app on desktop and mobile.

I wanted this dashboard to be a living system which shows growth &amp; development that symbolises the growth of a student. Something to be emotionally rewarding and frictionless for students. I chose light tones, illustrations, and clear materials to make the UI feel lighter. For example daily goals card and monthly tracker.

Dashboard components were designed for cold &amp; warm states depending upon the moment in time a user is interacting with the app.

Key iOS patterns used: First-use empty states, large touch targets, SF font hierarchy, and subtle system gradients.

Apple design values reflected: Data as storytelling, personalized progress, and delightful reinforcement via minimal UI.

Recommendations card - Mocks &amp; practice papers

The mock test flow was crafted to be intuitive, calm, and grounded. Students go through three key phases - Choose,&nbsp;Pause, and&nbsp;Start, and then they get their score in the end.

From selecting the entrance exam to choosing mock length and reviewing instructions, each screen follows a light, focused layout with clear typography and native iOS controls. The minimal hierarchy keeps cognitive load low while maintaining clarity.

Before starting the test, users are gently nudged to “Take a deep breath” with a calm flower animation inspired by Apple's Breathe app. This moment of mindfulness isn’t just decorative, it helps learners regulate anxiety and transition into focus mode.

This subtle pause adds delight, improves user readiness, and makes the flow feel emotionally intelligent.

Once in the test, a clean UI helps students stay centred - subject filters, clear navigation, and action buttons follow Apple-native conventions. The experience ends with a simple, motivating result screen, offering immediate performance feedback and a CTA to review analytics.

Designed with SwiftUI, the widgets surface&nbsp;glanceable progress data&nbsp;directly on the iOS home screen - helping students track their accuracy without opening the app.

The graph adapts to selected exams (JEE Mains, JEE Advanced, NEET) with native iOS toggles.

The compact and medium-sized widgets follow Apple’s widget design principles, using system fonts, subtle gradients, and rounded corners for consistency with iOS aesthetics.

Avatar indicator at top right reinforces identity and motivation.

The Tayyari icon is designed using Apple’s icon grid system, ensuring visual harmony and scalability across iOS devices.

Impact - Tayyari is a live product as PWA (progressive web app) with DAU of ~180,000. This was launched in collaboration with educational content creators on YouTube from JEE and NEET preparation niche. The product now has also grown to become a white label for few content creators who have a subscriber base of 1 Million+.&nbsp;

Learnings - Since I was the only designer in the beginning on this with a react native developer - it helped me in broadening my knowledge about iOS development and design guidelines. It also helped me learn client handling and people management. Communication is the key and keeping the feedback look close was very crucial to proceed with clarity - I used Figma comments and email threads to maintain feedback loops. While designing iOS version, I learned the nuances of iOS's component library. I now have the clarity on typography and how to use glyphs with SF symbols app. It makes the workflow very seamless and easy to follow.

Observations - At fundamental level, Apple products are designed differently than web app. iOS provides more opportunities with Haptic feedbacks. While animating a UI element it becomes important to consider it. I am still learning which tools I can use to bring haptics for the prototyping. SwiftUI is a great way to build with consistency. I especially liked its documentation and how SF symbols app provide icon animation configurations as per SwiftUI.

Feel free to reach out to me at ashvashdesign@gmail.com

Tayyari is a mock test & practice app for JEE & NEET exam aspirants.

Tayyari is a mock test platform used by over 100K+ students in India preparing for competitive exams like JEE and NEET. I designed the app for both desktop & mobile. Initially this started as a web app, then iOS.

This screen appears right before a student starts a mock test to help them take a moment, breathe and relax.

Project, originally for web app, ran for 4 months which included total 197 screens, including both desktop & mobile viewports.

Students have many ways to prepare for JEE & NEET. Mock tests can be full length, sectional (subject based), or they can create custom mocks to practice a specific topic. IA was crucial to understand the flow of information inside app JEE and NEET based on their exam patterns.

Overall flow of information

JEE &amp; NEET mock teast flows

A basic block wire framing was important to communicate with the client side PMs and Developers in order to understand & match the expectations of user journey. 

Wireframe of mock test flows for different types - Full length, sectional &amp; custom.

To create seamless UX that feels unified across devices - information hierarchy & screen layouts were designed separately for each both. (Given it was a web app and had to be built for Android & iOS later)

There are multiple types of question structures - depending upon type of MCQ options.

To create better understand of what is working in the market, it is important to analyse the available products/services. I tried to map some references for design & content structure for  landing page, dashboard, etc.

This is a reference. More visuals were gathered to find Tayyari's UI direction.

Understanding iOS guidelines as per the Human Interface guidelines was critical & table-stake for designing this app for iPhone. It brought immense clarity to me about how iOS is structured fundamentally.

Notes &amp; screenshots from an article by Eric Kennedy - https://www.learnui.design/blog/ios-design-guidelines-templates.html#typography

I followed the iOS design guidelines and platform specific pattern considerations. Breaking down components' anatomy and iOS UX patterns helped me a lot in understanding how to leverage in my context.

For example, nav bar and lists are very versatile and offer a great range of variants to work with. I used the platform structure from iOS & then re-imagined the UI elements from web app as per iOS.

Onboarding is split into mandatory and optional flows. Currently app is only accepting 'Sign in with Google' for user registration and log in. 

Web app designs on desktop &amp; mobile.

I wanted this dashboard to be a living system which shows growth & development that symbolises the growth of a student. Something to be emotionally rewarding and frictionless for students. I chose light tones, illustrations, and clear materials to make the UI feel lighter. For example daily goals card and monthly tracker.

Dashboard components were designed for cold & warm states depending upon the moment in time a user is interacting with the app.

Home dashboard on Day - 0 in iOS app

Home dashboard on Day 'n' in iOS app

Recommendations card - Mocks & practice papers

The mock test flow was crafted to be intuitive, calm, and grounded. Students go through three key phases - Choose, Pause, and Start, and then they get their score in the end.

This subtle pause adds delight, improves user readiness, and makes the flow feel emotionally intelligent.

Designed with SwiftUI, the widgets surface glanceable progress data directly on the iOS home screen - helping students track their accuracy without opening the app.

Client requested icons for internal team usage - Quick fix delivered in short duration.

 - Tayyari is a live product as PWA (progressive web app) with DAU of ~180,000. This was launched in collaboration with educational content creators on YouTube from JEE and NEET preparation niche. The product now has also grown to become a white label for few content creators who have a subscriber base of 1 Million+. 

 - Since I was the only designer in the beginning on this with a react native developer - it helped me in broadening my knowledge about iOS development and design guidelines. It also helped me learn client handling and people management. Communication is the key and keeping the feedback look close was very crucial to proceed with clarity - I used Figma comments and email threads to maintain feedback loops. While designing iOS version, I learned the nuances of iOS's component library. I now have the clarity on typography and how to use glyphs with SF symbols app. It makes the workflow very seamless and easy to follow.

 - At fundamental level, Apple products are designed differently than web app. iOS provides more opportunities with Haptic feedbacks. While animating a UI element it becomes important to consider it. I am still learning which tools I can use to bring haptics for the prototyping. SwiftUI is a great way to build with consistency. I especially liked its documentation and how SF symbols app provide icon animation configurations as per SwiftUI.

Tayyari: Mock tests app

Customer promise:&nbsp;Microsoft helps me discover &amp; provides more value from my account.

Business goal: Achieve save rate of 9.2% (not actual value) &amp; drive acquisition within Windows

Help users discover personalised content and understand the value of their Game Pass benefits at the point of cancellation.

As part of Windows selling Windows effort, post sale monetisation is an effort where Microsoft serve users with various subscription services. Game Pass is an important part in this. All Game Pass subscriptions are cancelled via AMC (accounts.microsoft.com) with is a part of Windows team. Hence, any impact in thi8s

I worked on the Xbox touchpoint inside Windows

We found 60% leave for reasons like lack of relevant content or time.This insight guided our redesign of the cancellation screen.

UX Pattern &amp; visual language of Xbox app and AMC

I defined user cohorts using Xbox research and led a design huddle with the Windows team to quickly assess which content would resonate with each group.

Based on the user cohorts, I created Information architecture to understand which content to prioritise for which user type. To create user cohorts, I used the personas made by the Xbox team, my hypothesis and data from Xbox marketing team understand the user intentions for cancelling the Xbox subscription.

Cost conscious gamers - Since users can join from any promotional campaigns like '$1 for first 45 days', etc. But after some tenure, they might drop of due to reasons like:

Based on different user cohorts, I wanted to prioritise the information shown in the first fold of the cancellation screen. This meant detecting the user behaviour from backend. To detect this, dev team is still working on creating the ML propensity model based on user's behaviour in the Xbox app, their motivation to join the Game Pass and their tenure of active subscription.

In total, 6 IAs were explored for different types of users, here is one of them:

Idea was to explore the possibilities of visual first UI, tailored for the gamer persona. I went ahead and tried to add the interactive components with game's trailer videos, hover effects, and user's gaming dashboard info, all inside cancel screen. 

The idea was to bring the essence of Xbox and provide an immersive experience to the users.&nbsp;

As part of new flow, content on cancellation screen was divided into 3 parts:

Users can see the auto-played gaming trailers of recent releases, most popular or coming soon games. They can also see game's ratings and their friends who are playing it.

Based on different parts of personalisation like Discover games card, benefits, switch SKU cards, or feedback cards, I and PM came up with the phases for each of them. This helped in understanding the costing of the dev efforts and conduct better experiments with control &amp; treatment approach.&nbsp;

Team ran multiple experiments to understand what type of content recommendation works on cancellation scree, based on multiple SKUs available.

This animation showcases a redesigned Xbox cancellation screen that dynamically prioritizes options based on the user’s cohort and usage behavior. Instead of showing a fixed layout, it intelligently highlights the most relevant actions—like offers, downgrades, or pause options—based on player activity and subscription history. This contextual approach helps reduce churn by surfacing value-driven alternatives tailored to each user’s intent.

Due to the very nature of the project around cancellation screens, doing user testing before development was a challenge since user JTBD here was to cancel. But, the theme of project was a driven by business motivation, while making users realise the benefits they can enjoy with their subscription. 

Thus, the crew did multiple control &amp; treatment tests to fail fast &amp; iterate on learnings and feedback.

Games were shown based on the devices but this was only limited to Game Pass Ultimate subscribers because only Ultimate offers multi device access to games.

Phase one resulted in high interaction with pivot toggles on top of games - it induces excitement and curiosity among Ultimate users to see which games were top rated on other devices.&nbsp;

We wanted to bring this to other subscribers too - PC, Console and Live Gold users.

User were seeing &amp; interacting with the gaming content but to improve the personalisation and build an emotional connect with them, I as a designer took the charge to bring a 'mini-dashboard' like feeling to the cancel screen. I studied Xbox app's user profile page and understood which data made sense and was highly relatable for any Xbox gamer. Lifetime gamer score and their friends (Gaming squad) was important to almost every gamer on Xbox. These were the metrics that not only represented their tenure with Xbox, but also the power they hold among the gaming community.&nbsp;

But, the challenge was not ever user cancelling the subscription had same journey &amp; reason for cancellation. Thus, it was important to show data only once it made sense and motivated the user to play more and continue with their gaming journey. Figuring out the best UI component from the existing library was a challenge again since AMC was more of a transactional website and did not have much visual-first component.&nbsp;

So, I used 'Value banner' to move fast with the experimentation with minor tweaks in the original component, after getting it reviewed with the design system team.

Post shipment of the above design, there was a drastic improvement in the save rate. A control &amp; treatment experiment was run and based on the score card, the design impact was considered true, i.e. positive. Multiple hundreds of dollars in revenue were saved by showing personalised gaming recommendations to the users visiting the cancellation screen.

This is a living project, with continuous improvements done every week, month and quarter. Partner teams included Xbox design team, AMC design team and Xbox marketing content design team.

Game Pass design experiments secured 136K extra subscribers, adding $15M in revenue.Triad ran two key experiments to validate hypothesis that if we highlight personalised game recommendations and user’s gaming journey to the customers before they churn out, then it will increase retention.

Both the experiments turned out to be&nbsp;WINNERS&nbsp;resulting in ~60K/annum and ~70K/annum incremental Game Pass retention, respectively - Figures are tweaked.

Please feel free to reach out to me at ashvashdesign@gmail.com

Redesigning the Xbox cancellation flow to highlight value and strengthen emotional connection for over 10M subscribers — a key revenue stream for Microsoft.

 Microsoft helps me discover & provides more value from my account.

 Achieve save rate of 9.2% (not actual value) & drive acquisition within Windows

Retaining gamers as part of Windows Post sale monetisation with a focus on PC Gamers.

Gamer journey w.r.t. Windows

Cancellation screen on AMC (accounts.microsoft.com)

Reasons for cancellation (Data points hidden due to confidentiality)

UX Pattern & visual language of Xbox app and AMC

Difference in UI of Xbox app &amp; AMC.

Flow and scenarios - Based on user tenure, explored possible content to show them.

<div data-empty="false">IA for the serial gamers - From Xbox app, we know them well.</div>

The idea was to bring the essence of Xbox and provide an immersive experience to the users. 

Immersive component with Game trailers for users to interact on Cancellation screen.

Redesigned benefits card with better visuals.

Placement of both components on the cancellation screen's step 1.

Based on different parts of personalisation like Discover games card, benefits, switch SKU cards, or feedback cards, I and PM came up with the phases for each of them. This helped in understanding the costing of the dev efforts and conduct better experiments with control & treatment approach. 

Timeline and versions&nbsp;

Thus, the crew did multiple control & treatment tests to fail fast & iterate on learnings and feedback.

Phase one resulted in high interaction with pivot toggles on top of games - it induces excitement and curiosity among Ultimate users to see which games were top rated on other devices. 

User were seeing & interacting with the gaming content but to improve the personalisation and build an emotional connect with them, I as a designer took the charge to bring a 'mini-dashboard' like feeling to the cancel screen. I studied Xbox app's user profile page and understood which data made sense and was highly relatable for any Xbox gamer. Lifetime gamer score and their friends (Gaming squad) was important to almost every gamer on Xbox. These were the metrics that not only represented their tenure with Xbox, but also the power they hold among the gaming community. 

But, the challenge was not ever user cancelling the subscription had same journey & reason for cancellation. Thus, it was important to show data only once it made sense and motivated the user to play more and continue with their gaming journey. Figuring out the best UI component from the existing library was a challenge again since AMC was more of a transactional website and did not have much visual-first component. 

Post shipment of the above design, there was a drastic improvement in the save rate. A control & treatment experiment was run and based on the score card, the design impact was considered true, i.e. positive. Multiple hundreds of dollars in revenue were saved by showing personalised gaming recommendations to the users visiting the cancellation screen.

Both the experiments turned out to be WINNERS resulting in ~60K/annum and ~70K/annum incremental Game Pass retention, respectively - Figures are tweaked.

Xbox: Retention

During the Windows onboarding flow for PC to PC migration process, I created animations for all the screens. There were total 14 screens which play one after another.&nbsp;

2.&nbsp;Reimagined transfer app in Windows 10

Making backup &amp; restore is essential and is one of the important aspect of Windows life cycle. By this, the aim is to provide an app in Windows 10 to easily take backup of older PC to be migrated easily to the new PC.&nbsp;

Windows has launched its Backup &amp; Restore solution which allows user to backup their important stuff on their PC and also restore on a new PC.Currently, the backup happens in the background and user has no system-initiated flow to know about the backup status.Users can go to Settings Page or Backup Wizard to look at the status, but these flows are user-triggered.

Peace of Mind - User doesn’t feel the peace of mind as they don’t have the system notifying about their backup status.

Thinking about the framework of notifications was crucial to understand the how the copy and messaging will look like.

This was immediately launched within 12 days to GA, worldwide. On first day this design was triggered on around 290 million devices out of which 'Backup now' CTA accounted for 88.45 Million &nbsp;clicks. This lead to surge in the OneDrive subscriptions for taking backup by $8.93 Million in additional revenue.

Helping Windows users easily migrate to a new Windows PC. This is a work in progress.

During the Windows onboarding flow for PC to PC migration process, I created animations for all the screens. There were total 14 screens which play one after another. 

Animations for PC to PC transfer

Making backup & restore is essential and is one of the important aspect of Windows life cycle. By this, the aim is to provide an app in Windows 10 to easily take backup of older PC to be migrated easily to the new PC. 

Redesigned the PC to PC Migration app in Windows 10

Windows has launched its Backup & Restore solution which allows user to backup their important stuff on their PC and also restore on a new PC.Currently, the backup happens in the background and user has no system-initiated flow to know about the backup status.Users can go to Settings Page or Backup Wizard to look at the status, but these flows are user-triggered.

Types of backup states and proposed app designs, based on Windows visual library.

This was immediately launched within 12 days to GA, worldwide. On first day this design was triggered on around 290 million devices out of which 'Backup now' CTA accounted for 88.45 Million  clicks. This lead to surge in the OneDrive subscriptions for taking backup by $8.93 Million in additional revenue.

Backup & restore

Details not included due to confidentiality - Only shipped UI &amp; explanation is included below.

Settings Home - New surface for information at a glance

2022 marked the introduction of Home page inside Windows Settings App. This was aimed to show the important information to a user in small snack-able format, while creating an introduction face for Settings.

It is designed to be transactional in nature which helps users to take actions or understand details about their Windows device and subscriptions.&nbsp;

Design followed a bento grid pattern which is responsive to the resizing of Settings window and keeps the information hierarchy and segregation simple to understand.

With the advent of Home Page, users could now explore ways to make most out of their Microsoft ecosystem by opting for latest games and services.

Xbox had an opportunity to surface the launch of latest games and Game Pass subscriptions to the 'Avid Gamers' category of Windows users.

Avid Gamers - This is a category of gamers who opt for 'Gaming' intent while setting up their PC. They might or might not have a Game Pass Subscription.

Payment screen - Buy now flow integration

I only did cosmetic changes to the UI for payment related screens since backend was handled buy another team.

Redirection to Accounts L1 for detailed management of subscription:

Project spanned for more than 4 months due to detailed collaboration with Xbox design, Xbox marketing, Settings and CELA (Legal) teams. Due to confidential nature of the project, I am not able to show any further details.

Hence, just showing the final UI that shipped.

Avid gamer who non-subscribers opted for Game Pass subscription via Home Page nudge. And There were XXk number of PC Game Pass subscriber who upgraded to GP Ultimate via resubscribe flow. This resulted in acquisition of existing subscriber to top tier SKU. The product was shipped in time with M365 upsell cards, but the acquisition rate was lesser than expected.&nbsp;One key reason might have been the visibility of the Game Pass card.

Due to broader audience of M365, it was prioritised over Game Pass for users other than avid gamers. Hence, due to lesser visibility of Game Pass card, it resulted in lesser clicks for 'Join Game Pass' CTA on the upsell card.

This was an interesting item to work on. I learned how the legacy frameworks on Windows work and how different teams collaborate across Microsoft to bring the experience together. the close collaboration with Xbox, CELA, and Buy now team was fruitful and helped me better understand how Windows work as a product.

Thanks for watching &amp; reading, I appreciate it.

Introducing in-line Game Pass upsell flow & Buddy Pass on Windows settings app.

Details not included due to confidentiality - Only shipped UI & explanation is included below.

It is designed to be transactional in nature which helps users to take actions or understand details about their Windows device and subscriptions. 

Game Pass upsell card on Home Page.

Avid gamer who non-subscribers opted for Game Pass subscription via Home Page nudge. And There were XXk number of PC Game Pass subscriber who upgraded to GP Ultimate via resubscribe flow. This resulted in acquisition of existing subscriber to top tier SKU. The product was shipped in time with M365 upsell cards, but the acquisition rate was lesser than expected. One key reason might have been the visibility of the Game Pass card.

Thanks for watching & reading, I appreciate it.

Xbox: Acquisition

Accounts rejuvenation was a part of bigger effort to make account management easy &amp; intuitive for Microsoft users in Windows 11.&nbsp;

Microsoft has a classic challenge of having multiple emails and accounts attached to a single user. This creates chaos in a user's account graph. 

The reason for this chaos is because of Microsoft's history of acquisitions. For example, a per had an account on Xbox, but after its acquisition, they created another Microsoft account for signing in to Windows device. Similar are the cases for OneDrive, M365 suit, etc.

To make things easy to understand &amp; intuitive, whole Information architecture of the Accounts L1 page in Settings app had to be re-imagined.

This work is still WIP, hence full project process and details can't be shared publicly.&nbsp;

Making emails & accounts management user friendly in accordance to user's accounts graph.

Accounts rejuvenation was a part of bigger effort to make account management easy & intuitive for Microsoft users in Windows 11. 

To make things easy to understand & intuitive, whole Information architecture of the Accounts L1 page in Settings app had to be re-imagined.

This work is still WIP, hence full project process and details can't be shared publicly. 

Accounts L1 revamp

Mezzo is a platform that provide grooming services in store or at home.

Mezzvo: B2B dashboard

Smart fridge app for iOS, VisionOS, WatchOS

Smart fridge app

Ashutosh’s attention to detail and ability to balance aesthetics with usability stood out in every project we collaborated on.

Aisha Verma

Ashutosh’s design decisions always connect back to the user journey — crisp, intuitive, and well-reasoned.

Tayyari: Mock tests app

Ashutosh Vashishtha