LAN/WAN Professional
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
The Start: Redesigning the Homepage
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
Second section: Great Companies
Third section: Amazing Career
Fourth section: Critical
Technologies Fifth section: Successful
Stories Sixth section: Call to Action
User Interview
Meet your target user
Anfinity Diagram
Collecting
User Persona
Who are we designing for?
Re-Branding
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.
Problem Statement
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?
Site Map
Low-fi Wireframes
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.
UI Style Guide: Iteration One
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.
Typography
I used simple but modern font.
Hi-fi Wireframe: Iteration 1
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
First Launch: Hi-fi Wireframe Iteration 1.2
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.
Developers/Designers Team Collaboration
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.
Project Plan
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.
lease note that I removed some of the confidential information from the analysis, so any precise figures or information are replaced by ***
UI Style Guide: Iteration Two
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.
UI Style Guide: Iteration Two
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.
Homepage: Iteration 3
ased on research and testing I created the “last” design version of the homepage and started working on other pages.
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
Homepage
Before and After
Responsiveness
I made sure that all screen was created in order to have a mobile and tablet friendly website.
About Page
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.
Takeaway
his 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.
If you enjoy my work, my process thinking and want to know more about my story I will be happy to share
