```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4cNAkYmsMjgUHqjvMi5AftmiWlA2%2FBcoo4wt1taYnYxewzsMo%2F311ee607-9349-4162-8015-1ed975a76181.png?alt=media&token=83dc10c8-08b1-4492-bc4d-11440e21fc80","id":"311ee607-9349-4162-8015-1ed975a76181","width":1440,"height":910,"filename":"Screenshot 2024-02-17 124150.png","type":"image/png","caption":"","border":false}]}
```

[↖️Link to Project](https://www.figma.com/proto/mviqcaxc2yzg0botOMnMPd/Flexi?page-id=0%3A1&type=design&node-id=2-2&viewport=702%2C-5501%2C0.41&t=jemDWxV7PNlAzInK-1&scaling=min-zoom&mode=design)

## **🏠Introduction**

**About This Project:** This project functional UX and UI Designer to overcome the immense difficulty, broad minded and interactive and advanced UI Design.

## **👉Get Started**

**Overview:** This website is designed to accommodate store business processes related to cryptocurrency & metaverse. This application contains several features so that end-to-end users can shop online using the desktop website.

**The Story:** In the midst of newly emerging market of metaverse & cryptocurrency, this website aims to foster business related to this field.

## **👨‍🎨Design Process**

* **Ideation**

> Brainstorming | Crazy 8 | FCD

* **Research & Wireframe**

> Interviews | Empathy Map | Competitor analysis | User journey | General flow | Design trend research | Low-fi testing (AB)

* **Prototype and testing (UT)**

> General prototype | Edge cases prototype | Usability testing | Gather feedback | Design revision

* **Development**

> Handoff to developer | Assets documentation | Translate from UI to code | Unit testing | UI audit | Gather feedback | Layout revision after feedback | Ready to test.

* **Testing -> Release**

> Testcase creation | Flow creation from QA | QA documentation | UI audit | Revision to developer | General testing | Release MVP

## **🎨Style Guide**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4cNAkYmsMjgUHqjvMi5AftmiWlA2%2Fflexi%2Fe3ad81c1-a144-4e7d-8215-022ac1d1d4da.png?alt=media&token=45d86f36-dedd-4bc8-b64c-b5eb1a0a4cf0","id":"e3ad81c1-a144-4e7d-8215-022ac1d1d4da","width":2880,"height":3363,"filename":"design system.png","type":"image/png","caption":"","border":false}]}
```

## **➡️User Flow**

The user flow is consciously kept easy hence that the website users can reach their desired outcome without much effort.

## **👨‍💻About Designer**

Hello, my name is Farhan. I myself have designed this case study in collaboration with a startup company aimed towards Metaverse and Cryptocurrency, while pursuing bachelor studies at a prestigious business university in Pakistan. To check out more about me, please see links in the footer of this page.

[📲Behance](https://www.behance.net/farhankh)

Flexi | Metaverse UI/UX Case study | Desktop Design

### Prototype View:

```cv
figma
{"url":"https://www.figma.com/proto/YpegtUdqvRto44iTBgRuDL/smART-UI-(Copy)?page-id=447%3A8821&node-id=461-16205&viewport=574%2C-111%2C0.03&t=uNaPRhgRuKecSRcX-1&scaling=min-zoom&starting-point-node-id=461%3A16205"}
```

### Outline:

> This project aims to develop a website-prototype for a logistic based startup company 'ArtRace' that is developed in Figma.
>
> ArtRace is logistics company for sole purpose of aiding the organization of art exhibitions in the UK. The app's purpose is to calculate total cost involved with the transportation of a specific art piece by it's wieght and location. It had several logistic options  for the consumer to choose either by plane or by road based on how fast they wanted thier delivery to reach its destination. Further, it has a carbon emission tracker that to abide by the rules and regulations of the laws of UK w.r.t the allowed emission per delivery, in order to keep the society green.

### Pages:

> Different pages were included to provide different usability features to process the payment and registration of a consumer. Following were the pages designed to provide the full functionality of the website:
>
> * Dashboard
>
> * Organization
>
> * Events
>
> * Art Work Management
>
> * Business Travel
>
> * Freight

### Components:

> Following are all the components used to complete the flow and transitions of the prototype:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F4cNAkYmsMjgUHqjvMi5AftmiWlA2%2FvG46XFfecCWDpRdvfhlr%2F6382c446-d46e-425a-b3a5-0e053cd76984.png?alt=media&token=2f57dd17-bfb2-41f6-bc1d-cc0e150c35c3","id":"6382c446-d46e-425a-b3a5-0e053cd76984","width":2504,"height":2608,"filename":"Events - components.png","type":"image/png","caption":"prototyping components used","border":false}]}
```

Project ArtRace | Logistics based startup company | Desktop Prototype

Web Developer

NAYAPAY CAMPUS UNIVERSE

THE DUKE OF EDINBURGH’S SILVER AWARD

Youth Empowerment Program – 12 Months Training Program

Helped my community & uplifted my skills to grow confidence by doing what I love or trying something completely new.

Proficient in design process from beginning to end: empathizing with users, defining their pain points, coming up with ideas for design solutions, creating wireframes and prototypes, and testing designs to get feedback.

Google UX Design Professional Certificate

Skilled in designing and developing engaging user interfaces and experiences, using React.js, enhancing digital presence and interaction on web platforms along with expertise in CSS, HTML & JavaScript ES6.

Front-End Developer Professional Certification

Designed an interactive dashboard on Power BI that visualized the sales trends and customer behavior patterns for Zee Mart's stores.

VISUALIZED STATISTICS - ZEE MART

Analyzed ISL’s stock by interpreting primary stock data through python programming language and presented recommendations based on its performance compared to other 04 industry companies.

STOCK ANALYSIS & FORECASTING - INTERNATIONAL STEELS LIMITED

Advocated robust policy framework leading to 30% acceleration in solar energy adoption, outlining a strategic roadmap for rapid renewable energy expansion and sustainable energy security.

POLICY BRIEF – RENEWABLE ENERGY TRANSITION

Developed an International Business Strategy for a Brazilian Apparel Company – Eco Blue

* Generated a business plan alongside a global virtual team to provide valuable insight for international business operations.


* Utilized agile methodologies to enhance the plan for alignment with organizational goals and market demands.

X Culture Project

First Aid Trainee

Volunteer

Community Development Volunteer

* Spearheaded an on-campus marketing campaign, generating a 40% boost in student sign-ups for accounts within 2 months.

* Leveraged social media platforms to highlight usability and user experience outcomes during app development process, resulting in a 20% expansion of user base within target communities.

Campus Ambassador

* Collaborated with legal and compliance teams to ensure adherence to regulatory requirements based on historical trends.

* Projected correlations for credit services & bank profitability to ensure adherence with risk management policies.

* Established key performance indicators (KPIs) for the credit assessment process and regularly monitored progress, achieving a 20% improvement in KPI adherence and a 30% reduction in overdue credit assessments.

INTERN - CREDIT DIVISION

* Developed high-impact content across various platforms, overseeing designs to ensure intuitive navigation and engaging user experience, resulting in a 40% increase in client satisfaction ratings & 30% web traffic increment.


* Gained proficiency in industry-leading tools such as Figma, WordPress & MonsterInsights to optimize content design, enhancing project efficiency by 20%.


* Innovated and projected improvements with new design methodologies, resulting in a 20% increase in employee satisfaction and retention.

Muhammad Farhan Khan

2024