Made and Modern Portal
The portal is designed to facilitate effective communication and interaction between the company staff and clients.

Goal
The goal is to make a portal that is very intuitive and easy to use for the B2B clients. It should allow them to interact in a similar way as they would in the real world.
Problem
The traditional design ordering in the factory is inefficient, slow, and limited. However, the loyal clients are unwilling to switch from their familiar way.
Deliverable
User research report, Persona, Wireframe, Hi-Fi Prototype, UI Kit
Role
Being the only UX designer in a team of 6 engineers, a product manager and the business partner, I wore many hats. I helped the team as a UX researcher, UX writer, and graphic designer as well.
Duration
January- August 2022
RESEARCH PROCESS
Overview
To address the problem, I used the 5W research method to gather fundamental data, and then conducted interviews with stakeholders and designers to gain more specific insights. Additionally, I visited the factory multiple times, speaking with designers and clients on-site and observing the materials and production process. These visits gave me invaluable in-depth knowledge. After analyzing the data, I created a persona that reflected my target users, and developed a storyboard of her journey in ordering online to identify her goals and needs. By using a combination of research methods and firsthand experiences, I was able to gain a comprehensive understanding of the problem and develop a solution that met my users' needs.
.png)
5WH research method
During my research, which included interviews, meetings, and competitive analysis, I searched for precise and realistic answers to:
1. Who are the portal users?
2. What kind of need do we respond to?
3. Why do what we do?
4. Where does it happen?
5. When does it start?
​
Answering the questions led me to the final important question:
6. How might we help?
​
​

On-site research
Traveling to the factory gave me a chance to learn more about the process of making furniture and the relationship with the customers. The materials and tools helped me with designing a solution in harmony with the factory spirit.

Persona
I created a provisional persona to effectively communicate the insights I gained about our users during my research. This persona serves as a representation of our target users and their needs, goals, and behaviors, allowing us to design with empathy and user-centeredness.

Storyboard
To facilitate better communication with the team and factory staff, I created a visual representation of Nancy's journey to order her sofa. By sketching out the various steps in the process, we were able to gain a deeper understanding of the user experience and identify pain points or areas for improvement. This sketch proved to be a valuable tool in helping us find solutions and design a more user-friendly experience for our customers.
.jpg)
DESIGN A SOLUTION
Paper wireframe
Once I felt confident in the insights gathered during my research, I began creating wireframes on paper. I referred to the data and photos I had collected in my notes to generate multiple design ideas to discuss with the team. After considering the pros and cons of each idea, we ultimately moved forward with one that we felt best addressed the needs and goals of our users.

Samples of brainstorming on the paper (Desktop and mobile)
Digital wireframe
As we approached the final stages of the design process, I created digital wireframes to visualize the layout, features, and flow of the product. These wireframes proved to be a valuable tool for the team, allowing us to discuss and refine the overall design direction. We were able to iterate quickly and make necessary changes to ensure that the design met the needs of our users. Here are a few samples of the wireframes that helped guide our decision-making process.

.png)
REFINE THE DESIGN
Iteration
During the design process, I conducted numerous iterations and usability tests with users between the final design and the first hi-fi design. Additionally, I had design reviews with our business partners and received valuable feedback. Based on these meetings and my ongoing research, I made three significant changes to the dashboard design. These changes were informed by user feedback and aimed to improve the overall user experience. This iterative process and feedback led to the final hi-fi design.
Uploading images should be very convenient as it is the main task usually the users take.
I changed the layout to a three-column design. It helps the users to see all the information they need in front of their eyes.
During usability test with the M&M staff, I found how much it is important for the users to have a space to store all the documents. Therefore I made another section for Uploading PDFs.


Dashboard (after)
Dashboard (First version)


Annotation page (after)
Annotation page (Frist version)
.png)

Mobile user flow

What I Learned
Improveing my communication skill
During my experience working with the engineering team as the sole UX designer, I learned that effective communication is just as important as design itself. This experience forced me to improve my communication skills by clearly conveying my ideas to the team and presenting them directly to the CEO and founders. Through this experience, I learned that communication is key to success, and I made it a priority to hone my skills in this area.
Embracing the challenges
Working in a startup company presented me with many opportunities to experiment and make fast decisions on my own. Although I felt apprehensive at times about the impact of my decisions on the business, this challenge helped me grow and become more confident in my abilities. I learned that challenging yourself and taking risks is essential for personal and professional growth.