ROLE:
UI / UX Design
Animations
User Research
TOOLS:
MEMBERS OF THE TEAM:
Adobe XD
Illustrator
Photoshop
After Effects
Sketch
My work
With Hydro One, my main duty was to remodel the current employee dashboard with a strong emphasis on enhancing the user experience. The main objective was to make it possible to navigate the full dashboard without having to scroll or click repeatedly.
Wireframes
In order to understand the usability of the old design and
generate hierarchy out of all the elements that were placed on the old portal
Resolution approach
The portal was built on Sharepoint 2001 and at that time majority of desktop devices didn't have 1000 px or + resolution. The approach that our team decided to use was to make the user experience more immersive and make the layout for bigger devices.
User research
The user research was made with google analytics, with the help of my team we recollected all the data of the portal, and with help of developers and Senior executives I decided to analyze the whole structure of the website and reposition the CTA and banners.
On this wireframe, I discovered that the links that were used by the Hydro One employees were located on the bottom right corner of the website.
The bottoms were grouped on the left top corner and the overall layout improved to make the user navigate the portal with an easier user experience
UI as a keyfactor
The user interface on Hydro One was a key factor on this project because the company has a really good library of icons and different HD pictures that I could use during the whole process of the development.
Final Mockups for Developers
Understanding the UX
Understanding the UX
On the image, you can visualize how my team decided to implement the user experience and navigation of the portal.
Mockups for internal pages
These mockups are for internal pages of the Hydro one portal, the initial concern was to find a way to organize multiple links on a page and the solution was to include multiple categories and icons.
Promotional and news pages for Hydroone.com
All these mocks were created after multiple feedbacks for users to understand in an easier way the news about projects' underdevelopment with Hydro one.
My work was to analyze and develop a mockup that works as a template for this and future projects.
