Ria
Ria

Unilink App Design

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)

Prototype

Send Ria a reply about this page
More from Ria

Evolving Tab Groups on Mobile

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.

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.

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.

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.

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
4 min read
Back to profile