## Scope and constraints

👉 [Research paper on Wearable Activity Trackers in managing routine health and fitness](https://drive.google.com/file/d/15SXtaI-053wba9X32EGf2pK1cvzqyhMy/view)

This Research paper was the main reference and I designed solutions to overcome one or more barriers mentioned in the paper

Duration: 1 week

## Sneak peek at the result

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2F5NTeAg8NSohN49P4ITJW%2F1a7e5aa2-e95c-46b7-bd28-25454e86538d.mp4?alt=media&token=1125230b-d4b8-453d-bda8-e40e7460f695","id":"1a7e5aa2-e95c-46b7-bd28-25454e86538d","width":1600,"height":1200,"filename":"from read cv.mp4","type":"video/mp4","caption":"","border":false}]}
```

## **Project Summary**

The project aims to design a solution that helps older adults use fitness trackers effectively to improve their health and well-being. Many older adults struggle with using fitness trackers due to their complexity, which can lead to them not gaining the full benefits of the technology. The solution is based on [the research paper](https://drive.google.com/file/d/15SXtaI-053wba9X32EGf2pK1cvzqyhMy/view) that identifies barriers to using a fitness tracker and proposes ways to overcome them.

## The problem

The problem that the market is facing is the low adoption and usage of fitness technologies such as wearable activity trackers among older adults, especially in developing countries. The user problems that exist within the current design are the complexity of the devices, the lack of local language support, personalized feedback on progress, and Q&A chat-bots.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2F5NTeAg8NSohN49P4ITJW%2Fb6b4ab10-8064-4e1f-8286-678fbd9ee860.png?alt=media&token=fe5513fd-a5a3-4bc7-8501-ef0402067604","id":"b6b4ab10-8064-4e1f-8286-678fbd9ee860","width":1984,"height":2624,"filename":"HMWs.png","type":"image/png","caption":"","border":false}]}
```

## Goals

* main goal of the solution is to help older adults use fitness trackers efficiently to improve their health and well-being.

* Increase the adoption and usage of fitness trackers among older adults, particularly in developing countries like India.

* The specific goals are to address the user problems that exist within the current design, such as

  * the complexity of the interface should be reduced as older adults are not explorers and they would not search for other features

  * lack of personalized feedback on progress

  * language barriers

## Design Process

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2F5NTeAg8NSohN49P4ITJW%2F070c6fee-7a22-44be-8121-1812621ce699.png?alt=media&token=5d0a3809-ac35-454d-8d98-74aea994e149","id":"070c6fee-7a22-44be-8121-1812621ce699","width":1642,"height":924,"filename":"design process.png","type":"image/png","caption":"","border":false}]}
```

Since this project is based on the research done in **[the research paper](https://drive.google.com/file/d/15SXtaI-053wba9X32EGf2pK1cvzqyhMy/view)**, I will be considering that the research part of this project is already done.

## Our target user

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2F5NTeAg8NSohN49P4ITJW%2Fc8426893-2396-468a-a081-ff733ea78417.png?alt=media&token=9adeb2f3-5c87-4b86-aec2-8545e2b63919","id":"c8426893-2396-468a-a081-ff733ea78417","width":1194,"height":834,"filename":"user persona.png","type":"image/png","caption":"User persona","border":false}]}
```

To Drastically decrease the complexity of the fitness tracker, and add more accessibility, a voice-enabled conversational AI chatbot solution is designed to help older adults in using fitness trackers efficiently and effectively. The chatbot is integrated with a fitness-tracking app and can be accessed through the device's microphone. The chatbot provides personalized guidance to the user by answering their questions, providing feedback on their progress, and offering motivation and encouragement to meet their fitness goals. The chatbot can also understand and respond in local languages, making it more accessible to users who are not comfortable with English. The chatbot solution aims to provide a user-friendly and intuitive interface that enables older adults to better understand and utilize the features of their fitness trackers, ultimately leading to improved health and quality of life.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2F5NTeAg8NSohN49P4ITJW%2F4201a144-b455-4f8d-9166-c9f6ec932e29.png?alt=media&token=c83ddd4a-ebbd-4885-b99d-f06a89aa70cb","id":"4201a144-b455-4f8d-9166-c9f6ec932e29","width":3088,"height":928,"filename":"onboarding.png","type":"image/png","caption":"Simplified onboarding process for the fitness tracker","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2F5NTeAg8NSohN49P4ITJW%2F43d25509-a47a-4b63-aacf-a5c5baf12e0e.png?alt=media&token=07e02438-400c-499b-a735-8212fe69ffef","id":"43d25509-a47a-4b63-aacf-a5c5baf12e0e","width":777,"height":654,"filename":"home page.png","type":"image/png","caption":"Minimal home page ( can be added to other fitness tracker as an easy mode )","border":false}]}
```

## A Typical flow of the conversational AI

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2F5NTeAg8NSohN49P4ITJW%2F37922761-a4bf-49e9-965d-4b107b6fa46a.png?alt=media&token=e6154102-c374-4b7e-a238-5c84e5424f9c","id":"37922761-a4bf-49e9-965d-4b107b6fa46a","width":2912,"height":3360,"filename":"typical flow.png","type":"image/png","caption":"","border":false}]}
```

### Assumptions

* The fitness tracker has a microphone and a speaker

* The fitness tracker has access to the internet via Wi-Fi

* the conversations are made while the user is stationary or in a relaxed state.

* The User must have basic fluency in English

* All data about the user such as his age, gender, Name, etc shall be taken from the companion app through its onboarding process

## The conversation flows

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2F5NTeAg8NSohN49P4ITJW%2Fd287b69f-a86f-4a5a-8e3c-e76b8688905b.png?alt=media&token=7c2ec5fe-a03a-4af5-a708-c0f7c0497210","id":"d287b69f-a86f-4a5a-8e3c-e76b8688905b","width":1762,"height":1556,"filename":"start flow.png","type":"image/png","caption":"Start flow","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2F5NTeAg8NSohN49P4ITJW%2F958c11d8-4654-4a4a-af60-1f685746ae20.png?alt=media&token=f32be915-ff43-4fc5-99de-325ecd07f5dd","id":"958c11d8-4654-4a4a-af60-1f685746ae20","width":2458,"height":1108,"filename":"show a health data flow.png","type":"image/png","caption":"Request a health data","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2F5NTeAg8NSohN49P4ITJW%2F72fd331b-5eaa-4f5e-a016-82245e527a8e.png?alt=media&token=909ef4e0-c2c2-4c38-867e-0620341cee64","id":"72fd331b-5eaa-4f5e-a016-82245e527a8e","width":2956,"height":1758,"filename":"set a new health tartget flow.png","type":"image/png","caption":"Set/Update a health target","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2F5NTeAg8NSohN49P4ITJW%2Fcb78c26f-cefb-44b0-9850-0810c0fced9a.png?alt=media&token=89049a65-0bc7-4f63-b50c-87eb5ba4b918","id":"cb78c26f-cefb-44b0-9850-0810c0fced9a","width":1236,"height":1186,"filename":"motivate user.png","type":"image/png","caption":"Motivate a user event","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2F5NTeAg8NSohN49P4ITJW%2F9bfe0264-4dd9-489d-a54d-4c531b296f1c.png?alt=media&token=d57ea019-7769-4427-9a1d-e3531cf00707","id":"9bfe0264-4dd9-489d-a54d-4c531b296f1c","width":378,"height":749,"filename":"motivation user variants.png","type":"image/png","caption":"Variant responses to motivate user","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2F5NTeAg8NSohN49P4ITJW%2F8ce36578-0813-4693-ba76-53dc5d5dd92f.png?alt=media&token=72c8e95e-6eb8-4437-b356-66940bb777ac","id":"8ce36578-0813-4693-ba76-53dc5d5dd92f","width":3344,"height":1492,"filename":"Execute other functionalities of the fitness tracker.png","type":"image/png","caption":"Execute other functionalities of the fitness tracker such as setting an alarm","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2F5NTeAg8NSohN49P4ITJW%2F3e656fba-3001-4d9c-9467-45f0e05972a7.png?alt=media&token=53f590a1-01f9-4e23-adac-8885ed9d9b06","id":"3e656fba-3001-4d9c-9467-45f0e05972a7","width":2696,"height":1732,"filename":"other querys.png","type":"image/png","caption":"Asking the bot for health related query — query is passed through OpenAI’s davinci-002 model","border":false}]}
```

> These flows can also be made in local languages like Hindi, Marathi, Kannada, etc , due to time constraints, I wasn’t able to add that into this version of the solution.

## Prototypes

👉[Voiceflow prototype](https://creator.voiceflow.com/prototype/64258cbf65057167b448f77e)

👉 [Figma Prototype](https://www.figma.com/proto/nq0O0INJ4bagFzSFXTCibe/Main-design-file?page-id=1%3A14&node-id=1-17&viewport=-297%2C390%2C1.24&scaling=scale-down&starting-point-node-id=1%3A17)

##

Gerofit - Interaction design of a Voice assistant

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F23846dba-3e26-4cfd-b6eb-d0fabb45899b.png?alt=media&token=506a87e5-645a-4fdd-b2a6-755676fa9b44","id":"23846dba-3e26-4cfd-b6eb-d0fabb45899b","width":1920,"height":872,"filename":"Medicotary hero banner.png","type":"image/png","caption":"","border":false}]}
```

> This problem statement was given to us in a design hackathon conducted in VIT Vellore. The time given was *5 days* and the team consisted of myself and [Nishant Pant](https://www.linkedin.com/in/nishantpant20/)

## **The Problem Statement**

Design a product experience that would help pharmacists keep track of their inventory. Design the experience from the perspective of the pharmacist who wants to keep an easy check of the medicine inventory and also wants to speed up the process of managing it. Identify the pain points in the inventory management project and solve these pain points.

## 🎯Goals

* Find user behavior and user pain points using various UX methodologies.

* Finding the MVP features of the website.

* Solve the problem with the Hi-Fi prototype.

## **Research**

### **📚** Secondary research

I started off by googling what exactly goes around with the inventory management of a medical store by reading blogs, articles, and research papers to validate our initial assumptions.

> *If you count all your assets you always show a profit —* Wilson Mizner

* Inventory management is defined as the continuing process of planning, organizing, and controlling inventory that aims at **minimizing the investment in inventory while balancing supply and demand**.

* There are **three methods** used in pharmacy to manage inventory: **the visual method, the periodic method, and the perpetual method**. Of which the perpetual inventory management method is the most common and efficient method to manage pharmacy inventory. It involves a computerized system that monitors the inventory at all times on a continuous systematic basis.

* In this system, the inventory **is manually entered** into the computer software, and the appropriate amount of products is automatically reduced from the inventory when a prescription or medication order is filled.

*Source — [Ayad K. Ali. Inventory Management in Pharmacy Practice: A Review of Literature. Archives of Pharmacy Practice. 2011; 2(4) pp 151–156](https://www.researchgate.net/publication/268037045_Inventory_Management_in_Pharmacy_Practice_A_Review_of_Literature)*

### 🔍 Primary research

We could interview only 3 pharmacists over a call because of the pandemic situation, over the interview we asked them about their daily tasks and inventory management.

*The interview helped us understand the user's needs and pain points even better.*

* A few still use **old-school pen-paper techniques** to manage their inventory but most of them shifted to a digital platform.

* The pharmacists experienced trouble **manually entering the medicines** sold onto their computers in order to manage the inventory.

* Pharmacists experience trouble when **medicine goes out of stock** and causes discomfort to the customer.

* The pharmacists experience trouble while **keeping track of the ordered inventory** and while making the monthly/annual sales report.

*This helped us create the **User Persona** and also list down the points for the **Minimum Viable Product**.*

## **Define**

### 👤User Persona

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F590a0d00-160b-4896-a120-b29f23a8ba2c.png?alt=media&token=8d04701f-165a-478e-97c3-2744b662cb2f","id":"590a0d00-160b-4896-a120-b29f23a8ba2c","width":1400,"height":1197,"filename":"medicotary user persona.png","type":"image/png","caption":"User persona","border":false}]}
```

### 🔗 The Final Connections

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F8f9fd6a7-0bf3-4ef5-9424-afea784b5795.png?alt=media&token=848b8159-bf21-4557-b73a-7ff9effceca0","id":"8f9fd6a7-0bf3-4ef5-9424-afea784b5795","width":702,"height":795,"filename":"How might wes-medicotary.png","type":"image/png","caption":"HMWs","border":false}]}
```

## **Ideate**

### 🦄 MVP features

* **Easy track of inventory** with less work for pharmacists.

* **Reminders to stock up** before the medicine go out of stock.

* **Easy access** to delivery partners and vendors.

* **Visual representation** of invoices and sales.

With all the insights we gathered from the research, we established a process for implementing it into a hi-fi prototype. The first thing we did was use these insights and create an **Information Architecture** and **User Flow** for the entire website.

This gave us clarity on how to group certain features of the product and also establish a smooth experience for the pharmacists.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F5c1488ec-0c15-423a-a11c-81efcadd8e2c.png?alt=media&token=a96539a2-73d1-4dd5-84e5-0951b644d017","id":"5c1488ec-0c15-423a-a11c-81efcadd8e2c","width":1400,"height":796,"filename":"IA medicotary.png","type":"image/png","caption":"IA","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2Ff9f0f4ce-311d-41ba-9549-7f4e8f7b2fdb.png?alt=media&token=e36e7384-fe99-45e8-be14-ce83d2f71ace","id":"f9f0f4ce-311d-41ba-9549-7f4e8f7b2fdb","width":1400,"height":529,"filename":"user flow medicotary.png","type":"image/png","caption":"User flow","border":false}]}
```

## **Design**

### 🎞 Wireframes

Once the user flow and IA were done, with the help of that we moved to Wireframing. We used Figma to make low-fidelity wireframes. This was a time-consuming process as it required constant changes according to the feedback we kept getting from our mentors.

### 😍 Visual Design

Now that we were satisfied with our wireframes we moved on to making the UIs in Figma. We first came up with a design system, where we made a color palette that fits the product and decided to work with DM sans as the font.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F1d04850d-78bb-4623-bc62-3507b4d318bc.png?alt=media&token=5f97d1ac-53ae-4ab2-82aa-09c62084dfe6","id":"1d04850d-78bb-4623-bc62-3507b4d318bc","width":1600,"height":846,"filename":"Color Scheme medicotary.png","type":"image/png","caption":"Color Scheme","border":false}]}
```

### Authentication pages

The signup and login pages were kept very simple and only the necessary information from the pharmacists was collected. We gave an option to either log in through email or through a google account.

We also made a forgot password page so that recovering the account remains easy for the users.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F8a4f2bfa-e87f-4b9d-86b3-4eae69faa879.png?alt=media&token=770b71b8-5f94-4b2b-9f91-b4e15e3321d5","id":"8a4f2bfa-e87f-4b9d-86b3-4eae69faa879","width":800,"height":629,"filename":"sign up medicotary.png","type":"image/png","caption":"Sign up Page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F8437cff9-a425-40a4-abe8-931e05cab97f.png?alt=media&token=fa5988a3-9591-4d1d-8bf0-1c4ee31fbc00","id":"8437cff9-a425-40a4-abe8-931e05cab97f","width":800,"height":629,"filename":"log in medicotary.png","type":"image/png","caption":"Log in Page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F3c4fd807-a1e2-4248-a176-2aef9003a4f8.png?alt=media&token=7f04f719-4e75-4788-8ce8-a42814df5096","id":"3c4fd807-a1e2-4248-a176-2aef9003a4f8","width":1400,"height":1103,"filename":"forgot pass medicotary.png","type":"image/png","caption":"Forgot password Page","border":false}]}
```

### Dashboard

Gives a quick insight into a number of out-of-stock products, low-stock products, on route deliveries. Also gives a graphical representation of the stock.

Easy navbar for Quick access to other pages and quick add product/bill/vendor option.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F5c29174f-0aab-4e79-85ba-a6c6819888d4.png?alt=media&token=19240f17-14cd-4cf5-b82e-1d4339b8f7a4","id":"5c29174f-0aab-4e79-85ba-a6c6819888d4","width":1442,"height":1135,"filename":"dashboard medocotary.png","type":"image/png","caption":"Dashboard","border":false}]}
```

### Products

The pharmacist gets an option to add medicines to his inventory either by adding it manually like the conventional approach or scan the medicine’s barcode from the box.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F5dac85c3-1bcc-450a-a509-9167127445b1.png?alt=media&token=28567039-8e15-48d7-a7ee-8a293149f6d7","id":"5dac85c3-1bcc-450a-a509-9167127445b1","width":800,"height":629,"filename":"products empty state medicotary-p-800.png","type":"image/png","caption":"Product page empty state","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F938d0233-f458-4e3c-855e-5d37e1c377ea.png?alt=media&token=1fec25ef-7b3f-4f25-9b75-872ba8a53615","id":"938d0233-f458-4e3c-855e-5d37e1c377ea","width":800,"height":629,"filename":"product form medicotary-p-800.png","type":"image/png","caption":"Product entry form","border":false}]}
```

To add the products by scanning, pharmacists can scan the barcode of the medicine box with the help of the partner app that allows them to scan, then the user has to enter the low stock warning number and then it shows a success prompt once the product is added to the inventory.

The landing page here has all the products that are available in the inventory listed here, specific medicine can be easily searched using the search box or sorting according to need.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F4b4db18d-6134-4cc3-aeda-66280c158027.png?alt=media&token=84f97dcb-45bc-48f7-bc80-377a329319c2","id":"4b4db18d-6134-4cc3-aeda-66280c158027","width":1400,"height":1101,"filename":"product table medicotary.png","type":"image/png","caption":"Products table","border":false}]}
```

### Billing

This page here gives a quick insight into the sales and profits. It also shows the recent products sold.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F6515d2d3-9bb1-4a11-8fa1-7442ffeb0d05.png?alt=media&token=afd4dd59-85a1-4dcd-b27d-d18d3013cf42","id":"6515d2d3-9bb1-4a11-8fa1-7442ffeb0d05","width":1400,"height":1377,"filename":"billing medicotary.png","type":"image/png","caption":"Billing Page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F00d8e685-d1ac-49f5-af1a-86bdb309c008.png?alt=media&token=be7abae7-b27d-4893-8bde-cd6e74ce0333","id":"00d8e685-d1ac-49f5-af1a-86bdb309c008","width":800,"height":726,"filename":"show bill medicotary-p-800.png","type":"image/png","caption":"Single Bill","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F82dd4bf7-ef68-4d60-9776-13ff32481d9b.png?alt=media&token=8cb7c93b-8ae0-40bc-a740-01ddc37be9a3","id":"82dd4bf7-ef68-4d60-9776-13ff32481d9b","width":800,"height":726,"filename":"add bill medicotary-p-800.png","type":"image/png","caption":"Add a bill","border":false}]}
```

The bill is important to log every transaction, but here it also helps us manage the inventory.

Whenever a bill is added the number of products sold will be reduced from the database, hence managing the inventory without having to manually reduce the numbers.

### Vendors

The pharmacists have a hard time contacting and remembering the vendors, they mostly use their phones for this but it would help them keep if all their vendors’ contact info is available in one place!\
New vendors can be manually added.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2Fb60b1109-6885-414d-999e-f7254d3b29c9.png?alt=media&token=fcddddd9-2087-4c49-a9a2-1e548e3980fc","id":"b60b1109-6885-414d-999e-f7254d3b29c9","width":800,"height":629,"filename":"vendor page medicotary-p-800.png","type":"image/png","caption":"Vendors Page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2Ffd20b900-bf03-4f1e-81be-a4bdc9eeffe4.png?alt=media&token=0e3f10ba-6ddd-493a-8662-1d0c7864506d","id":"fd20b900-bf03-4f1e-81be-a4bdc9eeffe4","width":800,"height":629,"filename":"add vendor medicotary-p-800.png","type":"image/png","caption":"Add a new Vendor Form","border":false}]}
```

### Deliveries

Pharmacists usually track their deliveries through their delivery partners' websites, but after establishing the integration they can track their orders from the website itself.

The pharmacists will have to give the necessary info that can help us get the delivery data from the respective delivery website and display it on our website.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F3399f2cb-fef9-46fd-b987-4ba6ec0530c7.png?alt=media&token=f31b519e-9e55-4fdd-bc4c-abfe6cb3f427","id":"3399f2cb-fef9-46fd-b987-4ba6ec0530c7","width":800,"height":629,"filename":"delivery page medicotary-p-800.png","type":"image/png","caption":"Delivery Page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F6af7ba06-715c-41c8-8798-b45b194f08fe.png?alt=media&token=ee8a59bc-1682-4154-95ca-82a218840a0d","id":"6af7ba06-715c-41c8-8798-b45b194f08fe","width":800,"height":629,"filename":"create integration page-p-800.png","type":"image/png","caption":"adding a new integration","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F20b75f05-60c4-4306-8b8d-cb74ef66a259.png?alt=media&token=d5bdb8d7-6dbf-48fe-bbb2-6557fb6cf8a6","id":"20b75f05-60c4-4306-8b8d-cb74ef66a259","width":800,"height":730,"filename":"individual delivery-p-800.png","type":"image/png","caption":"product delivery details","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F1d97751b-f8ca-4c3a-8633-8807fc25b75e.png?alt=media&token=31e12635-ff46-483e-ab29-e8fa1ba36778","id":"1d97751b-f8ca-4c3a-8633-8807fc25b75e","width":800,"height":629,"filename":"delivery tracking page-p-800.png","type":"image/png","caption":"Delivery tracking page","border":false}]}
```

### Notifications

The pharmacists get a reminder as a notification whenever a certain medicine is low in stock or out of stock or is arriving soon so that the pharmacists can act accordingly and manage the inventory efficiently.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2Fd435a97e-f15d-48ce-b0d9-a09e45b5f58a.png?alt=media&token=bdebd883-129d-4e3e-ba48-43a5887ec16c","id":"d435a97e-f15d-48ce-b0d9-a09e45b5f58a","width":1462,"height":1150,"filename":"notifications-medicotary.png","type":"image/png","caption":"Notifications page","border":false}]}
```

### **Profile**

The user can edit their personal info and choose to use their own display picture here by removing the default photo.\
The user can also log out from the platform from here.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2Fa656e9f5-a809-4c65-bfe8-41ee1e0eeec0.png?alt=media&token=86b11570-e1be-4a24-a4c8-0b39661fe6a0","id":"a656e9f5-a809-4c65-bfe8-41ee1e0eeec0","width":1400,"height":1416,"filename":"profile page medicotary.png","type":"image/png","caption":"Profile page","border":false}]}
```

### FAQs

The platform for a newcomer can be problematic, so we made a FAQ page where the platform’s functionalities can be explained.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FGi5kuOpHdeyIgyKEphKb%2F270d5940-b485-47fc-9da8-4046aed59ddd.png?alt=media&token=ab7d8e1f-f064-4387-ad79-ea2db1ad2479","id":"270d5940-b485-47fc-9da8-4046aed59ddd","width":1400,"height":1101,"filename":"FAQs-medicotary.png","type":"image/png","caption":"FAQs Page","border":false}]}
```

## 🌈 Prototype

All the UI screens are prototyped using interactive components and dissolve properties in **Figma**.

```cv
figma
{"url":"https://www.figma.com/proto/Q6CoyKCe7qswMK3fzTCZru/Medicotary-Management-of-order-and-supply-of-medicine-pharmacies?node-id=1%3A5&viewport=350%2C44%2C0.09&scaling=contain&starting-point-node-id=61%3A406&show-proto-sidebar=1"}
```

Medicotary

MiGo

> A walkthrough of my experience designing the landing page for a skill-testing platform

## **What is SkillTally?**

**[SkillTally](http://www.skilltally.com/)** is an EdTech Startup based out of India which provides skill assessments that are enjoyable as well as enriching and enable skill-building through skill testing. It believes that one's skills are improved only when one knows where his/her gaps are & to find those gaps one needs to test. SkillTally is the platform that will provide you with those tests so that you keep upskilling.

> This project was done during my **Product Design internship** at SkillTally.

## **The Problem Statement**

### **Overview 👁**

My task was to design a landing page and other related pages for SkillTally, which will be used for marketing and user acquisition.

### **Goals 🎯**

The primary goal of the Landing Page is to showcase the details of the Main product - SkillTally

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2F83f45006-efae-4b17-98c5-be51b2659a2b.png?alt=media&token=aa81fc18-556b-40f1-b80b-ab897135474f","id":"83f45006-efae-4b17-98c5-be51b2659a2b","width":436,"height":288,"filename":"skilltally landing page goals 01.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2F8a623af5-b36a-4bd3-af82-2409ed26ea47.png?alt=media&token=a3b35bb0-47cf-4504-9285-c3c8603a161a","id":"8a623af5-b36a-4bd3-af82-2409ed26ea47","width":436,"height":288,"filename":"skilltally landing page goals 02.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2F921555ed-90d6-4d6d-ab29-89186bdd6fb9.png?alt=media&token=71b8e5ca-c252-425d-bc0e-a26489a9e3ba","id":"921555ed-90d6-4d6d-ab29-89186bdd6fb9","width":436,"height":288,"filename":"skilltally landing page goals 03.png","type":"image/png","caption":"","border":false}]}
```

### **The Design Process 📃**

My strategy for resolving this Visual Design problem was simple and direct.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2F0575bcb7-7e5f-40f5-aa79-1d2a7770c0e6.png?alt=media&token=9e41b6ed-378a-4739-b528-c431b6f71ae3","id":"0575bcb7-7e5f-40f5-aa79-1d2a7770c0e6","width":1600,"height":558,"filename":"skilltally Design process-p-500.png","type":"image/png","caption":"","border":false}]}
```

## **Discovery & Definition**

### **User personas 👥**

The user research conducted by the business research team provided me with the necessary data to create user personas. This was incredibly helpful, as it enabled me to understand the demographics and needs & goals of the people who would visit and whom I should target.

```cv
figma
{"url":"https://www.figma.com/file/9nRM9wg9DWXNAsfJ9iiTuD/User-Research-And-Design-System?type=design&node-id=14%3A10955&t=PHsPPW8IVUEo53iU-1"}
```

As there are a lot of different types of users whom we are targeting, we created **sub-landing pages** targeting certain users which we call as **product pages.**

### **Exploration 🔮**

After looking into what I wanted for the Landing Page, I researched other similar Pages to compare and analyze them.

I referred to **[Landingfolio](https://www.landingfolio.com/)[‍](https://www.lapa.ninja/category/event/)**, **[Dribbble](https://dribbble.com/)** and other competitors and companies in the Ed-Tech space for my research.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2F60bfbecf-e9a2-4cf2-9b4f-880966b67a18.png?alt=media&token=c10c8bb1-4f48-4599-acc5-b3eeee0538a2","id":"60bfbecf-e9a2-4cf2-9b4f-880966b67a18","width":1335,"height":747,"filename":"skilltally exploration overall-p-500.png","type":"image/png","caption":"","border":false}]}
```

### **Sitemap 🗺️**

After understanding the requirements and goals of the complete project, and after some iterations and feedback rounds, I finalized on the **sitemap**.

```cv
figma
{"url":"https://www.figma.com/file/b2f2gAh4hj6EtpD8xf4lZ8/Sitemap?type=whiteboard&node-id=0%3A1&t=k6XBsxcZxfqo1MeV-1"}
```

## **Design**

### **Ideation & wireframing💡**

I had all the facts and details arranged and sorted according to importance. The next step was to arrange the information in an organized manner that would allow viewers to scroll through it easily and absorb the content.

* I decided to have a separate page for FAQs as there are quite a lot of FAQs targeted at different types of users

* I created a template for the sub-landing pages of different users which we call product pages

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2F31be95bf-9b9f-4c10-b9c9-0e1b806db5d1.png?alt=media&token=76f41182-79e5-4565-a202-a6341568b7d1","id":"31be95bf-9b9f-4c10-b9c9-0e1b806db5d1","width":1266,"height":1576,"filename":"skilltally wireframes main.png","type":"image/png","caption":"Wireframe iterations for the main landing page","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2F09f8b31d-a722-4527-948a-a681ac443fcc.png?alt=media&token=379b0dc6-bed3-455b-aed9-c779633117bc","id":"09f8b31d-a722-4527-948a-a681ac443fcc","width":1797,"height":1677,"filename":"skilltally wireframes sub.png","type":"image/png","caption":"Wireframe iterations for the sub-landing (product) page","border":false}]}
```

### **Branding & Style Guide**

### **Colors 🎨**

* The tufts blue color was chosen to display trust and professionalism

* The green emerald color was chosen to display growth and education/skill development

* The brand colors are bright and the theme of the webpage is light so as to give the user a positive and bright feel about our product

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2F4f880e64-3254-459b-a3c4-4d84956be200.png?alt=media&token=894d759a-6db6-417c-b918-3331802e65d5","id":"4f880e64-3254-459b-a3c4-4d84956be200","width":1011,"height":1011,"filename":"Brand colors.png","type":"image/png","caption":"","border":false}]}
```

### **Logos ✨**

The logos say for themselves, they have the message of measure to lead & happiness hidden in them.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2Fbe0eccfe-be00-4004-8a0b-0950322b41fe.png?alt=media&token=e766d572-ee8e-4d68-bd55-155d1c05dd0c","id":"be0eccfe-be00-4004-8a0b-0950322b41fe","width":800,"height":532,"filename":"Logo mark set-p-800.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2F2f6ed52e-dc35-42b8-827b-989e3eb5fbcd.png?alt=media&token=6048ff49-d4f6-4e43-b9a0-16c784a4200d","id":"2f6ed52e-dc35-42b8-827b-989e3eb5fbcd","width":800,"height":749,"filename":"Full logo set-p-800.png","type":"image/png","caption":"","border":false}]}
```

### **Typography 🅰️**

**Satoshi** is an elegant and modern sans-serif font, which is very legible and readable. It even has multilingual support which could be useful for increasing accessibility to the website.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2F7e253a63-ff71-4223-8d38-cb8cfd330173.png?alt=media&token=8d929990-5d90-4c0c-8217-bc0ddbc88e89","id":"7e253a63-ff71-4223-8d38-cb8cfd330173","width":1084,"height":488,"filename":"skilltally typography.png","type":"image/png","caption":"Typeface","border":false}]}
```

### **Visual Design ✨**

### **Main landing page**

For the landing page design, my focus was to create a visually appealing and user-friendly experience. To ensure a seamless user experience, I designed the page with mobile responsiveness in mind. I wanted to create a modern and minimalistic look that would be both aesthetically pleasing and easy to navigate.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2Fa32d53e5-7eb4-4458-955e-85fcf64e06fe.png?alt=media&token=63ca7017-92f6-4690-a002-eaf633e1d83d","id":"a32d53e5-7eb4-4458-955e-85fcf64e06fe","width":1600,"height":3728,"filename":"Landing page visual-p-1600.png","type":"image/png","caption":"","border":false}]}
```

All of these design components worked together to create an inviting and easy-to-navigate landing page.

### **Product pages**

For the product pages, I refined the design and made sure it was intuitive and met the needs of the target audience. The final result was a landing page that was not only beautiful but also provided a seamless user experience.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2Fb584d3bc-0121-4706-a0db-2a13481a1698.png?alt=media&token=7141611a-db87-4bff-9878-d3c298ba669a","id":"b584d3bc-0121-4706-a0db-2a13481a1698","width":1600,"height":1712,"filename":"product page visual-p-1600.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%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2Fc59932b2-313c-4e30-80e8-543d482e15cc.mp4?alt=media&token=e1fe7638-b46e-436c-8d79-6f4ff457ff5a","id":"c59932b2-313c-4e30-80e8-543d482e15cc","width":1080,"height":616,"filename":"SkillTally_-Landing-page_-Device---Macbook-Pro (1).mp4","type":"video/mp4","caption":"Animation in Questions section working on-scroll","border":false}]}
```

### **A glimpse of all product pages**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2F7a87d437-6cb0-48d8-970f-972023822ee9.png?alt=media&token=cba63432-1be5-400c-b3ee-b3b24bb0951b","id":"7a87d437-6cb0-48d8-970f-972023822ee9","width":960,"height":1710,"filename":"Students_1.png","type":"image/png","caption":"Students","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2Fb150f6e6-dabc-403f-932a-6d116958c7cb.png?alt=media&token=237ed1e8-ba7c-4b3b-bd6c-458fb8cddb92","id":"b150f6e6-dabc-403f-932a-6d116958c7cb","width":960,"height":1767,"filename":"Educational institutions_2.png","type":"image/png","caption":"Educational Institutions","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2F5ac3c084-3e26-4050-8c08-10575053b0d2.png?alt=media&token=f27e0594-6c51-45f7-8619-954baca82c1b","id":"5ac3c084-3e26-4050-8c08-10575053b0d2","width":960,"height":1698,"filename":"Recuiters_3.png","type":"image/png","caption":"Recruiters","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2F26c05d3b-e39b-49db-8748-323debbc3e92.png?alt=media&token=3296295b-eea6-4171-87b9-d10f42e302cb","id":"26c05d3b-e39b-49db-8748-323debbc3e92","width":960,"height":1818,"filename":"Enterprises_4.png","type":"image/png","caption":"Enterprises","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2F953d23bd-4716-4adf-9df0-58a148a078c0.png?alt=media&token=386fb5d1-afbc-415b-a74e-9a49494e8155","id":"953d23bd-4716-4adf-9df0-58a148a078c0","width":960,"height":1744,"filename":"Professionals_5.png","type":"image/png","caption":"professionals","border":false}]}
```

### **Other pages**

In addition to the landing page, I also designed several other crucial pages for the website, including the Contact Us, FAQ, Legal, and Navbar/Menu.\
The **Contact Us page** was designed with a clear and simple form that makes it easy for users to reach out to the company with any questions or concerns.\
The **FAQ page** provides answers to common questions in an organized and accessible manner, making it easier for any type of user to find the information they need quickly.\
The **About Us page** serves as the landing page for the careers page and provides an overview of the company's mission, values, and goals. It also includes information about the team, mission, and vision, allowing visitors to learn more about the company and its offerings. By having a thorough and accessible About Us page, users can easily navigate to the Careers page and find out about potential job opportunities in SkillTally.\
The **Legal pages** include all necessary legal information and terms of service, ensuring that the website is fully compliant with regulations. Overall, these pages are an essential part of the website and play a critical role in providing a seamless and enjoyable user experience.

I also designed the mobile versions of these pages. Given the increasing number of users who access websites on their mobile devices, it was crucial to ensure that these pages provided a seamless and optimized experience on smaller screens.\
The figma mobile app helped me a lot to visualize how the website would look on a mobile screen.\
I refined the design and made sure that the mobile pages provided the same level of functionality and user experience as their desktop counterparts. The final result was a mobile-optimized website that provided a seamless and enjoyable experience for users, regardless of the device they used to access the site.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2Ff8cfcee5-ddfd-4d8c-a312-75a5d9973e99.mp4?alt=media&token=0bacdd49-e07c-4f97-b01b-d78eac133067","id":"f8cfcee5-ddfd-4d8c-a312-75a5d9973e99","width":800,"height":600,"filename":"SkillTally-mobile-showcase-1.mp4","type":"video/mp4","caption":"The landing page and other pages in mobile view","border":false}]}
```

### **Juicy Behind The Scenes**

In the process of designing the pages for the website, I received extensive feedback from various stakeholders, including users, engineers, business owner, and other designers. This feedback was critical in shaping the final designs and ensuring that the pages met the needs and expectations of all parties involved. I took the feedback into account and made several iterations to the designs, incorporating changes based on the suggestions and critiques received.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F7WHg89TRWgcAjopFWpm46AQZ84H3%2FuGTra07pecMc6IOJsXx6%2Fad7957eb-60d7-4742-b85b-f6beba98df67.png?alt=media&token=aab3fa90-e967-4940-a552-1b91718057da","id":"ad7957eb-60d7-4742-b85b-f6beba98df67","width":1309,"height":667,"filename":"comments in a figma file.png","type":"image/png","caption":"Aerial view of the desktop-v2 page in figma filled with comments to work on or feel proud of","border":false}]}
```

## **Delivery**

### **Prototype 🌈**

All UI screens are prototyped within **Figma**. We also used **Zeplin** to deploy design assets and screens as developers were comfortable with that tool.

```cv
figma
{"url":"https://www.figma.com/proto/MgHZqqs1QTLZQLAJauetea/SkillTally%3A-Landing-page?page-id=772%3A1542&type=design&node-id=772-1543&viewport=361%2C267%2C0.03&scaling=scale-down&starting-point-node-id=772%3A1543"}
```

### **Learnings & Takeaways ✍️**

* Through this project, I learned the critical importance of **adhering to deadlines** and how to structure my work well. Without clear deadlines, it could have taken much longer. So I broke down the task into manageable parts, made checklists ✅, and worked on them in order to achieve completion before the due date.

* I learned the art of receiving **feedback** from left right & center and using it to make iterations and improve designs.

* I learned how to design landing pages effectively and use visual design skills to engage with the user and grab his attention to inform him/her about us.

I had a great time working on this project, as it let me hone my skills in designing a visual style that accurately reflects the brand identity.

> SkillTally® and measure to lead® are registered trademarks

SkillTally Landing Page Design

UX designer

Most Polished Gameplay

Error 409: The Portable Phygital Game Based on Binary to Decimal Number Conversion, won the "Most Polished Gameplay" award in the Student Game Design Competition at the ACM SIGCHI Annual Symposium on Computer-Human Interaction in Play (CHI PLAY), held in Finland from October 14-17, 2024.

Winner of Ode2Code 2.0 Hackathon

Best Artwork Installation

We presented STARMAZE: A cross platform VR game at IndiaHCI 2024 and won the best artwork installation award.

Designed a product experience for pharmacists to keep an easy check of the medicine inventory and also speed up the process of managing it.

This is the story of how I won Ode2Code hackathon where I designed and engineered a product that would help Vendors working in Mi Stores 🏪 to easily create bills 💵, check their sales history and view their analytics, i.e. a useful and usable POS software.

Worked on designing the landing page and created the design system for a product that aims to test your skills and give you constructive results which will help you build your skills.

Landing Page Design

BuiLD is a rigorous framework that empowers designers to elevate their skills in the realm of user interface design.

BuiLD 1.0 UI Design Challenge

I have attempted to design a solution to help old people use fitness trackers and smartwatches efficiently and gain as much benefit from them as possible.

Gerofit - Interaction design of a Voice assistant for a Smartwatch

Designer

Design Head

Designed the landing page and its related pages of an Early-stage EdTech startup that believes in testing & measuring your skills to improve your work or learnings. Gained some experience in brand design and creating design systems.

Digital Product Design Intern

- I was the founding designer at Engineer s Cradle.
- Started building a design system from scratch and later governed it
- Recruited designers & managed them
- Led a workshop on design systems in Figma
- Gave a talk at the organization's very first online event about UI/UX design

Designed and engineered various parts of a supplier resource management SAAS product.

Hayat Tamboli

2023