Year / Timeline | 2022 - 2023, 3 weeks
Project | My GoodReal - My Smart Assistant
My Role | UX / UI Design, Motion Graphic
Platform | Figma: Desktop, Tablet, Mobile
Team Member | Dionne Mok (UX/UI Designer), Project Manager, Developers
ABOUT
What is My GoodReal?
My GoodReal is a SaaS platform. The platform uses data from the MLS® listing site and makes it easy for real estate agents to build their own website.
It is a web solution for website marketing, showing house listings, and managing messages to help REALTORS® and real estate agents earn more income and save time.
My Role
UX / UI Designer
My GoodReal is a startup that places a high priority on enhancing the user experience of its products. As part of a team that includes UX/UI designers, a Product Manager and engineers , I was tasked with addressing a user pain point related to the sign-in/login feature of their all-in-one real estate product.
Challenge
How can we develop a solution that tackles the issue of users providing inaccurate or misspelled email addresses during the registration process while ensuring a concise and user-friendly UX writing?
Step 1 : Define the Problem
My GoodReal consistently improves its user experience by collecting customer feedback. One pain point is customers providing incorrect email addresses during registration.
Our objective is to minimize this issue of the user registration process with a short and user-friendly UX solution.
Step 2: User Flow - Charting the Issue
To solve the problem, I will create a user flow to better understand it. This structured process will guide users and organize information to minimize confusion and errors, leading to clear focus points.
The user flow for sign-up and login, where the 'Fill out the wrong email address" decision mode is absent, leading to a UX issue. This can be problematic when a user accidentally submits an incorrectly spelled email address. (Refer to image 2 for areas that require improvement.)
Problems: Verification Page
1. Visuals mislead, one more step needed for account activation.
2. There is no indication of which email address the user has filled out.
3. Action item missing. What if the user entered a typo in their email address?
4. Typically, the verification email may get directed to the junk or spam folder. Provide a suggestion to users to check these folders to ensure they receive the email.
Problems: Existing Account Pop-up
1. To enhance the brevity of the text, eliminate unnecessary introductions in the confirmation boxes and prioritize important information.
2. The font size of the user name is too small, while "Are You?" is emphasized with a larger font to highlight the confirm action.
3. The confirmation box could be improve by present the complete context of the question.
Step 3: Production - Wireframe
Once the problem was identified, I collaborated closely with the UX/UI team and Product Manager to create clear and easily understandable messaging to assist users through the registration process. We conducted A/B testing of the wireframe throughout the implementation process to ensure the effectiveness of our solution and UX writing.
Design Style Guide
We use the style guide to establish consistency in visual language, streamline the design process, and ensure accessibility. Guidelines for typography, color, imagery, and other design elements reduce errors and save time by providing a common set of rules for all design decisions.
(Ths style guide was created by UX/UI designer Janice Chen, and Bill Zheng)
Key Findings 1 - UX Writing
The indication for users to double-check their email address is to confirm its accuracy. I simplified the language on the verification page for easy comprehension and instant recognition of a correct email.
Solution: Verification page
Iterations - UX writing: Occam's Razor principle
After muiltples round of iterations, here are the improvements made to the verification page:
Iteration 1- Display user's email and sign-up again option, but the location and wording of the sign-up again link could be improved.
Iteration 2 - The design includes all necessary information, but the text is too lengthy and difficult to read.
Iteration 3 - The wording was simplified to improve readbility and easy reaction to actionable items. However, the visual hierarchy could still be improved.
Solution: Found Existing Account - Pop-up
Improve UX writing: Occam's Razor principle
Since this pop-up message appears when the database recognizes an existing account, the current message negatively impacts user readability. Therefore, improvements were made to the UX writing, visual hierarchy, font size, spacing, and button placement on this:
1. Shorten the text in confirmation boxes by eliminating unnecessary introductions.
2. Place greater emphasis on confirming the user name, which is the primary question posed to the user.
3. Use the same verb in the headline and buttons to aid user connection. Complete context in buttons prompts user pause for consideration.
Key Findings # 2 - Pixiel Perfect
To ensure efficient communication with engineers, it is crucial to design a pixel-perfect draft. This leads to accurate translation of designs into code, minimizing errors and saving time during the development process, resulting in a better end product.
Marketing Collateral: Animated Logo & Magazine Ads
My GoodReal aims to expand its reach in the industry and improve its brand image.
The logo, featuring a house symbol and a robot arm, was designed to convey the idea of a building with advanced technology.
Reflection
Insights
The proposed solution was implemented, and the UX writing was updated to ensure that it was short and easy to understand for users. As a result, we observed a significant decrease in the number of users providing incorrect or misspelled email addresses during the registration process, leading to a smoother account activation process and improved user satisfaction.
Achieving Simplicity and Pixel-Perfect Design
Simplicity and pixel-perfect design can greatly enhance the effectiveness of communication through design. With a focus on simplicity, we can ensure that our designs are easily understood by our target audience. Additionally, pixel-perfect design allows us to create designs that are not only visually appealing but also accurately convey their intended message. By combining simplicity and pixel-perfect design, we can create designs that are both aesthetically pleasing and effective in their communication, ultimately leading to a more successful outcome for our design projects
Trying to become a better
designer everyday !
© 2022 Dionne Mok - Designed with love and effort