## 👁  **Overview**

Noctil has come a long way in delivering intelligent yet scalable data and cloud solutions for the music and movie industry.

## **🗒️**  **Requirements**

Noctil needed a fresh website that expressed the new technology and features their platform offered and helped boost their B2B

## **🗂️**  **Deliverables**

* Logo Design

* Rebranding

* Website Design

* Mobile Responsive Design

## ⚙️  **Process**

* Understanding the requirements

* Information Architecture

* Wireframes

* Design Exploration

* Designing responsive website

## ➜ **Understanding the requirements**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FiovmmK23VQeODcJ1bvdfwwKc1bb2%2FiqiTApidAP1YkfzGkjxT%2F024ea78f-a49d-4dd6-846d-7ed955debfc3.png?alt=media&token=f058deec-78d7-4dcb-b60e-996d3406ce2a","id":"024ea78f-a49d-4dd6-846d-7ed955debfc3","width":2880,"height":2048,"filename":"slide-01.png","type":"image/png","caption":"","border":false}]}
```

## ➜ **Information Architecture**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FiovmmK23VQeODcJ1bvdfwwKc1bb2%2FiqiTApidAP1YkfzGkjxT%2F05b6323c-ccc7-4551-a1d2-54b3c005d76c.png?alt=media&token=96db751c-4324-4e71-b002-34d18ef0644e","id":"05b6323c-ccc7-4551-a1d2-54b3c005d76c","width":2880,"height":2048,"filename":"slide-02.png","type":"image/png","caption":"","border":false}]}
```

## ➜ **Wireframes**

When creating wireframes for the website, we made more than 15+ screens that covered the minimum functionality of the website

After that, we conducted usability testing, worked out the feedback, and made final adjustments.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FiovmmK23VQeODcJ1bvdfwwKc1bb2%2FiqiTApidAP1YkfzGkjxT%2F34944dba-252b-40b5-adc0-6776b26a09fe.png?alt=media&token=14733772-14ef-4e22-8bf7-2187d18b1d2a","id":"34944dba-252b-40b5-adc0-6776b26a09fe","width":2880,"height":2048,"filename":"slide-03.png","type":"image/png","caption":"","border":false}]}
```

## ➜ **Design Explorations**

**There were multiple iterations and explorations for each of elements like colors, fonts of the website.**

> Font options

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FiovmmK23VQeODcJ1bvdfwwKc1bb2%2FiqiTApidAP1YkfzGkjxT%2Fd9e17790-441a-46de-bf46-e271ef1ec924.png?alt=media&token=7e3a9edd-88e0-4c61-a37d-b09f7faf123a","id":"d9e17790-441a-46de-bf46-e271ef1ec924","width":2880,"height":2048,"filename":"slide-04.png","type":"image/png","caption":"","border":false}]}
```

> **Color options:**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FiovmmK23VQeODcJ1bvdfwwKc1bb2%2FiqiTApidAP1YkfzGkjxT%2Fa473597c-4b90-4351-b385-17585738d1e5.png?alt=media&token=c45aa706-5ec5-4641-acad-f92679691750","id":"a473597c-4b90-4351-b385-17585738d1e5","width":2880,"height":2048,"filename":"slide-05.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FiovmmK23VQeODcJ1bvdfwwKc1bb2%2FiqiTApidAP1YkfzGkjxT%2F2b7c356d-ad57-42bc-aac7-47cf63d30a12.png?alt=media&token=de15aef2-c16a-454a-937b-e7758a3cdabd","id":"2b7c356d-ad57-42bc-aac7-47cf63d30a12","width":2880,"height":2048,"filename":"slide-06.png","type":"image/png","caption":"","border":true}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FiovmmK23VQeODcJ1bvdfwwKc1bb2%2FiqiTApidAP1YkfzGkjxT%2F2a8088d6-6626-4c03-896b-02ff8eabfbd8.png?alt=media&token=b7e0e91f-faa6-4780-9e64-600463c89451","id":"2a8088d6-6626-4c03-896b-02ff8eabfbd8","width":2880,"height":2048,"filename":"slide-08.png","type":"image/png","caption":"","border":true}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FiovmmK23VQeODcJ1bvdfwwKc1bb2%2FiqiTApidAP1YkfzGkjxT%2Fb47d0650-6bbe-4a61-91ad-4f960593cc70.png?alt=media&token=59cc2e29-6c84-4c5f-a709-b613736735e7","id":"b47d0650-6bbe-4a61-91ad-4f960593cc70","width":2880,"height":2048,"filename":"slide-09.png","type":"image/png","caption":"","border":false}]}
```

Noctil Website Design

👁 Overview

🗒️ Requirements

🗂️ Deliverables

⚙️ Process

➜ Understanding the requirements

➜ Information Architecture

➜ Wireframes

➜ Design Explorations