Case Study.

LANWAN
Scroll
img

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

img

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

Meet your target user

img

Anfinity Diagram

Collecting data

imgimg

User Persona

Who are we designing for?

img

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.

img

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.

img

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.

img

Typography

I used simple but modern font.

img
img

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.

img

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.

Please note that I removed some of the confidential information from the analysis, so any precise figures or information are replaced by ***

UX/UI Plan

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.

img

Hi-fi Wireframes: Homepage Iteration 2

img
img
img

Homepage: Iteration 3

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:

Homepage

Before and After

img

Responsiveness

I made sure that all screen was created in order to have a mobile and tablet friendly website.

img

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.

img

Takeaway

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/

img

Let's connect!

ines.hamadi109@gmail.com
|
(510) 610-2557