When I was working with AiLink, an early stage startup, I was tasked with re-designing the Unilink app, which helps students and young professionals find apartment units to rent as well as potential roommates.

I was the first and only designer at the company, so the re-design was practically starting everything over from scratch. **I interviewed people, mapped out architecture of the app, tested ideas with lo-fidelity design, defined style guide with typography and colors, built components library, made high-fidelity design and interactive prototypes.**

### Figma

Tip: You can go to "Pages" from left panel to check out components, icons, style, etc. on other pages)

```cv
figma
{"url":"https://www.figma.com/file/KoWrffV7MsXqxJ5ouMWeCh/Unilink-Redesign---Ria?node-id=8%3A0"}
```

### Prototype

```cv
figma
{"url":"https://www.figma.com/proto/KoWrffV7MsXqxJ5ouMWeCh/Unilink-Redesign---Ria?page-id=8%3A0&node-id=51%3A2&viewport=310%2C48%2C0.11&scaling=scale-down&starting-point-node-id=51%3A2&show-proto-sidebar=1"}
```

Unilink App Design

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb04QGGQmC3Ywkgc41lNygLDx7uu2%2FU0zTcNbdXPiAn8pMIuf0%2F64b2cb6c-4c51-4132-91a2-cd009d0e201a.png?alt=media&token=11bcfc62-7761-4c1d-ae9f-00bdf6362f27","id":"64b2cb6c-4c51-4132-91a2-cd009d0e201a","width":375,"height":812,"filename":"tab groups 1.png","type":"image/png","caption":"How it started","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb04QGGQmC3Ywkgc41lNygLDx7uu2%2FU0zTcNbdXPiAn8pMIuf0%2F79c219f9-1b9d-40d3-9ced-513fa81cc2da.png?alt=media&token=ee4c4106-fadf-4eca-9241-95e9e9b32558","id":"79c219f9-1b9d-40d3-9ced-513fa81cc2da","width":375,"height":812,"filename":"tab groups 2.png","type":"image/png","caption":"","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb04QGGQmC3Ywkgc41lNygLDx7uu2%2FU0zTcNbdXPiAn8pMIuf0%2F29e155d4-9e9b-4ed3-ada7-d04f3f08e825.png?alt=media&token=14763f94-8ba3-47de-9441-d8862b8d3815","id":"29e155d4-9e9b-4ed3-ada7-d04f3f08e825","width":375,"height":812,"filename":"tab groups 3.png","type":"image/png","caption":"How it's going","border":true}]}
```

### Why

Browsers were born on desktop and optimized for desktop. Mobile browsers were an afterthought. They're seen as "for quick tasks on the go".

What if they're not?

When I got in charge of designing for the Neeva browser app, I saw an opportunity to challenge the status quo by designing mobile-first experiences. The tab switcher, and tab groups in particular, were some of the experiences that the team and I spent lots of heart on.

### A little context here:

The introduction of tab groups on desktop Chrome was game changing for many, including myself, who crave organization when handling complex browsing tasks. However, tabs groups on mobile didn't catch up that well. In fact, they're not even available on Chrome's iOS app. Safari in iOS 15 does support tab groups, but its take on tab groups makes them closer to browser windows on desktop than tab groups.

**My goal was to design tab groups on Mobile to be just as great, if not better, than tabs groups on Chrome desktop.**

When I first started designing for tab groups, I imagined a smart and multi-functional UX that was inspired by iOS's App Library concept.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb04QGGQmC3Ywkgc41lNygLDx7uu2%2FU0zTcNbdXPiAn8pMIuf0%2F91293c2a-bf07-48cc-beaf-b530df6bbc0d.png?alt=media&token=fb9f414a-9c02-4e4a-8985-072c9cf96f9e","id":"91293c2a-bf07-48cc-beaf-b530df6bbc0d","width":375,"height":812,"filename":"tab groups 1.png","type":"image/png","caption":"Tab Switcher","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb04QGGQmC3Ywkgc41lNygLDx7uu2%2FU0zTcNbdXPiAn8pMIuf0%2Fec94f0b5-42b8-4882-9c2c-a9755386a770.png?alt=media&token=43ed9408-e180-4a8f-9d46-5cc0d7b27e10","id":"ec94f0b5-42b8-4882-9c2c-a9755386a770","width":375,"height":812,"filename":"tab group zoom in 1.png","type":"image/png","caption":"Tab group zoom-in","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb04QGGQmC3Ywkgc41lNygLDx7uu2%2FU0zTcNbdXPiAn8pMIuf0%2F40f185c3-31c3-4baa-90e6-190ef27dc357.png?alt=media&token=a60a1ae6-2e6f-4eb3-8a8d-213132680651","id":"40f185c3-31c3-4baa-90e6-190ef27dc357","width":375,"height":812,"filename":"history.png","type":"image/png","caption":"Tab history","border":true}]}
```

### Two major ideas I proposed in this design:

**1.Smart grouping of tabs based on the tasks that involve multiple tabs.**

The tasks are inferred from link navigations. For example, if you run a search and then visit sites from links in search results, the search results page and the sites visited from search results would be grouped into a tab group with title of the search query.

**2.Nested tab groups supporting two types of interactions within tab groups.**

This design offers 1-step navigation to recent sites within a group as well as dedicated zoom-in tab group view.

### User Research

The team was excited about these ideas. I then ran a user research study of 6 moderated sessions, each including interview and prototype testing to understand if the design works for browser users.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb04QGGQmC3Ywkgc41lNygLDx7uu2%2FU0zTcNbdXPiAn8pMIuf0%2F4c0e2316-af7c-4337-9299-236cbeff5939.png?alt=media&token=5d33c5b0-1e33-433b-9eaf-830ca8516d4a","id":"4c0e2316-af7c-4337-9299-236cbeff5939","width":2538,"height":2892,"filename":"Screen Shot 2022-02-24 at 12.57.39 PM.png","type":"image/png","caption":"Screenshot of study guide","border":false}]}
```

The results were overall very positive. **All participants rated the proposed design at least 1 point higher than their current experience.** Smart grouping got dominantly positive feedback.

However, the nested tab group design was controversial. Based on constructive feedback from the study, I iterated the tab group design to be more conventional, which was considered "safer" and was then shipped.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb04QGGQmC3Ywkgc41lNygLDx7uu2%2FU0zTcNbdXPiAn8pMIuf0%2F3ac3f53b-a2f2-4fc8-88df-b5119f455d94.png?alt=media&token=91da65f9-1149-4779-86b6-50b010cb36e7","id":"3ac3f53b-a2f2-4fc8-88df-b5119f455d94","width":375,"height":812,"filename":"tab groups 2.png","type":"image/png","caption":"Tab Switcher","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb04QGGQmC3Ywkgc41lNygLDx7uu2%2FU0zTcNbdXPiAn8pMIuf0%2Fce3a0cb2-eb4e-4a64-91bf-dadbafdd619a.png?alt=media&token=fe93f1f6-4288-4802-af43-ec3464dd65e6","id":"ce3a0cb2-eb4e-4a64-91bf-dadbafdd619a","width":375,"height":812,"filename":"tab group zoom in.png","type":"image/png","caption":"Tab group zoom-in","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb04QGGQmC3Ywkgc41lNygLDx7uu2%2FU0zTcNbdXPiAn8pMIuf0%2Fb31a511a-0df7-4f0a-9aa3-2420cfc913bc.png?alt=media&token=afaf4b88-a843-4ef9-9dcf-6915cff787b1","id":"b31a511a-0df7-4f0a-9aa3-2420cfc913bc","width":375,"height":812,"filename":"Tab group zoom in - edit.png","type":"image/png","caption":"Edit tab group","border":true}]}
```

### Iterate after shipping

What then happened was fascinating. **Now that tab groups are used in real life, people found the conventional UX less than satisfying**. I began to hear similar feedback on tab groups UX being inconvenient, which got me rethinking the design. The mobile head and I talked and thought that perhaps my first iteration would solve the problem better, although iterations needed to be made to address the feedback I received when user testing it.

Since tabs groups shipped, I was able to get valuable data and insights on usage patterns, which helped guide the design direction. After rounds of iterations and whiteboarding sessions, I reached a version of design that felt right. It **embraced the direct navigation part of the initial design, but simplified the "nested" part.**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb04QGGQmC3Ywkgc41lNygLDx7uu2%2FU0zTcNbdXPiAn8pMIuf0%2F357b8843-b79d-4051-99bd-e42372acfcb0.png?alt=media&token=176e757f-22ab-48b1-9e98-5a76dcdf795e","id":"357b8843-b79d-4051-99bd-e42372acfcb0","width":375,"height":812,"filename":"tab groups.png","type":"image/png","caption":"2 tabs group","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb04QGGQmC3Ywkgc41lNygLDx7uu2%2FU0zTcNbdXPiAn8pMIuf0%2F4d845cf5-11ed-4d06-b332-90b4a2c29b44.png?alt=media&token=7e7db0f8-b386-4ac4-921b-7f4fde270141","id":"4d845cf5-11ed-4d06-b332-90b4a2c29b44","width":375,"height":812,"filename":"tab groups 3.png","type":"image/png","caption":">2 tabs group [default]","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fb04QGGQmC3Ywkgc41lNygLDx7uu2%2FU0zTcNbdXPiAn8pMIuf0%2Fec3ce0f9-4dc2-49c8-bd6b-3c79ff77d994.png?alt=media&token=6bb6043f-9506-4e51-84d7-b0dea51388b8","id":"ec3ce0f9-4dc2-49c8-bd6b-3c79ff77d994","width":375,"height":812,"filename":"tab groups expanded.png","type":"image/png","caption":">2 tabds group [expanded]","border":true}]}
```

The new tab groups design is currently being tested in Testflight build. Early feedback has been very positive.

### Takeaways

One of my biggest takeaway from this is to not take User Research feedback at face value. As a designer running her own research, I fell in the trap of making design decisions based on what users told me they wanted. In future, I would **dig deeper on what makes users say something, and what are the real problems they face instead of the solution they say they'd want**. User research is no easy task, and I bet it would be better if I could work with a dedicated researcher.

### Next Steps

As of next steps for tab groups, I look forward to getting real life data once it become publicly available and continue to iterate. At the same time, I'm working on designing **a smarter tab switcher that sections and displays tabs/tab groups based on time** to help users manage (or reduce the need to manage ; )) the tabs forest they plant in mobile browsers, stay tuned!

Evolving Tab Groups on Mobile

Product Designer

Enterprise Design Thinking Practitioner

Finding an apartment and roommates to share it with can be daunting, the Unilink App is here to make it a breeze

What if having tons of tabs on mobile is not dreadful? Maybe, just maybe, they can even be delightful?

President

· Cofounded the student organization as a new chapter of a registered Nonprofit to promote mental wellness among international audiences.
· Led design and marketing activities which achieved 120% growth in social media followers.
· Run organization and held events by coordinating multifunctional teams as well as external organizations and sponsors.

Design Lead

Designed and ran user research studies with clients and recruited participants. Conducted competitive analysis, screening surveys, user interviews, and usability testing. Delivered insights for user experience and product.

UX Design Research Intern

First designer at a startup focusing on a mobile app. Led research, workshops, and whiteboarding sessions to drive product and design direction. 
Established style guide and design system with colors, typography, components, and interactions. Designed and communicated experiences through user flows, wireframes, mocks, and prototypes.

Led design for mobile apps on iOS and Android from conception to launch. Created end-to-end flows and user experiences of Neeva products. Built prototypes, information architecture and design systems. Conducted user research and built tight feedback loops from users into product design and development process.
Collaborated closely with cross functional teams including product, engineering, growth, marketing and customer experience