UI Designer - Project Leader
Overview: LAN/WAN is a nationally recognized IT company that helps you develop your career. Their website was very old. From the homepage to the internal site, the website needed to be completely redesigned.
Responsibilities: I participated in the UX Research aspect, but mostly focused on the UI. Additionally, I managed the project plan as a leader.
Tools: Figma, XD
A complete redesign and a new structure were needed for the website, but first, we had to redesign the most important part; the homepage.
The website will be divided in 6 sections. Each sections has their specificity and their own interaction vision. The landing page is one of the most important section. Since it will keep the user scrolling.
First section: Landing Page
Second section: Great Companies
Third section: Amazing Career
Fourth section: Critical Technologies
Fifth section: Successful Stories
Sixth section: Call to Action
Meet your target user
Collecting data
Who are we designing for?
In order to start designing the homepage I wanted to know the goals and solutions of the company. I researched the company, talked to team members, and attended their weekly meetings to hear their stories. Immediately after the meeting, what came to my mind was: connecting and changing the lives of individuals.
Members spend a lot of time understanding the website during the first steps of their application. We realized that it is frustrating for people to navigate the site, locate tools, and ask frequent questions from the lack of architecture and priority. It can be time-consuming and stressful.
How might we improve the user experience so they can find the necessary tools efficiently, improve their experience, and speed up their application process?
Due to the timeframe, I started designing low-fidelity wireframes very early and came up with the first iterations. I started to try different method of connecting dot animations for the landing section on XD but it didn’t create what I had in mind.
I then switched to hi-fidelity wireframes and created the UI Style Guide. I added an accent color (green), kept the red (from previous website)ﾠand added a soft gray background color. Used Ubuntu font for big header and Avenir for small headers and body.
I used simple but modern font.
I create the first Hi-fi Version within two weeks, it was a need in order to launch a modern website as soon as possible.
I was also working on the landing connecting dot video animation for the landing section of the homepage:
Landing Section Connecting Dot Animation Iteration 1
I was collaborating closely with the developers in order to launch the website as soon as possible. We discussed together what was realistic and how we can improve our design communication.
In order to share my design to the developers I used Adobe XD Development tools that share all the design and the UI Style guide necessary for the developpers. This was very helpful for the developers and much easier for our communcation.
Now that our first Iteration was launched, I had more time reflecting on the first Hi-fi iteration and created a UX/UI Plan to improve the first version.
Please note that I removed some of the confidential information from the analysis, so any precise figures or information are replaced by ***
UX/UI PlanBased on our UX Research and users feedbacks, I updated our UI Style guide and created a new hi-fi version of the entire homepage.
Based on our UX Research and users feedbacks, I updated our UI Style guide and created a new hi-fi version of the entire homepage.
Based on research and testing I created the "last" design version of the homepage and started working on other pages.
I also worked closely with a video editor in order to created a better version of my connecting dot video animation.
This is what Brian (our video editor) came up with:
Before and After
I made sure that all screen was created in order to have a mobile and tablet friendly website.
I could finally begin redesigning other pages of the website based on the feedback we received and our initial UI Style Guide.
I have also redesigned other pages within the internal website, but for reasons of confidentiality, I cannot share all the wireframes with you.
This was a very intense project, and I was able to redesign Lan Wan's homepage in three months. Through this experience, I developed not only my UX/UI skills, but also my communication, management and writing skills.
https://www.lanwanprofessional.com/
