How to Make a SaaS Platform Good?
Product design · Monetization strategies
OVERVIEW
👩🏻💻 My Role
Research, management, product design, strategy design
Research, management, product design, strategy design
👥 Work With
Founder, developers, marketing experts
Founder, developers, marketing experts
🛠 Tools
Figma
Figma
RESULTS
Supported multiple stages of product development:
- 🚀 Initiated MVP Launch in 14 Week
- 🛠 Tailored User Experience Optimization
- 💎 Strategic Monetization Planning for Future Growth
Define the Scope
GOALS
ANATOMY
Promote business growth: Define functions
RESPONSIBILITIES
- Defining the core functions and content of our platform
- Collaborating with developers to expedite the launch of the MVP
To address these challenges, it was essential to acquire knowledge about global hiring industry and existing products to understand customers' needs, priorities and preferred features. In this process, I used 2 methods:
MVP
STRUCTURE
FINAL DESIGN
Deliver good user experience: Human-centered design
DIRECT USERS
USER RESEARCH
UX DESIGN GOALS
Based on this, I established 3 primary UX design goals for our direct users:
Based on this, I established 3 primary UX design goals for our direct users:
📈
MORE EFFECTIVELY
Users can swiftly pinpoint valuable content within vast info, thereby promoting problem-solving and decision-making.
Users can swiftly pinpoint valuable content within vast info, thereby promoting problem-solving and decision-making.
🫶 MORE FRIENDLY
Design should cater to diverse user preferences to optimize the experience for a broad audience, while also enhancing accessibility.
Design should cater to diverse user preferences to optimize the experience for a broad audience, while also enhancing accessibility.
🧚♀️ MORE PERSONALIZED
Given the diverse user group, offering personalized options is essential to help users create a more tailored workspace.
Given the diverse user group, offering personalized options is essential to help users create a more tailored workspace.
FINAL DESIGN
Quick tools to locate features and content
HRs have a hard time going through many pages to find what they need.
Solution
The new platform offers quick tools, featuring a search bar and a quick tool menu, designed to aid HRs in efficiently locating the features they need.
Solution
The new platform offers quick tools, featuring a search bar and a quick tool menu, designed to aid HRs in efficiently locating the features they need.
Tags to indicate the priority of different tasks
HRs handle vast amounts of info daily and need to identify high-priority items to manage them more effectively.
Solution
In the updated version, clear deadline tags have been added to the 'work' section, organized by priority.
HRs handle vast amounts of info daily and need to identify high-priority items to manage them more effectively.
Solution
In the updated version, clear deadline tags have been added to the 'work' section, organized by priority.
A holiday calendar for decision-making and planning
HRs need holiday info because they need to track future employee availability.
Solution
Display holiday and employee information on the first-level information page to help HRs quickly track employee availability.
HRs need holiday info because they need to track future employee availability.
Solution
Display holiday and employee information on the first-level information page to help HRs quickly track employee availability.
🫶 MORE FRIENDLY
Flexible screen width for improved readability
Due to differences in device screen sizes and personal reading habits, HRs have varying needs for the size of text area.
Solution
An expandable and collapsible sidebar is offered to allow users to adjust the width of their workspace.
Due to differences in device screen sizes and personal reading habits, HRs have varying needs for the size of text area.
Solution
An expandable and collapsible sidebar is offered to allow users to adjust the width of their workspace.
Breadcrumbs designed for clear path conveyance.
Complex systems and navigation can confuse HRs within the platform.
Solution
The redesign provides breadcrumbs that offer HRs clear and clickable navigation information to easily find their location.
Complex systems and navigation can confuse HRs within the platform.
Solution
The redesign provides breadcrumbs that offer HRs clear and clickable navigation information to easily find their location.
🧚♀️ MORE PERSONALIZED
Customizable layout for a personalized information structure
HRs vary in how they organize their workspace to achieve the most efficient working methods.
Solution
A feature that supports customizable layouts is provided to users, allowing them to adjust the information panels within the dashboard to better suit their usage habits.
HRs vary in how they organize their workspace to achieve the most efficient working methods.
Solution
A feature that supports customizable layouts is provided to users, allowing them to adjust the information panels within the dashboard to better suit their usage habits.
Implement monetization strategies: Product-led growth
JOURNEY MAP
Given the sensitive nature of some information, I will focus exclusively on presenting how I leverage these opportunities to develop a free trial for add-ons within the platform.
FREE TRIAL FOR ADD-ONS
Invitation: Attract users
This phase’s emphasis is attracting users and sparking their interests in new features. My design strategies include:
This phase’s emphasis is attracting users and sparking their interests in new features. My design strategies include:
- Prominent pop-up notifications
- Compelling visuals
- Eye-catching headlines and text
- Prominent CTA button emphasizing 'free' attribute
Guidance: Ensure users grasp the core features
When users respond to the invitation, they will be directed to a guidance page. This page is crafted to help users comprehend the core functionalities of add-ons, assist in their usage, and establish a basis for building their loyalty to the add-ons.
When users respond to the invitation, they will be directed to a guidance page. This page is crafted to help users comprehend the core functionalities of add-ons, assist in their usage, and establish a basis for building their loyalty to the add-ons.
Support: promote users to keep using
To ensure user retention, it's crucial to eliminate obstacles they may encounter. Hence, a permanent 'Help/Chat' button will be placed in the bottom right corner of the page. With just one click, users can easily seek assistance or contact us.
To ensure user retention, it's crucial to eliminate obstacles they may encounter. Hence, a permanent 'Help/Chat' button will be placed in the bottom right corner of the page. With just one click, users can easily seek assistance or contact us.
Expansion: Motivate users to explore related features
The relevancy of information can prompt users to delve into more related content. At opportune moments, we'll suggest new, relevant features/services to users, boosting the potential for future purchases.
The relevancy of information can prompt users to delve into more related content. At opportune moments, we'll suggest new, relevant features/services to users, boosting the potential for future purchases.
Reminder: Prompt users to get ready for purchase
Users require a nudge in making purchasing decisions. Therefore, I schedule timely reminders about impending trial expirations. Utilizing the 'fear of losing' encourages users to proceed with a purchase.
Users require a nudge in making purchasing decisions. Therefore, I schedule timely reminders about impending trial expirations. Utilizing the 'fear of losing' encourages users to proceed with a purchase.
PURCHASE & RENEWAL
The renewal phase follows a similar process, with a key focus on 'How can we persuade users to renew their subscriptions?' To support this, my design strategy emphasizes the existing value of the paid product to users and highlights potential discounts as incentives for renewal.
Details for these 2 sections will be released later. Stay tuned! 🙌
Design for DingTalk’s Business Success
UX Design · Launched for 600 million users
OVERVIEW
👩🏻💻 My Role
Conducted product analysis to gain insights and designed interfaces for business teams
Conducted product analysis to gain insights and designed interfaces for business teams
👥 Work With
4 different product teams and 2 senior UX designers
4 different product teams and 2 senior UX designers
🛠 Tools
Sketch, Adobe Illustrator, MasterGo
Sketch, Adobe Illustrator, MasterGo
RESULTS
Significant data growth achieved in 3 month!
In a newly launched page:
10.2%
increase in click-through rate (CTR)
increase in click-through rate (CTR)
Z00 M
reduction in cost
reduction in cost
🙌 Due to confidentiality principles, the data cannot be disclosed. If you wish to learn more, please contact me!
TEAM COMMENTS
Redesign A Digital Therapeutic Product
End-to-End product design · Healthcare
OVERVIEW
👩🏻💻 My Role
Designed an end-to-end app and successfully launched it
Designed an end-to-end app and successfully launched it
👥 Work With
3 Developers, 2 Medical Specialists, 2 Researchers and 2 PM
3 Developers, 2 Medical Specialists, 2 Researchers and 2 PM
🛠 Tools
Figma, Sketch and Adobe Illustrator
Figma, Sketch and Adobe Illustrator
RESULTS
Exciting Results!
In September, we launched the app:
10,000+
users in 2 months
users in 2 months
92%
positive rating
positive rating
Problem Analysis
The beginning of everything is her story:
During my Thoven internship, I met this PD patient who traveled weekly to another city for treatment, facing physical and financial challenges. Despite medical advice, she struggled to continue.
This is a common problem faced by many patients with panic disorder. To alleviate this issue, Thoven developed a digital therapeutic app. However, it still has many problems. So, our task is to optimize the existing product and thereby enhance the value of the current treatment method.
"...Yes, I won't be able to come next week. The journey takes 3 hours, but I have to work over the weekend... Every trip to see the doctor is exhausting. Honestly, I'm thinking of giving up on the treatment... I know this condition requires ongoing treatment, but..."
During my Thoven internship, I met this PD patient who traveled weekly to another city for treatment, facing physical and financial challenges. Despite medical advice, she struggled to continue.
This is a common problem faced by many patients with panic disorder. To alleviate this issue, Thoven developed a digital therapeutic app. However, it still has many problems. So, our task is to optimize the existing product and thereby enhance the value of the current treatment method.
GOALS
Enhance the existing app to accurately convey medical information and improve the efficacy of existing therapy
After discussions with medical experts, we set 3 specific goals:
- Based on the existing treatment process, establish a complete digital therapy workflow
- Optimize the product prototype, and establish a viable visual system
- Design product interaction logic to enhance user experience
What I have and what I should do
🗒
The app was divided into 4 parts based on the treatment offered by the healthcare provider, and I was primarily responsible for the first 2 parts: Cure and In vivo exposure. After knowing the assignment, the first thing I did was to sort out my tasks and the resource we have:
According to the approximate time each task will cost and the impact the task will have on future work, I prioritized these tasks:
1. Do usability testings
2. Review the page structure
3. Build user flow
4. Create a user-friendly process
With these in mind, I started to analyze the project's main challenges.
CHALLENGES
Design under limited conditions
As a product development team in a startup, the limited resources, huge workload and time constraints for product development brought us numerous challenges and conflicts:
Designing “without” user research
Limited budget and user willingness prevent us from researching typical users.
Simplify complex information for laypeople
The medical information in this app may be difficult for patients to understand.
Balance rigorous treatment with user-friendly flow
The product's development demanded adherence to medical protocols, potentially conflicting with user experience strategies. Thus, the design needed to balance medical and user experience needs.
As the designer, I needed to find balances between these conflicts and using various methods to overcome them.
Homepage: Review and Redesign
RESEARCH
Gathering valuable insights through user research and expert reviews
Define Users: Based on typical users
According to the desk research, the typical users of our product should have these characteristics:
Since typical users were unavailable for the reasons mentioned above, the preliminary study had to rely on atypical users. The “atypical users” here means the population meets every characteristic mentioned above except the health condition.
Based on these criteria, I recruited 4 users.
Based on these criteria, I recruited 4 users.
Atypical Users’ Information
User Testing
As a medical product, we had clear expectations about goals and behaviors of users:
![]()
Based on these, I designed relevant testing questions. Based on participators feedback, I generated following insights:
- What works:
![]()
![]()
Based on these, I designed relevant testing questions. Based on participators feedback, I generated following insights:
- What works:
- What doesn’t work:
User Testing Details
Questions:
Results:
Interviewees were asked to evaluate the homepage according to the questions above and scored according to their subjective feelings.
After the evaluation, I had some short interviews with them to get specific feedback.
Expert Review: Dual validation
After collecting users' feedback, I reviewed these ideas and the page with medical experts and our team members to get more insights. Ultimately, we decided what to redesign for the homepage.
REDESIGN
Task 1: Define a new visual language
After discussions with interviewees and managers, the primary concern was the page style. The initial version's main color did not match the product's positioning, and some components lacked readability. This could diminish user trust and raise accessibility barriers. Therefore, I iterated on the visual design of the homepage:
Visual Design Details
Define the style
To understand the style our target population like, I asked 4 interviewees to share their favorite products, then I created a board according to their answers:
Obviously, these products all have a professional and simple style. And these 2 characteristics come from their neutral colors and minimal stylings. Therefore, I extracted these 2 features and used them in the design.
Initial Version
![]()
Inappropriate style and contrast
![]()
Inappropriate style and contrast
2nd Version
![]()
Natural color & Improved accessibility
![]()
Natural color & Improved accessibility
Final Version
![]()
Ultimately, I chose light gray as the background color, #397F69 and #706B67 as the accent colors to give the page a professional and gentle style.
Soft, Professional & Minimal
Ultimately, I chose light gray as the background color, #397F69 and #706B67 as the accent colors to give the page a professional and gentle style.
To facilitate future iterations, I created style guides:
REDESIGN
Task 2: Optimize the structure of the page
Functional Structure
Users first notice the structure (the distribution of functionalities) when scanning the page. A reasonable page structure can help users gain effective information quickly and guide users to dive deep into the product. In this PD treatment product, the homepage has 3 core functionalities: task reminder, progress reminder, and relaxation
Before
Duplication and absence of functional areas
After
Unified function areas to ensure users have quick access to key information1. Consolidate functionalities
Integrate progress information in the form of cards to ensure users can easily find relevant content.
2. Add the Relaxation section
Provide a Relaxation function in the form of cards. Users can select the exercise by sliding cards shown in that area.
Information Architecture
The information architecture of this medical product should help users receive important information quickly and facilitate the core tasks of their treatment. In addition, it must have a concise information architecture and reduce complex and irrelevant content.
Before
Unclear information hierarchy and irrelevant information
1. Overwhelming
Having a bunch of secondary information on top of the primary information (Today's task) distracts the user from the main content.
2. Irrelevant information
Details in Part 2 won't help users finish core tasks and shouldn't take up too much space on the page.
After
Concise information presentation and a focused navigation
1. Consolidate information
Highlight the task information on the page and hide the secondary content (but users can still access it if they dig deeper).
2. Motivation information
Show completion information -namely, achievement- to users to encourage them to stick to the treatment.
In Vivo Exposure: Flow and Experience
USER FLOW
How to enhance the accessibility of the core flow?
The Iteration of the core flow
In vivo exposure is a critical procedure for PD treatment. It has a complex process involving multiple steps and several mandatory medical requirements:
![]()
However, the core flow is crucial to a user's treatment; thus, it must be designed for easy access.
![]()
I analyzed the core flow of the initial version and identified 2 major issues:
Therefore, I made the 1st iteration. In this version, I provided a direct path to the core process and removed the concept of "tasks". This simplifies the structure and reduces the learning curve for users:
![]()
However, there was a problem with the existing information architecture:
![]()
Thus, we optimized the information architecture and created the final version:
![]()
In this version, some pages were consolidated to ensure that the core flow could be reached with minimum interactions. Besides, users were provided with multiple paths which could facilitate them to do core tasks.
However, the core flow is crucial to a user's treatment; thus, it must be designed for easy access.
Initial Version
I analyzed the core flow of the initial version and identified 2 major issues:- The core flow was buried deep within, which made it hard for uers to reach the core information and features
- The 3 concepts: Task, Plan, and Scenario, added complexity, potentially steepening the user's learning curve
Therefore, I made the 1st iteration. In this version, I provided a direct path to the core process and removed the concept of "tasks". This simplifies the structure and reduces the learning curve for users:
1st Iteration
However, there was a problem with the existing information architecture:
Thus, we optimized the information architecture and created the final version:
Final Version
In this version, some pages were consolidated to ensure that the core flow could be reached with minimum interactions. Besides, users were provided with multiple paths which could facilitate them to do core tasks.
USER EXPERIENCE
Designed a user-friendly multistep-task process
Due to medical requirements, users face multiple extra steps during core tasks, leading them through a multitasking process:
![]()
These extra steps inevitably distract users from the original task and may keep users from adhering to treatment. To address this challenge, the design strategies I propose are:
These extra steps inevitably distract users from the original task and may keep users from adhering to treatment. To address this challenge, the design strategies I propose are:
- Minimize distractions, allowing users to focus on the primary task.
- Assist users in making decisions more conveniently.
- Ensure users have control and autonomy.
- Provide users with easily accessible assistance
Minimize distractions: Modal views
To keep users from becoming overwhelmed by the additional tasks, I used modal views to display the information clearly. Besides, they also provided other values:
![]()
- Divider
Divide complex tasks into smaller tasks to encourage users to complete them.
![]()
- Reminder
Modal views can give users a strong reminder to make sure they strictly follow the medical advice.
Modal views can give users a strong reminder to make sure they strictly follow the medical advice.
These reminders popped up before critical treatment steps to remind users to follow instructions
- Divider
Divide complex tasks into smaller tasks to encourage users to complete them.
These pop-ups divide a large task with many steps into small, simple tasks.
Usually, there is only one task in one modal window
Usually, there is only one task in one modal window
Making decisions: Guidance elements
Nielsen’s 10 usability heuristics: #6 Recognition Rather than Recall
When users establish exercise plans, they need to input goals, timeframes, and procedural steps. This can be somewhat tedious. Hence, within the boundaries of medical guidelines, we provided indicators, references and pre-filled contents to ease the burden on users.
- Indicators
- References
- Pre-filling Contents
User Control and Freedom: Exit buttons
In this complex workflow, users may make some mistakes or slips, and they need an "exit" to leave the unwanted action without going through an extended process.
The Exit button in the upper right corner ensures users can exit the window
Through interviews with specialists and managers, I understood that for some pop-up windows, single or multiple occurrences would not influence the efficacy of the treatment. Thus I designed another "exit“ for these windows: Users can click on the checkbox to stop the pop-up.
![]()
This design can help users reduce steps for the next usage
Easily accessible assistance: Help and documentation
Due to treatment requirements, medical words on the page are indispensable. To help users better understand the meaning of these words, I added a "help" section to the page.
In this section, users can browse the resources in it or search for the answer
For future iteration: Feedback pages
Since the lack of typical users' opinions in the development stage, I designed a page to collect real users' feedback. This page and buried points will work together to help the team iterate this product using more accurate data.
![]()
Design specifications
In addition to design work, I edited a brief design specification for UI designers and developers through Figma. In the document, I highlighted all the functional sections, listed all their components and elements, explained how these elements work under different situations, designed flows to determine elements' statuses, etc.
Reflection
This is my second project in the real world. Unlike projects I did in university before, I needed to solve real problems under many constraints and limited resources. Besides, I needed to deal with recurring difficulties and unexpected things. In this process, I learned how to use different methods to solve issues and make trade-offs between different needs. I also learned a lot from my team members and the product manager:
Develop big picture thinking
At first…
In the early stage of the project, one of my biggest problems was I always spent a lot of time tangling in some details, which made me exhausted and delayed my progress.
Then…
I learned from my product manager that before doing the project, it is important to classify all the tasks according to their priorities and build the product according to the "framework - content - interaction - details" logic.
And…
These methods helped me a lot. In later projects, I used these methods and controlled the design process well.
The key is communication, not a beautiful diagram
At first…
As a design student, I was used to utilizing beautiful but complex diagrams to express design ideas. Sometimes I cared more about the visual design instead of the communication design. This made developers sometimes couldn't understand my concepts.
Then…
I learned to abandon meaningless decorations and design concise diagrams to communicate with people.
And…
I have stuck to this idea in teamwork since then, and it has helped me improve communication efficiency with my team members.
Because the master's program started in Sep 2022, I just participated in the first half of the project. But my product manager and team members all expressed positive feedback on my work:
BACK TO TOP
Development of A Financial Literacy Platform
Full cycle of UX research · Teamwork
OVERVIEW
👩🏻💻 My Role
Managed the research process, data analysis, and spearheading the design
Managed the research process, data analysis, and spearheading the design
👥 Work With
People from Psychology, Business & Engineering backgrounds
People from Psychology, Business & Engineering backgrounds
🛠 Tools
Figma, Sketch and Miro
Figma, Sketch and Miro
Introduction
CLIENT’S GOALS
Developing an idea to help students make better financial decisions
To better understand our client’s goal, the first thing I did was to deconstruct the client requirement:
Q1: What students should we focus on?
Q2: How to help them make decisions better?
CHALLENGES
Provide international students with the financial literacy they need
International students make up about 10% of the student body of UMD. Due to the changing living environment and social culture, these students are often faced with unfamiliar financial concepts and complex financial issues. These issues add additional stressors to international students and stop them from making informed financial decisions.
Our task was to help international students find ways to deal with these stressors and design a method to provide financial literacy for them.
Our task was to help international students find ways to deal with these stressors and design a method to provide financial literacy for them.
Outcomes
PRODUCT CONCEPT
FindaMentals
FindaMentals is a financial literacy toolkit. It facilitates international students resolve their financial inquiries through:
1. Integration of various financial resources
The website's homepage integrates financial literacy resources from different official sources. Users can browse the homepage to view the information they need or use the search function to find it quickly.
The website's homepage integrates financial literacy resources from different official sources. Users can browse the homepage to view the information they need or use the search function to find it quickly.
2. Real experience and authoritative answers
Users can view related questions and answers in the community section. They can also ask questions. Besides, answers from authenticated users will be displayed first so that users can get more trusted answers easily.
Users can view related questions and answers in the community section. They can also ask questions. Besides, answers from authenticated users will be displayed first so that users can get more trusted answers easily.
Research
PREPARATION
Design a user research
Problem Statement
The target audience of this project is international students in the U.S. Through some desk research, we found that this population faces many challenges because of the transition between different societies and environments. Based on this knowledge, we generated a problem statement:
What financial-related needs do international students care about when transitioning between countries, schools, and jobs?
Constraints & Requirements
Before starting the research, I listed all the limitations and their possible impacts on the study:
Limited time
We only have 4 weeks for the research and design process, so we have to focus on the high-priority aspects of the design.
Due to a limited budget, we may not provide much compensation to interviewees. So we have to choose the most suitable candidates.
Financial information is sensitive, so we need to use a research method that will not violate user privacy.
We only have 4 weeks for the research and design process, so we have to focus on the high-priority aspects of the design.
Limited bugets
Privacy issues
Financial information is sensitive, so we need to use a research method that will not violate user privacy.
Methods: Interviews
Based on the limitations, We used semi-structured interviews to elicit in-depth responses from participants. This format allows users to protect their privacy while revealing enough information for the research. Besides, it offered researchers the flexibility to ask follow-up questions as needed and enough guidance to ensure everything could be on track.
Interviewees
We decided on convenience sampling to find participants based on the limitations mentioned above. This is because we already have a good rapport with these people, so they will be more willing to share financial info with us.
When reaching out to potential interviewees, we aimed to find interviewees:
![]()
We hope to use these differences to find a more representative sample of respondents and thereby increase the credibility of the study.
When reaching out to potential interviewees, we aimed to find interviewees:
We hope to use these differences to find a more representative sample of respondents and thereby increase the credibility of the study.
Research
The process of our research was:
![]()
Questions
Interview Questions:
ANALYZE
Consolidate Data & Gain Insights
Affinity Diagram
After the interviews, our team held interpretation sessions to structure and consolidate the data we collected and presented it in the form of an affinity diagram:
This diagram helped us find answers to the question proposed before:
What financial-related needs do international students care about when transitioning between countries, schools, and jobs?
-
Need financial and emotional support from others
- Need low stress to feel confident
- Need trusted tools to organize finances
- Need to gradually learn practical financial skills
- Need to learn about finances in the US as transition
- Need to feel secure and stable
- Need to know financial and job situation well
After finishing the diagram, We created a sensation board and personas to consolidate our research results and provide references for the future design.
Sensation Board
Since the research results included many things about emotions and affective experiences, we used a sensation board to consolidate them.
![]()
Drawing on interviews, we identified 6 core affective goals for users of this finance toolkit. These core goals would be guidance for future design.
Drawing on interviews, we identified 6 core affective goals for users of this finance toolkit. These core goals would be guidance for future design.
Qualitative Personas
From interviews and conversations, we found that our population can be divided into 3 categories: Novice, Intermediate, and Advanced, and they have various goals and needs:
![]()
![]()
![]()
Slide to view other personas
Slide to view other personas
Takeaways
Combined the conclusions from the affinity diagram and consolidation from the sensation board and personas, we generated these points:
International students are in different stages of grasping financial literacy. Thus their goals differ from each other:
International students need trusted support to organize their finances. This support is not only about providing resources but also about helping emotionally
International students hope that they can learn knowledge gradually with low stress.
Based on these points and opportunities, I proposed the HMW:
How might we use technology to help international students with various financial literacy and goals have easy access to trusted resources and provide them with support?
Multiple stages, multiple goals
International students are in different stages of grasping financial literacy. Thus their goals differ from each other:
- Novice: Try to deal with every day financial issues and be independent
- Intermediate: Focus more on financial problems in the workplace
- Advanced: Grasp the dynamics of the financial market and investment information
Need trusted support
International students need trusted support to organize their finances. This support is not only about providing resources but also about helping emotionally
Need a low-stress way to learn
International students hope that they can learn knowledge gradually with low stress.
Based on these points and opportunities, I proposed the HMW:
How might we use technology to help international students with various financial literacy and goals have easy access to trusted resources and provide them with support?
Ideation
REVISION
Client’s Feedback & Available Resources
Before starting the design work, we reported the results and takeaways to our client and got the feedback:
![]()
Based on this feedback, we collected related information:
![]()
This board showed that there are many resources in the university, but they are distributed. And when we asked some international students, many claimed they just heard of some resources. Therefore, our team decided to build a knowledge integration platform for international students.
Based on this feedback, we collected related information:
Financial resources and support that the university can provide
This board showed that there are many resources in the university, but they are distributed. And when we asked some international students, many claimed they just heard of some resources. Therefore, our team decided to build a knowledge integration platform for international students.
IDEATION
Hot Ideas & Iterations
Design Principles
Derived from our research findings, I developed the following design principles to guide further design:
![]()
Hot Ideas List
Our team generated possible design ideas through brainstorm and decided on one of them for the further development:
The platform will be a combination of a resources integration section and a question board:
Section 1: Resources Integration
A section that integrates all trusted resources and presents them in a simple way.
A section that integrates all trusted resources and presents them in a simple way.
Section 2: Question Board
A board where users can ask questions about their experiences and receive useful answers.
A board where users can ask questions about their experiences and receive useful answers.
Product Visions
Based on our ideas and questions, we produced several product visions. Then we evaluated all visions and sifted the viable features:
Sharing and evaluation of product visions
Considering the time constraints, I prioritized all the viable features to ensure all main problems could be addressed in the final solution:
FRAMEWORK
Flows & Information Architecture
User Flow
Combined with user research, I assumed that users would use our product for 2 reasons:
![]()
It is clear that the search function should have a high priority on Homepage, and entrance to Question Board should be conspicuous. Besides, it is better to create categories (like Recommendations) on Homepage.
It is clear that the search function should have a high priority on Homepage, and entrance to Question Board should be conspicuous. Besides, it is better to create categories (like Recommendations) on Homepage.
Users may want to view some relevant resources after finishing the course, thus the related information should be presented with the course.
Information Architecture
With the user flow, I built the information architecture to explain where these functionalities would be developed:
![]()
Design
VISUAL
Visual Design & High-fidelity Iterations
Visual Language
I designed a visual system for the product. Visual design aims to present an attractive platform for university students and make sure that the product can express the feelings we mentioned on the sensation board.
![]()
![]()
Slide to see more
Due to time constraints, I did not design the whole vision system. Instead, I used an open Ui kit from the Figma community (considering that this version of the interface will not be used for commercial purposes).
Prototyping Iterations
After deciding on the visual language, our team worked together to create low-fi interfaces and the first version of our high-fidelity prototype:
Low-fidelity mockups
![]()
![]()
![]()
The 1st version of the high-fidelity prototypes
![]()
![]()
![]()
Then, we displayed this version to our client and classmates through the wall walk, and we received feedback and suggestions from them:
Low-fidelity mockups
The 1st version of the high-fidelity prototypes
Then, we displayed this version to our client and classmates through the wall walk, and we received feedback and suggestions from them:
Based on these issues, I iterated our information architecture and prototypes:
Iteration 01: Connections & Specific needs
Users can choose the "Institutional signin" option on the sign-in page and use their university account. The website will then prioritize the resources related to the university for users.
![]()
If you were a UMD student, the site would present more resources provided by UMD
Iteration 02: Differentiation
Since FindaMentals is an integration platform that includes videos, articles, and other media formats, we must distinguish it from YouTube. The initial version failed for 2 reasons:
Based on these considerations, I optimized the design:
![]()
- The layout of the cards on the homepage was very dense, like YouTube. And this layout design also violated the simple design principle.
- Although the site has many kinds of resources, they had the same appearance.
Based on these considerations, I optimized the design:
Simplifized the layout and designed different styles for various media
SOLUTION
Final Version
Feature 1 | Diversion
Based on the design principle of Personalized, we designed a divided sign-in process. The platform categorizes users according to 3 filters: Institutions (optional), Knowledge Level, and Topics of Interest, and then presents the most appropriate page to users based on the results.
Feature 2 | Trusted Sources
To increase the credibility of the platform's resources, I have marked the source at the bottom of the thumbnails. Sources are currently divided into 3 main categories:
![]()
Feature 3 | Guidances
We wanted to set a long-term goal for our product that it would be a search tool and a learning tool. So on the page, we designed some guided learning tools, hoping that this will help users to improve their financial knowledge.
Feature 4 | Real experience & Trusted answers
The community allows users to share their real experiences, and these real-life experiences will provide users with strong emotional support. Besides, to improve the quality, answers posted by certified users will be prioritized.
![]()
Reflection
This is the first user research project I did in HCIM@UMD. In the project, I learned from my previous experience in the internship project and managed the project schedule by prioritizing the project content to complete this task effectively. In the end, our group received the highest marks. The project was also used as an example to share with the class.
Reasonable collaboration and communication
When doing the user research, we worked in pairs. And the results of a pair's study are reviewed by other members in the group meetings. This collaborative approach ensures a more efficient workflow while improving the comprehensiveness of insights.
Product iteration based on feedback
We conducted 2 rounds of wall walks and 2 project progress presentations during the project. These events helped us gain valuable feedback from the client and helped us improve the product concept.
I am happy to be able to design with people from different backgrounds. We learn from each other and grow together. I was in charge of user research, concept iterations, and visual design in the project. And my work was appreciated by group members in the final peer review:
BACK TO TOP