Introduction

Explosives-Wing-Chun is a local martial arts school in Munich, Germany. They just had redesigned their websie but they didn’t have a responsive design which can work and look well on a mobile device.

My position: UI mobile designer, Q1 2020 (3 months)
What I worked on:

• Keys App redesign, new feature design, mobile prototypes
• Company website redesign – mobile design and front-end development (WordPress, HTML5, CSS3)
• User journey map and personas
• IOT platform mobile design
• Front-end mobile styleguide

Challenge and solution

Problem: Most of the users open the website on a mobile device but some elements were not looking well and also were not functioning properly due to overlaps, etc. The website was also not optimized.

My goal: To create a responsive UI desing in Adobe XD and implement it with HTML5, CSS3 in the CMS WordPress.

My approach: I first identified all elements that I need to design and created a UI design of the responsive version of the website. Then, I started developing the screens implementing multiple CSS3 rules. I tested all pages of the website in terms of design and functionality on multiple mobile devices with different resolutions. When the design was approved by the school owners and the Website developer, I uploaded my work.

The result: A responsive UI of the website of the school which looks and works well on all mobile devices.

Conclusion

I finished my project successfully in March, 2020 and I realized that mobile UI/UX design is a sphere which I’d like to learn more about and practice at least in the next 2-3 years of my professional development.