• Anime.js
• D3.js
Meituan‘s User-Experience Front-end Team has developed a Web framework dedicated to improve the Web App interaction experience within its native iOS and Android application. I was assigned to re-design and code an internal website that would effectively present this Web Framework's advantages to other web developers in Meituan. Ultimately, this new website would encourage more developers to integrate our framework in their Web Apps.
Note: this is a company's internal website, and I can publish my work here using a news app as demonstration content, since this is not related to Meituan.
- App demo screens in iPhone containers that users can interact with by mouse/touch interactions
- Pre-loader screen and animation to make this website more engaging for first-time visitors
- iPhone demo widgets' sizes can adapt different browser windows
- Enhanced visualizations to help developers to easily understand this web framework's underlying operations
Target audience: Meituan's Front-end Web Developers who have basic/intermediate web programming experiences.
- Users can click on preset button to advance to next page
- Drag from iPhone's left edge to return previous page, simulating native navigation on iPhone
- Screen will bounce back when users only drags a little
- Featuring JavaScript resize observer allowing iPhone demonstrations to continue on browser window's change
- The programming style of Vue.js and React.js are similar yet different; I perceived that Vue.js is more approachable to front-end MVVM developers, while React.js is user-friendly to those familiar with programming languages.
- D3.js is a widely-used and feature-rich data visualization framework on web platforms, but it's more time-consuming to get started.
- Within a company, there should be some teams who code Web interfaces directly facing the consumer, which requires members to have experience in User-Centered Design.
While concluding this Front-end Web Development internship at Meituan, I realized that my design and programming on this framework's website can still be improved.
- Optimize its site's color scheme and the visual organization on site content.
- Improve signifiers on iPhone demonstrations within this website, so first-time visitors can quickly interact on these iPhone demonstrations and learn the advantage of our web framework.
Disclaimer: this website is not affiliated with the Meituan company.