top of page
Made and Modern Portal

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

A fantastic design document-2.jpg


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.


The traditional design ordering in the factory is inefficient, slow, and limited. However, the loyal clients are unwilling to switch from their familiar way.


User research report, Persona,  Wireframe, Hi-Fi Prototype, UI Kit


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. 


January- August 2022



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.

Frame 53 (3).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. 

Frame 58.png


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.

Slide 16_9 - 1-4.png


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.

Slide 16_9 - 4 (1).jpg


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.

Frame 54.png

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.

Frame 56.png
Frame 57 (3).png



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.

Frame 59-2.png
Frame 60.png

Dashboard (after)

Dashboard (First version)

Dashboard Final 2.jpg
A fantastic design document-2.jpg

Annotation page (after)

Annotation page (Frist version)

Dashboard Final (1).png
image annotate 3.png

Mobile user flow

Mobile userflow.JPG
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.

bottom of page