This is a project that I led and worked on from design to development during my time at Zehitomo, a local services platform that connects freelance professionals with customers who need their services.

Background information

Zehitomo is used by 2 different types of users, the pros and the clients. Pros are the freelance professionals who use this platform to find jobs and clients use the platform to find pros. The features on pro’s side are more complex since they are using the application on a daily basis to manage their business, find clients and communicate with clients, whereas most clients come to the website once in a while when they need to hire someone for a service. This redesign is mainly focused on the pro side of the application.

The problem

The Zehitomo web application was first built in 2015 and a lot more functionalities have been added on ever since without changing any of the initial layout. Links to all the different sections of the site were just piled up in a dropdown menu and there was no clear organization and prioritization. The original menu organization and layout also became a problem when we wanted to bring more of the users’ attention to the notifications we send because the notification tab is hidden in a dropdown menu on mobile. There are a lot of other UX problems that need to be solved, but the main layout and reorganization would need to be the first step. From an operations perspective, the lack of structure of the site has also made it difficult for the sales and customer success teams when they try to guide our pros through all the different features they can use on the site because they will have to go all over the place, which leads to a quite confusing user experience. On top of that, a large proportion of our pro users are not the most adept with new technologies, in fact, many of them still use fax machines. With all these things in mind, I started planning for a redesign of the main menu and site layout to achieve the following 3 goals:

• Organize functionalities and sections of the application in a way that’s easy to understand and also helpful for the sales and customer success teams when they are communicating with the pros.

• Prioritize information that is important.

• Deliver a clean and easy to navigate user experience.

Solution

Structural change

The pro side of the application has the following sections

• Home

• Dashboard

• Service settings

• Service location

• Business hours

• Application templates

• Account

• Notifications preference

• Missions

• Billings

And all of them are listed one after another in a dropdown menu on both mobile and desktop .

To reorganize these sections, I started by understanding the user journey when they first set up their account, when they use the app to find jobs and communicate with clients, and when they manage their services. I wanted to structure the sections in a way that when users go to a section of the site, they can have easy access to everything they need that’s related to the section.
I also took the sales team’s daily operation into consideration, for example, when they talk to our pro users, what are the steps they take to introduce the app to the pros, and how they help pros set up their account. After some discussion and investigation, I reorganized the menu and grouped all the sections into main menu items, their associated sub menu items, and common action items.

Dashboard remains as the top most item on the menu because it is the most frequently used part of the application - where pros communicate with clients and see new job postings.

By putting services, locations, business hours, and application templates all under Service Settings, pros now can go here for all the service related settings.

Similarly, account settings will now contain all the account related settings and preferences.

Billings and Missions remain as main menu items because we received strong opinions from the sales team and customer success team to make these two sections prominent on the menu so that pros can easily access their billing info and check out Missions for tips to improve profile.

With this reorganization, notifications can be taken out from the main menu and be a tab on the navigation bar on its own. The common action items will be accessible from the main nav bar as well but separated from the main menu items as they serve different functionalities.

UI Changes

After deciding on the structural change, I started making some mockups for a new UI that is suitable for this new organization. 

Desktop

The old desktop menu was a dropdown menu with 10 items in it.  With the new organization of menus, there are only 5 main sections and, we can afford to lay them out on the header to make the best use of all the real estate we have on desktop and also the users can immediately see the menu without any interaction. And then all the subsections will become items in a sub menu inside each main section. I chose the side navigation to balance out all the horizontal space we have on the desktop. 

Mobile
For mobile, it’s a bit trickier. I explored different ideas of the main menu. At first I was tempted to make the menu into a bottom nav bar for better accessibility given that phone sizes are getting larger and larger these days. However, because Zehitomo is a web application, the bottom navigation might not be the best because all browser apps have their own bottom toolbars as well. In addition, we use sticky buttons at the bottom of the screen a lot for our mobile site so having a bottom navigation below that will just be too messy.

At the end, I still decided to go with the top left corner menu button that slides open to a menu list. And the notification icon will be placed on the top right corner so that users can have easy access to the notifications. 

For the sub menus, I explored options of dropdown, tabs, breadcrumb list.

At the end we decided to go with scrollable horizontal tabs given that we want all the sub menu items to be visible at a glance, but for some sections (e.g. Service Settings), it’s hard to fit the sub menu items all in a top nav. We did some research on popular Japanese web platforms and found that scrollable top navigation is common in Japanese sites and therefore decided to use that for this redesign.

Design Validation & Implementation

Before moving into the development phase, I created an interactive prototype for the new menu and pages. We contacted a few pros to ask them to take a look at the design and navigate to different sections using the prototype and gathered some feedback at the end. The feedback was positive and pros expressed that they like the cleanness of the new design and think the organization makes a lot of sense. It was easy for them to find everything they needed. 

After validating the design with usability tests, we moved forward with implementation and eventually rolled out the new design as a partial release at first to make sure there were no bad reactions to it. Then eventually, we deployed the new design to all of our users. If you go on zehitomo.com now, this is what you will see.