Brief: Portal for hospitality real estate investors

Field: Saas, Finance, Data Viz

Role: UX, UI(most of the time) Designer

Zyyo is a startup focus on re-define real estate investment in hospitality. The investor portal provides direct access to curated restructuring, growth, re-financing and special situation deal flow in a tokenized and traditional format.

01 | UI Flash Out

Re-thinking dark theme - “Not that dark” theme with elevations and layers

When I picked up the design, the first thing I was told was: “It has to be dark theme”, it is one of the hard requirements. Since I had never worked with dark theme design, I did a lot of research on the UI pattern using dark theme.

Before I started, the portal website was using “#000” absolute black as the background, it is not done properly with dark theme principles. In another way, using a dark grey as the background color enables the website show more elevation of different modules, it also creates a visually more vibrant website.

Using black restrict the website showing layers. It is hard to find a visual focus.

Use dark grey - rather than black - to express elevation and space in an environment with a wider range of depth.

Using Layout Grid System

After talking to dev and the team, we decided to use material design with React JS envirommemt for UI development. The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts, before I joined the team the design was not constrained properly by the 12-grid system. I guided the team cleaning up the design file making sure everything is on the grid.

I also set the breakpoints for each screen size to make sure the website is responsive on different devices.

Simple, Clean & Accessible UI Pattern

The old design for project header (top) contains very drastic font sizes, and the icons are confusing as well for users. Most impotantly it looks like “Windows XP”. I rearranged it with more consistent font sizes, more clean icons and UI patterns.

Present More Info within Limited Viewpoint Space

Project card is always on the top of the page which gives general information and data. With the previous design (Left), the visual of data takes a lot of space and does not mean anything to the users. After understanding the concepts of these data I re-design the data visualizations on the card.

On the mobile view it gives more space on the screen without requiring users to scroll down to see all the data information.

02 | Conceptual Design for Showcase

Understand Company’s
Mission & Goals

Zyyo aims to present valuable source and provide excellent service to real estate investors. The investor portal is a platform for exclusive members, one of the most important feature is the data analysis provided by analysts in the investment team. Zyyo needs to stand out as a fin-tech company among a large number of traditional real estate investment companies, therefore showing the company’s professinal data analysis service on this digital platforms is of vital importance.

What’s the Next Step for Company

When I entered the team, the investor portal was just built in MVP, after polishing the UI for each page, we were seeking the next step for product development. I suggested the portal needs more personalized features supports each user with different goals and interests, giving users a sense of “personalized service” while in the MVP we only listed construction projects available for investment without any personal preferences.

At that time Zyyo was pitching to get more fundings without actual database support, I was told to design a user landing page for presentation to show the company’s direction towards creating more personalized portal.

Designing User Dashboard for A More Personalized Experience

CTA to “Marketplace”

- We want to guide users to the marketplace when users landing on this page to explore more projects.

Investment Summary

- I put the emphasis on numbers on the top to summarize users’ investment outcome. It gives users a high level overview on their investment, essentially, it is a way to gamify the investing experience. In another perspective it presents our direction in the future development.

User’s Project Collection

- The next development sprint we will create a database storing users’ project collection. This form shows the key data generated by the investment team, it is a feature for better project progress & finance tracking.

Return history projection

- One of the design principle I always follow is “making the most frequently used feature as accessible as possible” I created this feature to visualize the return data which is the key information investors want to see, the projection presents outcome from our professional investment team, the actual return helps users track their actual return.

Admin Dashboard Concept

As construction keep moving forward, there are always small changes happening. The data is organized by the finance team and stored in MongoDB, analysts need to contact back-end dev to update the project information, at the same time there are more analyst coming to the expanding team, the team needs a better way to communicate, admins needs a better way to management users in portal. I was asked to design a dashboard for admins to solve those problems.

03 | As a UX Designer: None Tech Company Product Team Education

I was hired as a UX Designer, when I entered the team I expected being lead through the “standard” UX process in this position, while in fact, oops, we had a morning product team every morning, being told by a manager from the finance team “what we want”/”what we do not want” and that’s it, there is no “design process”, I did not get to user my knowledge to improve the UX process. When I brought up how “user research” can improve the product pivoting and help prioritizing the features, I was told “It is really hard to talk to those investors, they are very prestigious people and you do not have chance to talk to them”.

So what could I do? After got answers of “No” for many times, I firstly started with small design research experiment in the team, when I came up with new designs I would usually make two versions, sending them to the team to let everyone pretend that they are the users, in this way, I was able to run a quick “A/B Testing” within our product team. Another thing I was trying to do is sending out articles (I do not think people read though) and constantly bringing up design concepts. Until the end I was not very successful, but I did what I could to make everyone values more about the actual “product”. Reflecting on this experience, if there is anything that I could do better I would take more initiatives and grab everyone in the team for a lunch meeting talking about product design.