In the previous note, we talked all about tab bars, their significance and guidelines for proper usage. While it’s extremely useful, it’s not the only method of traversal across an app. The more commonly used method of navigation is ***Interactions***.

If tab bars are used to navigate across different sections in an app (that have little to do with one another), Interactions are used to navigate between *views* within a tab.

Simply put, this can be done in two ways -

* ‘Pushing’ through the app’s hierarchy by going to one page after another

* Using modals

**Pushing** is the default way of going through an app. You start at a higher level, and push to get into more detail.

**Modals** are used when the task at hand is self-contained. It creates focus, and is separate from the information hierarchy of the app.

## Hierarchical Navigation (aka Pushing)

Pushing allows frictionless transition between core areas of an app. It reinforces the difference and helps traverse between top level and lower level hierarchy.

### When should one use a push?

When your app’s workflow requires a lot of back-and-forth, and where users switch between flows in the app, using push transitions are recommended.

For example, if WhatsApp opened a modal (instead of push) to show a chat, users would think twice before closing it when it’s no longer relevant. By providing a push transition, they know how to access it again (and go back to the main page), so it allows for frictionless task switching. In this case, that refers to going from one chat to another.

### What to keep in mind while using a push?

* As you go deeper into the app’s hierarchy, the content should be more specific and the options should be lesser.

* Use the nav bar to orient people in the hierarchy - If I’m inside a page, I should be able to know where I came from. This can be achieved by having a back button (to move up by a step in the hierarchy), and a specific label.

## Modal Presentation

A modal interrupts your current workflow and prevents you from using the rest of the app by covering the tab bar. It’s an intentional disruption, because the purpose is to reinforce focus.

It’s primarily used for self-containing tasks, which is of 3 types -

* Simple task → Creating an event, setting a reminder

  Locking in helps users finish without distraction.

* Multi-step task → Adding a transit card to a wallet

  It may seem counterintuitive to use modals for a complicated task, but the purpose here is to make sure this task isn’t abandoned midway by clicking elsewhere in the app.

* Full-screen content → Videos, photos (like Stories on Instagram)

### What should every modal contain?

* An option to dismiss - so the user can leave the task, either by clicking ‘X’ or ‘Cancel’

* Label/title

* Primary action

### What to keep in mind while using a modal?

* When there is no user input, the ‘X’ button is used to dismiss the modal. However, any input should be followed by a confirmation to submit said input (for clarity).

* Limit modals over modals, because that can be jarring. However, sometimes it is necessary.

  For example, adding photos (a self-contained task) to an itinerary (another self-contained task).

Getting navigation right requires focus and intention, and should always be thought of while designing new features for an app.

Notes on interaction navigation in iOS apps

*Note: This is a brief walkthrough of part 1 of the biggest project I undertook at NextLeap. For confidential reasons, I couldn't delve into all the details behind the decision-making of the various sections. If you're interested in learning more, we can get on a [call](https://calendly.com/spriyak/a-quick-discovery-call) and discuss.*

> What is NextLeap?
>
> NextLeap is a learning network for new age professionals. It creates cohort based courses for industry professionals, and individuals looking into transition careers.

## What was the problem?

In the beginning, the learners would have to use multiple tools for the cohorts -

* Notion for course material

* Zoom/google meet for live sessions

* Google forms for assignment submission

* Slack for the community chat

This meant that the learning experience designers also had to work and co-ordinate across all these tools for each cohort, which was proving to be tedious and not scalable.

## What was the proposed solution?

The solution was two-fold -

1. A web-based learning portal for our learners to access course material, submit assignments and projects, keep up with announcements, and more.

2. An internal cohort builder to enable our learning experience designers to set up the cohort information before it starts, create live events, tasks, course material, etc.

## What was the impact of the solution?

1. 500+% increase in the number of Product Manager Fellowships over 1 year

2. 5 new fellowships launched in the same year

All because the cohort builder made it so easy to create, duplicate and iterate each time!

## The creation segment of the cohort builder contains 4 tabs-

1. Instructors & Mentors

2. Scheduling - Events & Stages

3. Pricing & Booking

4. User Management

### Instructors & Mentors

This section deals with the profiles of instructors who take the course and the mentors who’ll help the learners on their learning journey.

This information is also used to determine learner groups, providing host access during live sessions, and more.

Prototype of the flow -

```cv
figma
{"url":"https://www.figma.com/proto/ld7XieePhKE5Xl7IJeBdCw/Cohort-Builder-Creation-Case-Study?type=design&node-id=101-68&viewport=502%2C265%2C0.02&t=I85IVycDeGDdCb8K-0&scaling=min-zoom&starting-point-node-id=249%3A731&show-proto-sidebar=1"}
```

Some screenshots from the flow -

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcSkk79QQ5hbR42q50k3dP2q2HGs1%2FPvvQkStAq6pgSMboXl7W%2F4c8e5dac-9496-4b00-b4be-69f775c26c06.png?alt=media&token=7938ebca-3a2f-45d9-813a-16f915ed0c03","id":"4c8e5dac-9496-4b00-b4be-69f775c26c06","width":2880,"height":1798,"filename":"image.png","type":"image/png","caption":"Instructors & Mentors Tab","border":false}]}
```

### Scheduling - Events & Stages

This section deals with the stages of the cohort, from registration and course work to evaluation and interview prep.

It is also used to setup and manage all the live sessions, from the ones hosted by the instructor, to the mentor sessions and community catch-ups.

Prototype of the flow -

```cv
figma
{"url":"https://www.figma.com/proto/ld7XieePhKE5Xl7IJeBdCw/Cohort-Builder-Creation-Case-Study?type=design&node-id=101-68&viewport=502%2C265%2C0.02&t=I85IVycDeGDdCb8K-0&scaling=min-zoom&starting-point-node-id=249%3A10741&show-proto-sidebar=1"}
```

Some screenshots from the flow -

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcSkk79QQ5hbR42q50k3dP2q2HGs1%2FPvvQkStAq6pgSMboXl7W%2F5c21c290-7158-4943-8ad7-b0dcbe485ca7.png?alt=media&token=6af283d7-59a7-42f1-a7e6-e08faa14c784","id":"5c21c290-7158-4943-8ad7-b0dcbe485ca7","width":2880,"height":1460,"filename":"image.png","type":"image/png","caption":"Stages of a cohort","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcSkk79QQ5hbR42q50k3dP2q2HGs1%2FPvvQkStAq6pgSMboXl7W%2Fd276714c-ea07-47ff-bfa2-be050192376a.png?alt=media&token=f774c027-cb4e-4b00-9f65-ccc179f07758","id":"d276714c-ea07-47ff-bfa2-be050192376a","width":2880,"height":1460,"filename":"image.png","type":"image/png","caption":"Events - Calendar","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcSkk79QQ5hbR42q50k3dP2q2HGs1%2FPvvQkStAq6pgSMboXl7W%2F1185b92a-ba49-4e75-b55e-f12d5c6296e1.png?alt=media&token=11ae8b21-650b-4695-8bfd-15520d98f0f1","id":"1185b92a-ba49-4e75-b55e-f12d5c6296e1","width":2880,"height":1460,"filename":"image.png","type":"image/png","caption":"Events - Session Recordings","border":false}]}
```

### Pricing & Booking

This section deals with the pricing information of the cohort, along with any details related to discount campaigns, coupons, and group payment features.

Prototype of the flow -

```cv
figma
{"url":"https://www.figma.com/proto/ld7XieePhKE5Xl7IJeBdCw/Cohort-Builder-Creation-Case-Study?type=design&node-id=101-68&viewport=502%2C265%2C0.02&t=I85IVycDeGDdCb8K-0&scaling=min-zoom&starting-point-node-id=249%3A13604&show-proto-sidebar=1"}
```

Some screenshots from the flow -

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcSkk79QQ5hbR42q50k3dP2q2HGs1%2FPvvQkStAq6pgSMboXl7W%2F585df735-65b3-47a1-bf14-b1627053bdeb.png?alt=media&token=e7cf9e81-d414-43e7-8bc2-c1993c9acd60","id":"585df735-65b3-47a1-bf14-b1627053bdeb","width":2880,"height":2372,"filename":"image.png","type":"image/png","caption":"Pricing & Booking - Main Form","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcSkk79QQ5hbR42q50k3dP2q2HGs1%2FPvvQkStAq6pgSMboXl7W%2F2a61eab2-e389-4ed3-983e-b36719b1f4b8.png?alt=media&token=e48a02a6-a599-41df-8db1-4234b0f20e7c","id":"2a61eab2-e389-4ed3-983e-b36719b1f4b8","width":2880,"height":1460,"filename":"image.png","type":"image/png","caption":"All Referral Campaigns","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcSkk79QQ5hbR42q50k3dP2q2HGs1%2FPvvQkStAq6pgSMboXl7W%2F6e674724-9946-4bca-a073-c22a8e4a8f22.png?alt=media&token=8a0a6cc3-042a-4350-8b49-171a22541cb9","id":"6e674724-9946-4bca-a073-c22a8e4a8f22","width":2880,"height":1460,"filename":"image.png","type":"image/png","caption":"All Course Coupons","border":false}]}
```

### User Management

This section deals with the information of learners who sign up for the cohort.

It’s also the place where the learning groups can be created and managed, along with returns & refund management.

Prototype of the flow -

```cv
figma
{"url":"https://www.figma.com/proto/ld7XieePhKE5Xl7IJeBdCw/Cohort-Builder-Creation-Case-Study?type=design&node-id=101-68&viewport=502%2C265%2C0.02&t=I85IVycDeGDdCb8K-0&scaling=min-zoom&starting-point-node-id=249%3A17442&show-proto-sidebar=1"}
```

Some screenshots from the flow -

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcSkk79QQ5hbR42q50k3dP2q2HGs1%2FPvvQkStAq6pgSMboXl7W%2F8aa10abb-80fe-4bae-9746-e507d19bf1fb.png?alt=media&token=8abbf673-e1bc-4b5c-a60f-1ca1e49e76b0","id":"8aa10abb-80fe-4bae-9746-e507d19bf1fb","width":2880,"height":1460,"filename":"image.png","type":"image/png","caption":"User Details - top of page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcSkk79QQ5hbR42q50k3dP2q2HGs1%2FPvvQkStAq6pgSMboXl7W%2F7411191c-5ba3-415f-9f21-0677f5d0b05a.png?alt=media&token=d3685976-3767-4122-b709-466aa35120e9","id":"7411191c-5ba3-415f-9f21-0677f5d0b05a","width":2880,"height":1460,"filename":"image.png","type":"image/png","caption":"User Details - bottom of page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcSkk79QQ5hbR42q50k3dP2q2HGs1%2FPvvQkStAq6pgSMboXl7W%2Ffda4626d-62d5-4f83-b0e1-f68b4113ab21.png?alt=media&token=1d6d7768-18d4-4372-8a9a-de4d147163ea","id":"fda4626d-62d5-4f83-b0e1-f68b4113ab21","width":2880,"height":1460,"filename":"image.png","type":"image/png","caption":"Learning Groups","border":false}]}
```

### Publishing configuration info to the cohort

Once all the information is set up, this flow goes through the step of publishing config details to the cohort for learners to access.

Prototype of the flow -

```cv
figma
{"url":"https://www.figma.com/proto/ld7XieePhKE5Xl7IJeBdCw/Cohort-Builder-Creation-Case-Study?type=design&node-id=101-68&viewport=502%2C265%2C0.02&t=I85IVycDeGDdCb8K-0&scaling=min-zoom&starting-point-node-id=308%3A5630&show-proto-sidebar=1"}
```

Some screenshots from the flow -

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcSkk79QQ5hbR42q50k3dP2q2HGs1%2FPvvQkStAq6pgSMboXl7W%2F75010600-c653-406e-b5b3-81bc534a5ca2.png?alt=media&token=9817cecd-0191-4197-8cea-a2039e5069b0","id":"75010600-c653-406e-b5b3-81bc534a5ca2","width":2880,"height":1460,"filename":"image.png","type":"image/png","caption":"Publishing a Cohort - Review Modal","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcSkk79QQ5hbR42q50k3dP2q2HGs1%2FPvvQkStAq6pgSMboXl7W%2F76637773-db8f-4996-bea6-ded8026a116b.png?alt=media&token=2dca6574-bad9-4329-9361-b51419b600c6","id":"76637773-db8f-4996-bea6-ded8026a116b","width":2880,"height":1460,"filename":"image.png","type":"image/png","caption":"Overview page once information has been published","border":false}]}
```

fin.

If you made it till here and are interesting in working together, reach out to me on [Contra](https://contra.com/itsspeed) for freelance projects or [LinkedIn](http://www.linkedin.com/in/spriyak)/[Twitter (X)](http://twitter.com/itsspeedd) for full-time roles. Cheers!

Creating and optimising the cohort creation experience for NextLeap’s learning experience designers

When apps have great navigation, it's often unnoticed because people are able to focus on the content and experience. The goal of navigation is to provide enough of a foundation of familiarity so that people can easily discover content and interact with the app.

Navigation involves teaching people about how things behave, where things belong, and how things work in an app.

The two main modes of navigation inside an app are tab bars and interactions.

*In this note I’m only writing about tab bars. The note on interactions is linked [here](https://read.cv/itsspeed/BOA2JCdzR6Vtn1c8O4Mv).*

### **Tab bars**

Tab bars represent the top-level information in the information hierarchy. They are meant to divide your app into sections and groups that are clear and already established.

I’ve noticed that the first tab in a lot of apps have the most features. Here’s why that might usually be the case -

* It’s tempting to have all features be available at a glance.

* As the app evolved over time, the makers missed out on grouping them based on functionality and put the feature in the first tab.

This first tab is usually named the ‘Home’ tab, and starts collecting features over time. While it might sound reasonable to show everything upfront, this poses some issues -

* Accessing any feature now takes time because the user has to scroll every time to reach it.

* Exposing users to everything at once on the app can be overwhelming (depending on the features, of course).

* Moreover, if the features aren’t related, the mindsets in which people use each of them is not the same *which could cause a cognitive overload.*

To prevent this, the makers should distribute functionality across tabs. If people are unfamiliar with your app, it’s best to organise and communicate content clearly by doing two things -

1. Assess where a feature/content piece belongs in the hierarchy

2. Notice how people engage with it

One justification for creating a ‘Home’ tab is to solve for discoverability. However, discoverability is brought about by content, not function. If an app has just duplicated their features and added them to the Home tab, it creates confusion because there are now multiple ways to access the same things. Due to this, there’s a dissociation between understanding the content and how to act on it.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcSkk79QQ5hbR42q50k3dP2q2HGs1%2FoVPAdqFHsY5SjnMrKyEg%2F1ac51e22-9c6c-4858-941a-999aff5e8b24.png?alt=media&token=6a47019d-040c-4b37-bd6a-d26455e1d346","id":"1ac51e22-9c6c-4858-941a-999aff5e8b24","width":3224,"height":1462,"filename":"Untitled.png","type":"image/png","caption":"Adding redundancy by duplicating widgets from other tabs into the Home tab","border":false}]}
```

If your apps' Home tab looks like this, consider removing it.

Here are a few more things to keep in mind when designing an app’s navigation with tab bars -

1. You should never jump tabs by clicking on an element in another tab because it is jarring and disorienting. Moving from one tab to another should never be forced.

2. Avoid removing the tab bar (and keep it persistent) so that people always have access to it. There are some exceptions but for the most part, it should be accessible.

3. The tabs should have clear and concise labels. They have to be representative of what you can do in that tab.

When navigation deviates too far from our expectations or doesn't match our natural understanding of the world, we often feel frustrated and sense that an app is hard to use. But getting navigation right requires focus and intention, and should always be thought of while designing new features for an app.

Notes on tab bar navigation in iOS apps

I came across product design in my final year of college, after dabbling in graphic design for a while. I watched youtube videos all day, trying to understand exactly what this is about. I met a few designers online and worked with them on a personal (hypothetical) design project (check it out [here](https://medium.muz.li/crowdsourcing-intercity-delivery-ui-ux-case-study-8ed58c2dc34f)).

When you check out someone's design case study, it gives you a fair idea of their abilities to problem solve, create aesthetically pleasing screens, and explain their thoughts clearly. What it doesn't show is all that it took to get there.

It doesn't show the nights they've spent lying awake, wondering if a creative career is for them. It doesn't show the amount of second guessing and confusion because they don't have a process yet. It doesn't show the helplessness of knowing their solution isn't quite right, but not knowing how to go about fixing it. It doesn't show the pain of disappointing the person helping and trying to make them better.

It took every ounce of my willpower and strength to not quit when things were tough — and trust me, they were tough every day. I literally made a wallpaper for my laptop to remind me to 'just keep swimming' (like Dory). To just keep showing up every day. To fall, to make mistakes, to get up and deal with brutal feedback. To understand that everyone learns at a different pace and it's normal to feel lost when you're only a few months in. To understand that having an engineering background is a blessing, not a curse.

These things seem very obvious in hindsight, but I promise you they weren't at the time. When you're compared to your peers and belittled for just not getting it, it really shatters your confidence.

I've sometimes found myself to be grateful to have gone through whatever I went through. After all, I wouldn't be here if not for it.  It's easy to look at people online and wonder how it's such a struggle for you but seems so effortless for them. All of my friends who are designers feel the same way, and each one of us has a different story.

That's how design is; there's no one way to learn. What's obvious to you is surprising to someone else. I'm still amused when people reach out to me for help and advice — If only they knew how clueless I was when I started.

While reflecting, I find it a bit funny that I used to put so much pressure on myself to start a career in what is essentially drawing rectangles all day (jk but you get it). Some days I find myself thinking about where I was over a year ago, and how scared my past self was that she would never be a product designer.

If only she could see me now.