This subscription-based platform required prospective members to complete a registration process involving account creation, plan refinement and payment method. This project was to redesign the existing holistic real estate portal website.
Real estate portal website (Responsive)
In-House Full Time UX/UI Designer
• Handled all UX/UI design solo
• Led to redesign the existing landing page from ideation to launch with
product team and engineering team
• Created wireframe of end-to-end flows, prototyping, visual design mockup,
and design specifications
• Redesigned all as a company brand product
• Simplified all experiences
• Delivered all design screens and assets on time even though the deadline was
super tight
• Usability testing average score: 80 positive results from initial designs
• V2.0 free account conversion rate 13% increased from V1.0 (7.5%)
This is the customer survey result after release. We surveyed customer satisfactions. This result tells me if the Terrakan is successful or not. It was not perfect result but it was a good start.
I accepted the situation: This project was already starting implemented by developers before I joining this project. The product manager wanted to keep the current flows (Developer Architecture) and wanted me to deliver the visual design and specs only to speed up the implementation.
I analyzed the subject matter and reviewed the entire screen and researched other competitors website. I made a list of problems, discussed with a product manager to find out more concerns / issues on the existing screens and researched more to have a better understanding of the problem.
Problems
1. Developers centered design: Coding driven first and squeeze design into it. It
made complex and poor user experience and design.
2. The look and feel: One of my biggest challenge for this project was that the
developer team's manager wanted to have the design following the website
template which they already bought when I joined this project.
3. Lacked of informations about our services on the existing landing page.
4. Stakeholders wanted launch as fast as possible without considering if the
services are ready to use.
.png)
My research was started with analyzing competitors. There was a limitation for user interviews and testing because of COVID-19 situation. So I did user interviews and usability tests through Zoom to have a better understanding of their pain points. Through the research and interview, I validated the user pain points and user needs and, created Competitive & Comparative Analysis.
I was able to see common trends with the users pain points from our affinity map. I calculated how many times users stated the problem to identify the top issues for our users: Lack of the information about what Terrakan does.
.png)
To help me define who Terrakan is for, I created two personas for two different membership types(Basic & Professional members) of Terrakan service based on the information from the research step. I referenced these personas throughout the UX phase to understand how my design decisions would best help the users.
.png)
The journey map allowed me to visually represent the users experience with Terrakan website.
Users major pain points:
• Confusion about what services Terrakan offers
• Confusion about Terrakan's membership system
• Uncertainty with Terrakan's real estate evaluation report
→ These pain points resulted in the users not signing up due to lack of
information
I prioritized our issues by impact and expense to help us narrow my focus for design.
Priorities:
• Redesign of service visuals
• Add professional descriptions of Terrakan services
• Add more information about Terrakan membership system
• Redesign of blog page and add subscription service feature
.png)
.png)
Brainstorming idea with product managers for the solutions.
Once we understood our users, then we began working on a solution.
I had several white boarding sessions and created a paper wireframes and low/medium- fidelity wireframes to review with the team to select the idea.
Reviewed the proposed wireframes that were generated in the brainstorming phase with a team and conducted usability testing to validate the ideas and resolved them further with more in depth planning.
I worked on possible solutions to the problem then test it with my users. Then, based on the feedback, I iterated design again and again.
.png)
Iteration Example 1: Landing Page
When I conducted user testing, one of tasks was ‘one by one describe what you think the icons, images, links, buttons mean on the home screen. Then, 5/5 people didn’t get the discount icon immediately. They noticed the icon after tapping on it. I thought the discount outlined icon was very clear and it was one of universal icons, but it was not. After the testing, I changed the icon shape a little bit and tested it again. Then, the test result was good.
At the time, I also needed to add more menus on the navigation bar.
Then, I proposed frequent use icons displayed on the navigation bar and I grouped the rest of the menus and placed inside of the ‘more_vertical’ icon and used the slide in bottom popup interaction.
.png)
Iteration Example 2: Our Services
Another user testing feedback was that people didn’t know where they could check the order list (cart). Even though I indicated the number of the added items in the icon on the top right when items added into the list. I expected that people would notice the number and tap on it if they want to see the order list. However, until people tap on it, they didn’t even know where the list screen was. When I conducted external and internal user testing, it was the common feedback. I added animation to grab users’ attention when the user entered the items/amount in the cart.
I conducted the test again, 10/10 people noticed what the number was and where the order list was.
.png)
Iteration Example 3: Pricing
When I designed the scanner interaction, I focused on the success state or failure state after scanning the item because those states will inform users if they are getting closer to achieve the goal or not. I also focused on the speed of scanning multiple items to eliminate checkout process time. I defined it to show the success or failure state screen after scanning. Then, it would dismiss 1-2sec automatically to speed up the scanning process. I didn’t put any CTA button there.
When the scanner function was tested, I noticed the scanner was very sensitive and sometimes it scanned the item twice or more until the camera moved. It was a serious problem. Somehow, I needed to prevent it from scanning the same item twice. I discussed it with an engineer and the product manager. Then, I came up with CTA button to move forward. Scanning and if it succeeded, show a button ‘scan next item’. Then, the app reset and it would be ready to scan another item. It would prevent the accident scanning.
I iterated the interaction and tested it. we decided to go for option C. Test result was 10/10. It was a good test.
.png)
When I conducted a user interview or testing, usually people expressed their experience by words. Those words sometimes were subjective.
The subjective feedback was not good enough to measure whether the UX was good or not. Once I had drafted design mockups, I created interactive prototyping and tested by SUS (System Usability Score). I asked the 10 system usability scale questions. People responded by scale point (1-5). Then, I calculated the overall SUS score by using the framework.
During calculation, I enjoyed the process. The experience transformed to numbers. This quantitative method was very useful to measure people's response.
Here are some sample test score :
1. Understand our services and sign up (10/10 responses) : 78.75 - Good to launch
2. Create a new project (8/10 responses) : 82.20 - Excellent to launch
We launched this real estate service portal website with MVP features first to satisfy the early customers to get feedback for future updates.
Our solution, Terrakan was not just a portal website to evaluate real estates' value.
We wanted make our users' developing projects' success through better project managing tool and communication tool by our powerful insights data such as real developing projects analysis.
UX KPI
Learned System Usability Scale to measure usability performance in the aspects of effectiveness.
Reducing clicks is not always the answer
Focusing on click reduction can lead to additional burden.
Micro interaction
Even though small interactive details of a product, their impact is big and they make the UX easier.
.png)
.svg)
.png)