## **[Website](https://www.mlaglobal.com/en) Design Major Lindsey and Africa**

> Major, Lindsey & Africa (MLA) is a powerhouse in legal recruitment, guiding talented lawyers and legal professionals towards fulfilling careers. Since 1982, they've built a global network, connecting top legal minds with law firms and corporations worldwide.

### **The Problem ⚠️**

Despite being a global leader in legal recruiting, MLA website design has fallen behind the competition. **Navigating** the website and **accessing** information was **frustrating** even for law professionals actively using MLA's services. This outdated user experience (UX) presents a significant challenge to maintaining MLA's position as a global leader but also an **opportunity to improve user engagement and reaffirm its leadership.**

### **The Process ⚙️**

* **Conducted** a **content audit** to establish a new information architecture looking to make navigation easier through a structured **sitemap**

* **Reviewed** websites of leading legal recruitment competitors, analyzing their user experience, design, and information architecture.

* **Created** mid-fidelity wireframes, followed by creating high-fidelity mockups for usability testing.

* **Defined** the main **UI elements** and **created** interface **components** for a sleek and user-friendly interface.

* **Iterated** on the **design** based on usability testing results and user feedback. A second version was released, which is available ***[online here.](https://www.mlaglobal.com/en)***

### **The Solution 💡**

We ran design sprints using the design thinking methodology to craft a **new website** from scratch, **exceeding the expectations of both business and users.** Based on user feedback, we created a **second version with new features and enhancements** to the overall experience. The result is a fully functional website that showcases **MLA's expertise and leadership in law through a user-friendly approach.**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2F37758b29-6d0a-4497-872c-cc929c55c915.mp4?alt=media&token=89f827bf-94d4-4366-8b47-6b47aa54d8db","id":"37758b29-6d0a-4497-872c-cc929c55c915","width":1438,"height":838,"filename":"Hero Scroll.mp4","type":"video/mp4","caption":"Hero Prototype Sample ","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2Ff704a66b-c20b-4f87-80e9-56c254003a77.png?alt=media&token=83207feb-4254-4f07-92d4-0f767f50b977","id":"f704a66b-c20b-4f87-80e9-56c254003a77","width":1440,"height":2258,"filename":"Home.png","type":"image/png","caption":"Home","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2F6d4cdcf8-fe8c-42ff-933b-2dd8ec105c40.png?alt=media&token=7d755671-a5f8-43d7-b788-b769807b9f76","id":"6d4cdcf8-fe8c-42ff-933b-2dd8ec105c40","width":1440,"height":3203,"filename":"About us-diversity & inclusion.png","type":"image/png","caption":"About us / Diversity ","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2F65020a0a-6ab2-4320-a799-34cafbd386a3.png?alt=media&token=3391c807-3346-4cd3-8f8d-8e04755651fd","id":"65020a0a-6ab2-4320-a799-34cafbd386a3","width":1440,"height":2582,"filename":"Frame 27.png","type":"image/png","caption":"Case Study","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2Face4f978-2592-48a2-a3d7-c7be8b6ae066.png?alt=media&token=64809d1f-2b60-4092-90d7-aa44a560c822","id":"ace4f978-2592-48a2-a3d7-c7be8b6ae066","width":1440,"height":2982,"filename":"About us.png","type":"image/png","caption":"Talent","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2Fb07899c7-0fea-4ac0-93fe-afbc722ba1e4.png?alt=media&token=ab7f30a1-08dd-4791-a56c-03635c63345f","id":"b07899c7-0fea-4ac0-93fe-afbc722ba1e4","width":1440,"height":2756,"filename":"Frame 16.png","type":"image/png","caption":"Compliance Opportunities","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2Fd00280db-6d52-4106-bf73-c99a869684cd.png?alt=media&token=02655c2c-f2a0-4527-b5a2-94f496e0d9da","id":"d00280db-6d52-4106-bf73-c99a869684cd","width":1440,"height":2600,"filename":"About Us- Press Releases.png","type":"image/png","caption":"Press Releases","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2F861c0203-3115-4441-8846-21014fadb5ac.png?alt=media&token=47f2421a-825d-4590-a390-6b356152794c","id":"861c0203-3115-4441-8846-21014fadb5ac","width":1440,"height":3852,"filename":"Services Template + Section 2 Lists.png","type":"image/png","caption":"Recruiting","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2Fe466dfd6-9467-458d-91c4-f6aadfc1d139.png?alt=media&token=2f47c85e-1b8e-41ee-acc8-ff526fdcd545","id":"e466dfd6-9467-458d-91c4-f6aadfc1d139","width":1440,"height":3346,"filename":"Locations.png","type":"image/png","caption":"Locations","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2F2ab0899c-db6e-4c25-9d48-345da8368b68.png?alt=media&token=22899d0d-8ae7-4e4d-b3ca-caa52d97c614","id":"2ab0899c-db6e-4c25-9d48-345da8368b68","width":1440,"height":3708,"filename":"Services.png","type":"image/png","caption":"Recruiting / Advisory","border":false}]}
```

Some second version screenshots:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2Fcfefce9c-0e61-4175-ad1a-b2d943fea271.png?alt=media&token=670d2fca-6fd3-413d-8705-8f0940fea646","id":"cfefce9c-0e61-4175-ad1a-b2d943fea271","width":1440,"height":2496,"filename":"Desktop - Services – 1.png","type":"image/png","caption":"Home","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2F5cebf56c-ab76-4a17-9455-52671fcb0c66.png?alt=media&token=ef4681e7-55de-4656-aa63-ee789e533a46","id":"5cebf56c-ab76-4a17-9455-52671fcb0c66","width":1440,"height":2812,"filename":"Desktop - Contact Us.png","type":"image/png","caption":"Contact","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2F6eff1bbc-d37a-434c-8f30-daf14c7731c4.png?alt=media&token=ce5914c3-f89d-4b35-a4b4-b394c8ddf5ca","id":"6eff1bbc-d37a-434c-8f30-daf14c7731c4","width":1440,"height":3147,"filename":"Desktop - Insights – 6.png","type":"image/png","caption":"Insights (Categories, Filters, Articles)","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2Fc2ae5f45-fe70-4757-a3d1-d07cde881efb.png?alt=media&token=a749bd23-012e-496c-b908-2bd77a2c44f4","id":"c2ae5f45-fe70-4757-a3d1-d07cde881efb","width":1440,"height":2533,"filename":"Desktop - People – 1.png","type":"image/png","caption":"Leadership Team","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fwebiste-design-major-lindsey-and-africa%2Ff63f2c61-8de1-4190-86a3-cec9b5a2c870.png?alt=media&token=015aa07d-b856-492b-af0d-612d4746fdbc","id":"f63f2c61-8de1-4190-86a3-cec9b5a2c870","width":1440,"height":3337,"filename":"Desktop - Services – 2.png","type":"image/png","caption":"Services","border":false}]}
```

### **My Role ✨**

I was focused on the User Interface design while supporting my colleague with the Information Architecture. I designed the UI foundations and carefully created design components that could be easily updated and used while designing the website. Moreover me and my Colleague Juan Rivera presented the design to business stakeholders, product owners, and UX delivery managers, working closely with the product owner on the user research. Finally, we ensured a smooth handoff for the development team partnering with the tech lead.

### For a deeply look of the designs visit this ***[link for version 1](https://www.figma.com/design/0odFx5iu1Lwjqjhk3u27fS/Wireframes-MLA-Website?m=dev&node-id=3-1318&t=vKd1c2wpZ9GycKNC-1), a***nd this ***[link for version 2](https://xd.adobe.com/view/9ff30bd9-5a59-4c78-b46e-e281fa26e9e8-caa0/)***.

*(I know it's strange switching from Figma to Adobe xD, in anyways it was because of a corporate requirement, not a personal preference at all)*

> **Skills & Tools:**\
> *Figma, Adobe xD, User Interface, Responsive Web Design, Design Systems, Information Architecture, Research, ADA, WCAG, Design Thinking, Agile.*

Website Design Major Lindsey & Africa

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fallegis-group%2F341da71c-7793-4c1b-b329-c9aca8814dc2.png?alt=media&token=a1c9799a-09a2-454b-9597-47334a87474b","id":"341da71c-7793-4c1b-b329-c9aca8814dc2","width":3000,"height":2250,"filename":"Frame 2608550.png","type":"image/png","caption":"","border":false}]}
```

## **Client Portal Dark Mode**

> **Client Portal** is a web application developed by the **Allegis Group** for its companies **TEKsystems** and **Actalent**, streamlines the recruitment process for both consultants and recruiters. It facilitates various activities associated with hiring professional consultants from diverse fields to **serve clients** across different industries on a **global scale**.

### **The Problem ⚠️**

Despite 80% of users using dark mode and nearly 90% of popular software offering it, our application didn't offer this important feature. 70% of our daily users, primarily recruiters, some of whom experience eye strain due to the bright interface, have consistently requested a dark mode option. However, a prior attempt fell short of accessibility standards and wasn't easy to integrate with our branding.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2FrcvmXG22kFfY1HOvHeUi%2Fd684c0e3-ac4c-4ac2-a512-4e7855766837.png?alt=media&token=37cd3d39-657d-4fba-8bd1-b1c1ba7c83c2","id":"d684c0e3-ac4c-4ac2-a512-4e7855766837","width":1728,"height":1217,"filename":"The Problem.png","type":"image/png","caption":"Light Mode - Early Dark Mode attempt","border":false}]}
```

**The challenge** lies in designing a user-friendly and accessible dark mode that seamlessly integrates with the three distinct client brands utilizing the application. This solution should prioritize accessibility compliance, brand consistency, and user comfort.

### **The Process ⚙️**

* **Researched** the topic of Dark Mode, exploring different successful **Design Systems** and their approaches to **dark mode design solutions**.

* **Defined** the **key objectives** for this design solution: meet **accessibility standards**, seamlessly **integrate with the 3 different brands**' themes, and ensure **easy usability**.

* **Generated** early **prototypes** applying the research results, testing, and iterating to arrive at a visually **appealing UI solution**.

* **Designed** the foundation of this dark mode and **implemented** it consistently across **all app components and features**, while also documenting it.

* **Integrated** it into the **UI Library** and **Documentation** from our **Design System.**

### **The Solution 💡**

Recognizing this challenge, my team and me introduced Dark Mode, a user-centric feature that fulfills the accessibility, usability needs, this visually appealing design enhances the app's UI and seamlessly adapts to the different brands and their themes.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fallegis-group%2Fbc5ca414-d15a-42e9-890c-0c97603e5700.mp4?alt=media&token=5e8f83c1-7818-4c17-8730-b5bbdb241354","id":"bc5ca414-d15a-42e9-890c-0c97603e5700","width":1536,"height":894,"filename":"Scroll.mp4","type":"video/mp4","caption":"Mid Fidelity Prototype","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fallegis-group%2F7898932c-525e-404b-b130-9a299403c1af.png?alt=media&token=cb854f2a-8b94-417e-867f-ec81a5bb61e9","id":"7898932c-525e-404b-b130-9a299403c1af","width":1540,"height":1859,"filename":"v1.2-2.png","type":"image/png","caption":"Main Dashboard / Actalent","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fallegis-group%2F5d385853-b003-43be-8575-66f3e0bd6085.png?alt=media&token=02a8a7e3-e933-4e19-ae6b-c249026abda7","id":"5d385853-b003-43be-8575-66f3e0bd6085","width":1540,"height":1859,"filename":"v1.2.png","type":"image/png","caption":"Main Dashboard / TEKsystems","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fallegis-group%2F99af78fa-3616-41a2-9731-0dbf8476a638.png?alt=media&token=ff60811c-43a3-4225-b5e5-3b80dcee68a8","id":"99af78fa-3616-41a2-9731-0dbf8476a638","width":1540,"height":1274,"filename":"Default-1.png","type":"image/png","caption":"Profile / Actalent","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fallegis-group%2Fa6d2476c-fed9-4e3b-85d5-82154708de2f.png?alt=media&token=d2ab25d7-266c-4a86-92e6-b40ce6225132","id":"a6d2476c-fed9-4e3b-85d5-82154708de2f","width":1540,"height":1097,"filename":"Default.png","type":"image/png","caption":"Profile Edit / TEKsystems","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fallegis-group%2F85c5216e-3bc7-4036-af5c-8314ac8c1cad.png?alt=media&token=8200f5e8-0ec2-441f-8256-9529b5826ad3","id":"85c5216e-3bc7-4036-af5c-8314ac8c1cad","width":1540,"height":900,"filename":"Talent Detail Actalent.png","type":"image/png","caption":"Talent Detail / Actalent","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fallegis-group%2Fddc72e74-2b5e-4571-82a1-f89331889296.png?alt=media&token=a9105e8e-5129-478a-a678-29dc13965a39","id":"ddc72e74-2b5e-4571-82a1-f89331889296","width":1540,"height":900,"filename":"Talent Detail.png","type":"image/png","caption":"Talent Detail /  TEKsystems","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fallegis-group%2Fba34d05a-5e99-4d54-b3d4-91188c1ea5a2.png?alt=media&token=0dfe8a86-c8d9-4fa2-9090-09d0a8a65c4a","id":"ba34d05a-5e99-4d54-b3d4-91188c1ea5a2","width":1540,"height":1274,"filename":"Default-1.png","type":"image/png","caption":"Profile Edit / Actalent","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fallegis-group%2F20a1f6be-3745-4d3f-8fa2-d809a820f068.png?alt=media&token=8782f0e1-7c6c-45b7-b95a-34bf53fe2edc","id":"20a1f6be-3745-4d3f-8fa2-d809a820f068","width":1540,"height":1097,"filename":"Default.png","type":"image/png","caption":"Profile / TEKsystems","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fallegis-group%2Fbdf49f02-bd41-4e87-9cd7-4b145a551cfa.png?alt=media&token=cd78c321-73c5-441f-b0e7-709aeb9f59eb","id":"bdf49f02-bd41-4e87-9cd7-4b145a551cfa","width":3080,"height":1802,"filename":"Filled.png","type":"image/png","caption":"Modal / Actalent","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fallegis-group%2F6cfee087-a075-49df-873e-e3031ecaabf5.png?alt=media&token=c1280af8-16d6-4930-b472-0a5965bba707","id":"6cfee087-a075-49df-873e-e3031ecaabf5","width":3080,"height":1802,"filename":"Filled-1.png","type":"image/png","caption":"Modal / TEKsystems","border":false}]}
```

I also defined the Design System foundations for this theme including Color Ramps, Elevation Levels, Design Tokens, and the respective variables and styles following Tailwind Naming conventions to easily handoff to the web development team.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fallegis-group%2F26e0da1a-fca0-4ea4-b159-14728e1f4adb.mp4?alt=media&token=9b4529d6-ba96-4c8b-b382-2dc133b9d90d","id":"26e0da1a-fca0-4ea4-b159-14728e1f4adb","width":1918,"height":1080,"filename":"Tokens.mp4","type":"video/mp4","caption":"Color Tokens Snapshot / Tokens Studio","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fclient-portal-dark-mode%2Fbc6d9c65-c7e4-4e6e-9273-9a385f22e838.png?alt=media&token=2e63505e-4705-4ecf-892d-8169cd3a5722","id":"bc6d9c65-c7e4-4e6e-9273-9a385f22e838","width":2000,"height":2760,"filename":"Frame 2608546.png","type":"image/png","caption":"Primitive Color Ramps","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fus349uqwUgZuXZe9JsccYEOesip2%2Fclient-portal-dark-mode%2Fddbb2bc5-8d8a-44dd-a994-3b7cc8587ed8.png?alt=media&token=63f8207a-009c-4f7c-92e0-a9770d8f5388","id":"ddbb2bc5-8d8a-44dd-a994-3b7cc8587ed8","width":1172,"height":758,"filename":"Frame 2608547.png","type":"image/png","caption":"Elevation Levels","border":false}]}
```

### **My Role ✨**

I led the design of a dark mode theme for the Client Portal app. This included user research, benchmarking, statistics and exploring color options. I meticulously created design tokens that could be easily integrated with our existing design system. I designed the color palettes to be flexible and work for different brands. After defining design tokens, I mentored another designer to help them apply the theme to various screens. I presented the design to business stakeholders, product owners, and the UX team, working closely with the product owner on the user research. Finally, I ensured a smooth transition for the development team by partnering with the tech lead.

### Take a deeper look of the design files in the next ***[link](https://www.figma.com/design/FQscpWVe3waC3r5CvulDHF/Dark-Mode?m=dev&node-id=130-41450&t=7KzEhcWJ6UlDFDwd-1)***

> **Skills & Tools:**\
> *Figma, Tokens Studio, Design Systems, Research, ADA, WCAG, Design Thinking, Agile.*

Client Portal Dark Mode

Let's craft memorable tech experiences together

Website Design Major Lindsey & Africa

Website Design Major Lindsey and Africa

The Problem ⚠️

The Process ⚙️

The Solution 💡

My Role ✨

For a deeply look of the designs visit this link for version 1, and this link for version 2.