Ubiter is an e-learning network that will connect people to share knowledge, creating courses, and studying online, allowing users to interact together as teachers, learners, or collaborators.
I worked as one out of 5 frontend and backend developers as UI Developer and Web Designer. My role was been building a mobile-first interactive UI for all the platform components (dozens).
I suggested using the Bootstrap library and prototype directly in code using HTML, CSS, and JavaScript as much as possible.
The challenge was been be fast enough and realize something close to the wireframes and the designs, both flexible and, if approved, ready for production.
Fortunately, I got a detailed list of all the requirements, a user story, and extensive project documentation.
I spent plenty of time finding a way to use modern CSS3 and make all the layouts work everywhere. Modal windows could be tricky on mobile and old Android phones too because they are often slow and lag-gish.
We used HTML5 Boilerplate as a web app boilerplate and a bunch of plugins and open-source javascript projects to get all the power needed.
UI/UX
We decided to stick to the Bootstrap library and concentrate on the user experience and user engagement. When a new feature request popped up in the project, we tried to skip the wireframe and code directly looking for the result in Firefox desktop, Safari Mobile, or sit with a tablet in front of us.
No "eye candy" design and focus on getting a complete overview, iterating the code until I got what we had in mind.
File processing and debugging
Gulp.js was used as a building tool to automate, precompile, generate and optimize the files. Browserstack and real devices to debug the application on a wide range of browsers.
JS Bin and also Codepen to write some code in the browser, and see the results of it as we build the UI.
Conclusion
I learned how to scale a UI project and stay in sync with a demanding team. Frontend design is a key part of the design process and, I think, we found a good compromise between pixel-perfect compelling UIs and real interactive prototypes ready for real content and to be engineered, and a/b tested.