Project Info
Uglobal is one of the largest platforms dedicated to education and networking for international investment and immigration.
Due to the growth of their business and their need to reach new markets, they asked us to update their brand. Requirement was: clean and sophisticated, but modern and colorful.
In addition to the above, client asked to keep all its functions and current pages. Also, make the new version very easy to understand for its existing users. And of course, for people who had never visited the site before.
Finally, we had to create the front-end code of the pages. We took into account that Uglobal has a backend system made in Django.
The Process
Initially, we created a basic wireframe structure.
Then, we created a style guide to use as a starting point for all other pages.
Such style guide helped us to make all pages consistent despite the differences that many of them had in the original site.
At the same time, we generated the information architecture (IA). This IA would allow old pages and elements to coexist with the new pages on Uglobal.
Needless to say, we took special precautions regarding accessibility in order to achieve WCAG2.0 guidelines as a minimum.
Finally, we designed the initial page so that the client could provide feedback. Once approved, we refined some elements of the original style guide. This new UI iteration helped us define all other pages.
Once the user interface for all pages was approved, we created a basic model in Bootstrap to accelerate front-end creation times.
Uglobal Final Deployment
We deployed the site and tested in our own servers. Then, we ported it to the client’s server.
After the site launching, we continued working on new aggregates and changes.
In this second stage we change our design stack to a model based almost entirely on InVision. So, we use InVision Studio, and InVision collaboration and messaging (on top of their existing Trello system).
Requirements
To redefine Uglobal's established brand while keeping all features and making it all works with existing back-end system
Strategies/Techniques
Heurystic Analysis
Wireframing
Style Guides
Interactive Mockups
UI Implementation
Front-End Development
Tools
Ideation stage: Balsamiq, Illustrator, communications on Trello and Slack
Prototyping stage: Photoshop, Sketch
Implementation stage: Development in HTML5, CSS3 and JS
Testing Stage: Testing in multiple devices, use of accessibility analysis tools (Wave and Siteimprove), speed analysis (Google Lighthouse and GTMetrix) and SEO
Final Results:
Uglobal new brand became an immediate success with an incredible user engagement so they asked us to work on another site for the same company. Also, we still develop and fine tune Uglobal even further!