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

User Interview

joined the project at a time when the design team was already working on low-fi wireframes. My role on the team was to update and help move the project forward.

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.

Homepage: Iteration 3

Based 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.

Thank you for reading

If you enjoy my work, my process thinking and want to know more about my story I will be happy to share