Marketing Cloud App
Mobile System
About the project
Marketing Cloud, developed by Ideamake Technology, is a comprehensive real estate sales and management platform.
Prior to my involvement, the company had an established desktop backend system. My primary responsibility was leading the design and development of the Marketing Cloud mobile app for sales, taking it from concept to launch. A key challenge was ensuring seamless integration between the app and the existing desktop backend system, providing a unified experience across platforms.
TIMELINE
4 Months+
Regular iteration
MY ROLE
Research, UX Design,
UI Design, Motion Design
TOOLS
Figma, Sketch, Photoshop, Adobe After Effects
KEY SKILLS
User Research, Wireframing, Prototyping, Design Library, Testing
Understand the problem
I conducted a comprehensive survey targeting users of our Marketing Cloud backend system, gathering valuable insights and recurring complaints. By analyzing this feedback, we identified key pain points and prioritized improvements based on repeated client concerns.
What our customers were complaining
Problem Statement
The COVID-19 pandemic has forced a rapid shift from offline to online work across industries, including real estate, traditionally reliant on in-person transactions. This transition has caused a significant drop in transaction rates, leading to a major economic impact.
Problem of Real Estate Companies
-
Sales cannot be effectively reported, hindering the tracking of workflows and progress.
-
Increased sales turnover and loss of customers due to inefficiencies.
Problem of Sales Professionals
-
Unfamiliarity with online sales and communication tools.
-
Lack of professional sales tools and guidance.
-
Limited access to up-to-date real estate and customer resources.
Defining the project
After several meetings and discussions with stakeholders, the business and product teams (which I am a part of) identified the need for a solution to address the challenges faced by real estate sales teams and companies. We decided to develop a mobile app aimed at improving sales efficiency and enhancing backend management for real estate companies.
Our primary Goals
Our goal is to design a real estate sales app from the ground up to address the challenges of online sales for real estate professionals, ultimately improving sales efficiency and ensuring the stability of transaction rates.
Constraints and Limitations
One major constraint was that most user feedback from the management backend came primarily from real estate company's managers, leaving us with limited insight into the needs of everyday real estate sales. Additionally, due to the economic impact of the pandemic, there was pressure to rapidly develop the first version of the app to ensure the stability of sales operations.
Lack of user research
Tight time budget
The team
I led the design of this app, working with a team of 4 designers alongside project managers, product managers, and developers.
Emphasize through research
User interviews
Since it is difficult to obtain real sales information through online research, We decided to kick off the project with on-site interviews to understand their expectations regarding workflow and technical assistance.
Primary research questions：​
-
What challenges do you face with the current work style?
-
What technical support do you want?
-
What are the difficulties in communicating with customers?
-
How do you stay in touch with your customers?
Research results
Online sales challenges
Participants lack experience in online sales and need guidance in communicating with customers.
Customer management
Sales is more interested in intelligently managing and analyzing customers.
Sales data
Sales are highly focused on their data, as it impacts performance.
Technical support
Sales seek more technical support to boost efficiency.
Defining our approach
Workshop
From the direction gotten from the user research, I worked with the team and other designers on a workshop with other stakeholders to define the strategy and direction of the project. Including technical limitations and possible touch points.
The requirements for UI/UX design are: key features, framework (How to connect app and backend system workflow).
Real Estate Personas
To help the team better understand users, I quickly developed a range of real estate sales personas representing the diverse needs of real estate professionals. By mapping out their goals and challenges, I ensured the final design addressed their requirements, creating a product that truly resonates with users.
User Journey Map
After understanding user characteristics, I created a user journey map based on research to analyze the workflow and identify key touchpoints. This helped the team collaboratively determine the app's essential features, ensuring they aligned with user needs and pain points.
Marketing Cloud System Framework
With multiple meetings, the team collaboratively defined the app's main features, ensuring technical feasibility. I also focused on ensuring seamless integration between the mobile app and the desktop backend system for data synchronization. To address the pain point of real estate managers struggling to access sales and customer data, I optimized the desktop management system, incorporating processes for smooth connectivity with the mobile app.
Getting started with the design
Generating Ideas
I wrote down some key features to discuss with team, starting with paper wireframes to quickly gather feedback from designers and stakeholders. Due to time constraints, I focused on efficiently conceptualizing key pages and processes to meet project deadlines.
High fidelity design
After aligning on the design direction, I quickly created a high-fidelity design for the homepage, focusing on key elements like navigation, page layout, and design style. This allowed more time for refining the design and enabled other team members to contribute to the later stages of the process.
Going through multiple quick team meetings to finalize the homepage design style and framework, another designer and I collaborated to create high-fidelity prototypes for key pages, including customer management and data analysis, based on earlier paper wireframe discussions. We worked closely with the development team, iterating and optimizing the design to ensure functionality. The other two designers focused on iconography and additional design elements, while we managed our time efficiently to finalize the design quickly as a team.
Main Pages
After finalizing the key page designs, I assigned tasks to each designer to ensure efficient completion of the high-fidelity designs. We collaboratively finished all pages to meet deadlines. I held regular meetings with development and product managers to share progress and ensure alignment on the overall design direction.
Design Library
During the collaborative design process, I encountered inconsistencies across the high-fidelity pages due to each designer’s unique style. To unify the design, I created high-fidelity prototypes and developed a Design Library. I defined the design and interaction guidelines for frequently used components, refining them over time to ensure consistency and coordination among all designers. This design library ultimately facilitated smooth collaboration with developers and ensured alignment throughout the project.
Backend system touchpoints
Although my primary focus was on the mobile app, I also contributed to the high-fidelity design of the backend system's sales management interface to ensure effective integration. Collaborating closely with backend designers, we ensured a seamless connection between the mobile app and backend processes, addressing the pain point of real estate managers being unable to track sales data.
Usability testing and iterations
Usability testing
After completing the high-fidelity prototype, I led the usability testing, observing target users through both offline and online methods. I collected feedback from sales professionals and real estate company management, analyzed the responses, and identified key areas for optimization. I then focused on refining the design based on these insights.
Some recommendations：​
-
Home page sales tools can be sorted
-
Add a schedule to the homepage to urge customers to formulate work plans
-
Consider visualizing customer data to make it easier for sales to analyze
-
The homepage lacks emotion, consider optimizing some emotional design
Improvements
Based on usability test feedback, I prioritized optimizing the homepage, where the majority of user suggestions were focused. For other pages, each designer took responsibility for optimizing their respective sections based on the feedback.
Homepage：​
-
I add emotional design on banner to delight users
-
Add small prompts under user data to improve sales awareness
-
I categorize sales tools to make it easier for users to find.
Data Analysis：​
Add data visualization design based on feedback to make it easier to view on mobile terminals
Emotional design
Some users found the product too professional and serious, which made it feel boring to use. To enhance the user experience, I introduced micro-interactions and Lottie animations to key pain points. As the only designer on the team with Adobe After Effects skills, I used these animations to add visual appeal and address users' feelings of frustration during use.
Loading：​
Users reported long wait times between pages, so I designed an engaging loading experience to reduce anxiety, as improving speed wasn't feasible due to development constraints.
Ranking list：​
​To motivate sales, I designed engaging animations for the performance rankings, enhancing users' perception of their standings and encouraging greater effort.​
Results and Impact
The product helped over 100,000 real estate salespeople work efficiently online, reduced turnover by 70%, and supported 1,000+ companies, maintaining a 93% customer retention rate during the epidemic.
