Upequity

We used Vue.js/Nuxt with Server-side Rendering. The main benefit was Vue.js’s robustness and speed with the added spin of Nuxt’s Server-side Rendering, which took it a step forwards and made it all the more SEO friendly and snappier.This allowed UpEquity’s team to still use their old content management while allowing us to create a visually attractive, robust, elegant and appealing solution.

The existing UI was lacking the brand’s key features. However, we didn’t ignore the previous structure, but carefully inspected the old layout, trying to understand how users use each element, and built our design on top of it. In addition, stakeholders wanted to incorporate UpEquity’s brand guidelines: signature colours (sky blue, teal and sun gold yellow), font (Montserrat) and the brand’s ‘’feel’’: empowering, trustworthy and forward-looking.The UpEquity service is based on providing their clients straight-forward, easy and stress-free experience of buying, selling or trading up real estate, and providing refinancing. Those functions were laid out on the landing page, creating a visual flow of supporting images and information, broken down into service groups. In order to decrease endless scroll, we used links in header to connect them to the matching section on the landing page.We carefully selected images with an authentic look - images with natural and bright tones, set in real-life settings, depicting a family atmosphere.’’For Agents’’ was created as an additional page, in order to separate two types of clients, buyers/sellers and agents. The intention was for agents have quick access to all the information they need. Special attention was given to the UX and UI design of the Wizard - custom made user-friendly flow, connecting users and stakeholders.

End users deserve special attention and this Wizard’s intention was getting to know them and their needs with the goal of offering the perfect solution! The wizard site launches with a greeting message and a CTA button. Following that there are questions to precisely get to know what the user seeks. Depending on their persona - agent, buyer, or if they’re in search of refinancing - further questions open up and are displayed to the user. The goal is to optimize the experience and engage the user!Users can easily jump back to the landing page via the header - by clicking on the UpEquity logo, and on the right hand side there’s a personalized greeting message (if the user has answered the first question). A clean and minimal interface makes it easy for the user to know what to do. Big black text on white background is the safest way to show them what is important and what their eyes should gravitate to. You should always make sure that the text is easy to read, and that the actions are effortless to find and use. The form displays detailed questions about the user’s current needs and wants and then leads them to various different actions. The collected data is then used by UpEquity to prepare for an incoming call, meet, or to prepare an offer.Users need to be aware of what happens at what time so it is always a great idea to show them visually how far along they are in the process. The right side of the screen, below the icon showing the current topic, shows the progress of previously answered questions so that the user can keep track of their steps. After completion, the user gets to choose the wanted action (scheduling a call or a meet, getting more info via email, or applying for an offer). While scheduling a meet or a call with the agent, the reservation of the available timeslot on the wanted date is painless and intuitive - handled with a visually pleasing date-time picker. The user is offered an overview of the available dates and available time slots on a particular day. After picking a time slot, both the user and the agent will get a confirmation email for the appointment. Scheduling events has never been more easier!