UX/UI Designer

Cross-Cultural Communication in design

• Research Question:
• How different cultural factors influence user’s preferences for UX attributes between China and Sweden?

• Project Description:
  • How to design websites and online services to fulfill the needs of people from different cultural backgrounds is one of the success factors in nowadays’ global economy. Companies that want to do international business on the Web and App should consider the impact of culture on the understanding of Web and App-based communication.
  • Users from different countries have different attitudes to design. International brand like McDonald's has a different web design for different locations. European webs were completely different comparing to Asian ones, in terms of text and translation, kind of images used, typography selected, color palettes designed, layouts chosen, etc.
• Responsibilities:
  • Literature study
  • User study and usability test
  • Collect and analysis data
  • From low-fi to high-fi prototyping
  • Iteration
• Tools: Adobe XD, Photoshop

Back

Englishtown Website Redesign

Englishtown is an online English studying website. It created English courses to teach people the specialized language for real-life situations.

• My role: UX/UI Design
• Production time: 3 month
• Project Description:
  • Update user interface style
  • Improve the usability and accessibility
• Responsibilities:
  • Collect and analysis user statistics
  • Communicate and negotiate with colleagues in different departments
  • Draw user flow and wireframes
  • Design main screens
  • Make guidelines for the design
  • Lead designers and make sure all the pages follow the guidelines
• Something I learned:
  • How to balance between requirements and creative
  • How to communicate with colleagues in different departments and convert information into wireframes
  • How to uniform design style
• Tools: Photoshop, Illustrator, Sketch

Back

Building a Design System for Automotive System – A Case Study for an NDA Project

• My role: UX/UI Design
• Platform: Figma, storybook
• Deliverables: Component library, documentation


• Background:
  • Building a design system from the ground up for a global automation company. The goal is to knit together a consistent look and feel for three industry web applications, which work for warehouses, hospitals, factories, etc. Before this project, no design system or UI library was existing in the company. A core team, including three UX/UI designers and three developers, worked on this project.


• Roles:
  • UX designers- build processes, introduced tools, laid the foundations
  • Developers- Translated the visual image that designers created into code and synced in the platform for everyone to visit
• Pain Points:
  
  
  • Inconsistencies- both for development and design. Each team used a development language based on their preference, which made it difficult to align the design language also.
  • Duplication- common components
  • Conflicting- guidelines and direction
  • Siloed teams- worked without communication
• Goal:
  • Improve branding- end users identify the products through consistent UI & UX
  • Align- all the teams work with the same guideline and structure
  • Speed up- development teams focus on creating products instead of spending time on creating components
  • Accessible- focus on the system around the Web Content Accessibility Standards (WCAG 2.1)
• Challenge:
  • Inexperience- None of the team members have had experience building a design system
  • Ignorance- most of the employees don’t know what a design system is and the benefit of having one
  • Stubborn- developers work in the system for 10+ years and stay in their comfort bubble for quite some time, building a design system means they will have to use a new development language, or framework and follow the new guideline.
• Design Process:
  
  
  • Research - Had meetings with stakeholders
    • Pm – shared the plan and benefits
    • Developers – involving engineering in the conversation in the early stage to collect their input
    • Design system users – programmers and designers in development teams
  • - Tools including Figma, Adobe XD, and Sketch, Figma is good for team collaboration and cloud sharing.
  • - Collect current UI assets. Classify and stored them in a Figma file.
  • - Created an inbox page so everyone can write what they want from the new component library.
  • - Research other design systems for common practices and inspirations.
    • · Material design
    • · Carbon
    • · Material design
  
  
  • Foundations
  • - Color
  • - Typography
  • - Grid
  • - Design Language
  
  
  • Accessibility
  • - Fonts
  • - Color contras. Strived to comply with WCAG AA accessibility standards via the stark Figma plugin.
  
  
  • Component library
  • Atomic approach
  
  
  
  
  • Review
  • - Team review once a week
  • - Department review once a week
  • - 1v1 product review when there’s a big update/produce owner requires
  
  
  • Documentation
  • Figma - for component UI, documentation, design guidelines
  • Storybook - interactive pattern library for code, guidelines, best practices, accessibility guidelines
  
  
  
  
  • Tracking Process
  • Jira board
  • - Align with both designers and developers.
  • - Create tickets and tag the person who is involved.
  • - Create corresponding status (in design, in development, reviewing, etc.)
  
  
  • Naming conventions
  • Aligned naming convention between design and code, making sure everyone is on the same page.
  
  
  • Outcomes
  • - Think about what your company needs. Is it a design system? Or a component library, or a UI kit? Do the stakeholders know the differences between these names?
  • - Collaboration is key. involeve all stakeholders in the developmenet throughout the process is a priority.
  • - Listen to your developers, they are the ones going to convert the design to code and make sure everything works well.
  • - Naming conventions are ignored by most people, a good naming convention eliminates the barrier between designers and developers, making sure everyone is speaking the same language.
Back

Redesign Moonboard app

Back

Quiz Template

• My role: UX/UI Design/Animation designer
• Production time: 1 week
• Project Description: A quiz template for students under 16-year old to learn simple English sentences and vocabularies
• Responsibilities:
  • Design Cartoon character
  • Design user flow and functions
  • Design user interface
• Something I learned:
  • How to design an easy use and understandable process
  • Create a funny cartoon character for children to encourage them to gain knowledge
  • Improve the animation effect in cell phone with programmers
• Tools: Photoshop, Illustrator, Flash

Back

Landing Page

• My role: Product manager/UX/UI Designer
• Production time: 1 week
• Project Description: A one page landing page for Sochi Olympic, which related sports event with English learning.
• Responsibilities:
  • Write product document
  • Communicate with copywriter and confirm slogan
  • Design Cartoon character
  • Design user flow and functions
  • Design user interface
  • Co-operate with programmers
• Something I learned:
  • Discuss with colleagues and develop ideas into design
  • Create a cartoon character for different sports
• Tools: Photoshop, Illustrator

Back

Icons & Hand Drawing

Back

Applying UX Design to a Robotics Platform

• My role: UX/UI designer
• Platform: Adobe XD/Figma
• Deliverables: Web based platform


• To watch the demo, please click here
  
• Background:
  • In September 2019, Kollmorgen set out to develop the first autonomous mobile robot (AMR) in Sweden. AMRs are a type of robot that are capable of moving and navigating on their own, without the need for human control. They can plan their path and avoid obstacles in dynamic environments through the use of sensors or other technologies. Examples of autonomous mobile robots include self-driving cars, delivery robots, and vacuum cleaning robots. My task was to design a platform for a delivery AMR, which would be used in small warehouses, offices, hospitals, and industrial factories.
• Challenges:
  • In the traditional robotic industrial field, operating robots is a complex technical job. An operator needs to be trained for three months to half a year to learn basic robot operating instructions.
• Goals:
  • Establish a web platform to control AMR, which can be easily operated by workers without training.
• Design process:
  
  • - Research and Discovery
  • Interview employees, salespeople, and managers who have participated in the design of other robots, collect their ideas for the design of the ideal AMR, and understand the difficulties and problems they have encountered. Collect competitors' AMR products and analyze their advantages and disadvantages. In the interviews, most people mentioned that existing robots are very complex to operate, and that employees need to be trained for more than half a year to master basic skills, and the turnover rate of employees is also high. Once an employee leaves, it takes another half a year to train a new person, resulting in a very high labor cost for the company to use robots. Most people hope to design a new type of robot with a user-friendly interface, and that employees do not need to be trained or only need very simple training to get started, to avoid a lot of training time.
  
  
  • - Define
  • Overwhelmed with insights, we needed to start prioritizing to form a strategy. To do this, we first sought to understand the key pain points, wants, and needs of our stakeholders. We then classified all of the insights that we had gathered during our research phase. With this information, we were able to present our synthesis of findings to stakeholders in a clear and organized manner, highlighting the most important and pressing issues. This helped us to create a strategic plan that was tailored to the specific needs and concerns of our stakeholders.
  
  
  • To form our product strategy and experience, we jumped into secondary research. To organize the information we gathered, we created affinity maps with KJ method to identify patterns and connections. We then prioritized customer painpoints, wants and needs based on the insights we gathered from our research. With this information, we were able to present the key insights and findings to stakeholders, providing a clear understanding of the customer needs and painpoints that our product strategy and experience should address.
  
  
  • In summary, our key takeaways from the research and define process were:
  • - A user-friendly interface is needed to make it easy for users to navigate and use the product.
  • - Users need less system setting time to be able to use the product quickly and efficiently.
  • - The product should be focused on achieving tasks and solving problems for the user, rather than just providing features.
  • - By taking these takeaways into account, we were able to develop a strategy that addresses the specific needs and painpoints of our users, resulting in a more effective and user-friendly product.
  
  
  • - Design
  • As we progressed through the design process, we received questions from stakeholders and other departments. Some of the questions included:
  • • Should we design for mobile first?
  • • Did we need a design system right now?
  • • What was our visual design language?
  
  
  • Once we answered the burning questions from stakeholders and other departments, we commenced design right away. As a priority, we built a design system that would ensure consistency and scalability across different products and platforms. We focused on the web-based platform, and designed two separate systems, one for operators and one for technicians. This ensured that the user interface was tailored to the specific needs of each group, making it easy for them to navigate and use the product. By considering the user experience across different platforms and devices, we were able to create a product that is user-friendly, efficient, and effective.
  
  
  • As we progressed with building a design system, we learned some interesting insights. One of the key takeaways was the importance of involving stakeholders in the early phase of the process. This helped to ensure that we were meeting the specific needs and painpoints of our users. Additionally, we also learned the importance of constant communication between designers and developers. It was important to talk with developers all the times to ensure that we were designing a product that could be easily implemented in the development phase. This helped to make sure that designers and developers were speaking the same language, which significantly streamlined the development process. By keeping these insights in mind, we were able to create a design system that is user-friendly, efficient, and effective.
  
  
  • Overall, our design process had several highlights. One of the main challenges we faced was dealing with the regulations related to COVID-19. To overcome this, I came up with the following solutions:
  • 1. Have testers operate the AMR alone in a closed space, where there are two cameras, one facing the AMR and one facing the tester. The testers can give tasks to the tester to complete via the camera. At the same time, observe the tester's subtle expressions through the camera facing the tester and find problems on the interface.
  
  
  • 2. Wizard of Oz, where the testers perform tasks through online meetings, while the test personnel cooperate with the tester's mouse to manipulate the AMR in the background, making the tester think they are controlling the robot, thus achieving the purpose of the test.
  
  
  • Additionally, we found that internal tests could be beneficial for quickly advancing the progress of the project.
  
  
  • We also discovered that Figma is more beneficial for communication with team members than Adobe XD. Figma enabled us to work remotely with team members, share feedback, and make revisions in real-time which made the design process more efficient and streamlined.
  
  
  • Overall, these highlights helped us to create a user-friendly, efficient, and effective product that meets the needs of our users.
• Outcomes:
  
  
  • After successfully completing the design and development process, we launched the product in October 2021. We were thrilled to have our first client sign on in the same month, indicating that our product was meeting the needs of our target market. The successful launch of the product was the result of months of hard work and dedication from the entire team. My research-driven approach, user-centered design, and constant communication with stakeholders and team members all contributed to the success of the launch. We are excited to continue to improve and expand the product to meet the needs of more clients.
• To watch the demo, please click here

Back

Icons

Back

• Providing guidelines for designing the user interface for companies
• Executing UX & UI designn
• User search, usability testings, design system and AI
• Collaborated with product owners, designers, developers, and other stakeholders
• Awards and Achievements:
  • Illustrator, - Grandfather’s Ghosts: A Chinese Tale (children's book). MoonRattles, LLC
• Work Experiences:
• Senior UX designer - CX designer at CEVT (Consultant)      Nexer Maverick (Gothenburg, Sweden) 2022 - Present
• Infotainment system and mobile app UX/UI design for Lynk&Co 01 EU and upcoming car mode
• Deliver sepcification to suppliers and improve product quality
• Establish a Design system including styleguide, color palettes, font and components
• User research, user journey & usability test


• UX designer      Kollmorgen AB (Gothenburg, Sweden) 2018 - 2022
• In charge of the UX design of Autonomous Mobile Robot (AMR) in strategic innovation team.
• Lead the design vision and set the UX direction.
• Research and identify problems through user research and stakeholder communication.
• Design and validate workflows and new features through iteration.
• Create a company design system with other designers.
• Collaborate with multiple roles to drive alignment.


• Senior UI designer      EF Education First Ltd (Shanghai, China). 2013 - 2017
• Responsive web and UI design
• Brochure, magazine, flyers and poster design
• Developing and maintaining partnerships with project managers, programmers and other colleagues


• UI designer      Infosys (China) Limited (Shanghai). 2011 - 2013
• Accomplishing Pre-project studies; communicating with project leader and clients; drawing wireframes
• Designing Web and applications UI for Dow Jones, Coca-Cola, Volkswagen, eBay and Lenovo among others



• Skills: Photoshop, Illustrator, , HTML, CSS, JavaScript, InDesign, After Effects, hand drawing

Back