Design and Developing a responsive PWA website using Nuxt.js, Vuetify, and Firebase for Google Developer Student Clubs (GDSC) NIT Rourkela.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FEed6QOWSNWVtYTTdY7y7%2Fa4f30708-b18c-46fa-98ed-4e68935a5a2e.png?alt=media&token=c627cc6f-606c-4f4a-8170-d7577c172da1","id":"a4f30708-b18c-46fa-98ed-4e68935a5a2e","width":4376,"height":2189,"filename":"DSC_cover.png","type":"image/png","caption":"","border":false}]}
```

---

## About

I worked on the project Huckleberry during my tenure at Google Developer Student Clubs - NIT Rourkela (GDSC NITR). Project Huckleberry is rebuilding the DSC website from Scratch.

I made the website fully responsive and added PWA features with the help of Nuxt.js

---

## Stacks

1. **Nuxt.js** - Built on top of Vue.js, gave me a perfect place to start my project and made it easier along the way

2. **Vuetify** - The component library and customizable style guide made it easier to style the pages. Though I stuck to SASS on the interaction part

3. **Firebase** - Lifesaver for a designer on back-end stuff

---

## Post Script

The project is still in the development phase and I've done only the design and front-end code for the website.

You could have a look at the project live at [huckleberry.netlify.app](https://huckleberry.netlify.app)

Project Huckleberry

Designing responsive interfaces for a one-stop destination booking platform.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FaDMZv9dd4menOYGoZXAZ%2F3f5441fc-d498-41dd-b9fb-4867965dba0a.png?alt=media&token=6cc74e40-53ff-4f30-a2ae-8e268b541613","id":"3f5441fc-d498-41dd-b9fb-4867965dba0a","width":2000,"height":1500,"filename":"DribbbleShot.png","type":"image/png","caption":"","border":false}]}
```

---

## The Challenge of Planning a Trip

Trip planning can become cumbersome right from the first step of choosing the right destination, surfing sites to book flights, hotels, etc., with staying within budget.

A ton of tabs open, one reading reviews, another comparing, then maps and nearby locations, plus a bunch of alternate websites, and a lot.

## Surfination's Objective

To design a trip planning responsive website that lets users have a **visual map of their journey**, **customize their trip** based on their needs, and will be a one-stop platform to surf, compare, customize, book, and review.

---

**P R O C E S S**

## User Research

To understand the struggles user regularly faces on the travel and booking platform, I headed to their platforms and Trustpilot to hear some user stories[Trustpilot](https://www.trustpilot.com/) to hear stories from users. I read most of the reviews to understand how and why a platform made the best trip and the worst nightmare.

My compilation of everyday struggles user faces on the platforms.

1. **Cluttered Interface**

2. **Sponsored Content**

3. **Transparency Issues**

4. **Lack of Visual Geo Map**

5. **Non-Customizable Trips**

## User Story & Persona

I created two user stories and personas to get into the user’s shoes and understand their pain points and expectations.

### Aravind Adiga

As a Sales Executive traveling to different places frequently, I want to compare and book flights, hotels, etc., on a single platform, so I don’t waste time navigating between websites.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FaDMZv9dd4menOYGoZXAZ%2Fd8269b19-68c3-4dc9-b287-86c12696db2a.png?alt=media&token=53bde86a-3ac1-471d-b492-47657232b767","id":"d8269b19-68c3-4dc9-b287-86c12696db2a","width":842,"height":595,"filename":"AravindAdiga - Persona.png","type":"image/png","caption":"","border":false}]}
```

### Arundhati Roy

As a Travel blogger traveling across the country, I want to find the best stays with transparent reviews and customizable trips so that I don’t miss a place and have 100% enjoyment.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FaDMZv9dd4menOYGoZXAZ%2F061c2981-2c0f-4412-bfcb-67edf54dbf28.png?alt=media&token=7b2cdb68-e58f-4e15-b7fb-04878af0d790","id":"061c2981-2c0f-4412-bfcb-67edf54dbf28","width":842,"height":595,"filename":"ArundhatiRoy- Persona.png","type":"image/png","caption":"","border":false}]}
```

## User Journey Maps

The personas go through various phases and actions and experience many difficulties, which are our potential to understand user pain points and improve the experience.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FaDMZv9dd4menOYGoZXAZ%2Ff4220694-508a-40b3-916e-170cc015ce9e.png?alt=media&token=63933fa7-11e1-415a-95e3-4883376f1346","id":"f4220694-508a-40b3-916e-170cc015ce9e","width":1920,"height":1080,"filename":"UserJourneyMap.png","type":"image/png","caption":"","border":false}]}
```

## Competitive Analysis

Before moving on further, let’s look at what our competitors provide to hold on to users. Where they excel and where they lack can help our product stand above all.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FaDMZv9dd4menOYGoZXAZ%2F805a610e-5f0d-46a5-8023-f6ea4aaaceac.png?alt=media&token=a4da6446-10e2-466a-ac6c-5cb0777768a8","id":"805a610e-5f0d-46a5-8023-f6ea4aaaceac","width":1920,"height":1080,"filename":"CompetitiveAnalysis.png","type":"image/png","caption":"","border":false}]}
```

## Sitemap

To start with, Our application gives the user a one-stop solution for flights, hotels, trips, and adventure booking. They can compare hotels, customize trips, read or add reviews and find a visual geo-map listing places included, nearby areas, and so on.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FaDMZv9dd4menOYGoZXAZ%2F5c72a9cb-287c-4d01-849c-c1fe68c37fd4.png?alt=media&token=b566e0b3-e287-4e4d-bb5a-65e6e83dbb68","id":"5c72a9cb-287c-4d01-849c-c1fe68c37fd4","width":1400,"height":1080,"filename":"Sitemap.png","type":"image/png","caption":"","border":false}]}
```

## Wireframes

I started sketching some quick wireframes on paper to clarify my idea and then made some digital wireframes of the app and its features of customizing trips, transparency in details, prices, and services, along with a geo map with all included and nearby places.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FaDMZv9dd4menOYGoZXAZ%2F86191a8f-3a35-49a4-8783-6fdb5c3db5af.png?alt=media&token=4f7b8993-86cf-4a44-9104-00e6d446f55b","id":"86191a8f-3a35-49a4-8783-6fdb5c3db5af","width":1600,"height":800,"filename":"DigitalWireframes.png","type":"image/png","caption":"","border":false}]}
```

## High Fidelity Mockups

Then I moved to Figma and designed components for cards that displayed details for hotels, adventure trips, packages, and reviews. Chose my font, colors, and grid for a consistent design. And also the screen sizes I’ll be working on for responsiveness.

```cv
figma
{"url":"https://www.figma.com/file/uGtsomamVTsIVwQ2d4ruDV/Surfination?node-id=1%3A22941&t=kLFrMx3lc9qYfXXE-1"}
```

---

**C O N C L U S I O N**

## Impact

Surfination lets users quickly surf through nearby destinations with hotels, trips, and packages. Users can compare their favorite hotels and customize their preferred trip times. You can visualize what else can be explored without switching tabs while being 100% transparent to our users regarding the prices, details, and reviews.

## Next Steps

I want to work on building the checkout process and make it smoother and more superficial by providing the users with multiple payment methods, a clean interface, and wallet and pay later features—a built-in community for travel enthusiasts to help each other in traveling around the city.

## Outro

So happy to see you reach the end. I hope you enjoyed my project. Feel free to leave a comment or add a suggestion or feedback that would be helpful.

Reach me at [manikandan9206@gmail.com](http://mailto:manikandan9206@gmail.com)

Please watch out for the entire project at [Behance](https://www.behance.net/manikandan9206), [Portfolio](https://dub.sh/m9206).

Project Surfination

Habidoo is a concept app designed to track habits and analyze progress.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FnLelBzlUZpRGhnJ1bjqV%2Fc0fd820d-5833-4b7a-a831-d1b2c2e6e0bc.png?alt=media&token=3a15f360-9084-47ba-9d9b-4a84fbcbe5d0","id":"c0fd820d-5833-4b7a-a831-d1b2c2e6e0bc","width":2800,"height":2100,"filename":"dribbble 2.1.png","type":"image/png","caption":"","border":false}]}
```

---

TEAM: Manikandan   \
ROLE: Product designer   \
DURATION: Nov 2022 - Feb 2023   \
TOOLS: Figma, Notion, Tokens Studio, ProtoPie

## **Objective**

Habidoo - the ultimate habit-tracking app has been designed specifically to meet your habit-tracking needs, which offers a clean and minimalistic design with maximum customization and ease of use. Keep track of your progress with my weekly and monthly timelines, insightful statistics, and progress tracking. Intuitive user experience, combined with a host of advanced features, makes it the perfect tool to help you achieve your personal growth goals.

## It all started with ...

If **atomic habits** by James Clear taught us one thing right up front, It’s about habits and how small life improvements today can have a drastic impact tomorrow. At first, I wanted to do my habit-tracking in Notion somehow, but it’s mere checkboxes. I wanted something more personalized. This motivated me to design my own, which would be a great addition to my portfolio, and also I could learn to use design tokens and design systems in depth.

## A peek at our competitors' screen

To gain a thorough understanding of how Habidoo could stand out from the competition, I did a competitive analysis of other habit-tracking apps in the market. I asked myself: What do the competitors do? Where do they stand? USPs, and how Habidoo can stand out from them. I present here quick takeaways,

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FnLelBzlUZpRGhnJ1bjqV%2F3671b4d9-91d4-466e-9861-8b17b31dd57b.png?alt=media&token=b50ff74f-370f-4083-9f4b-7a55baf0be66","id":"3671b4d9-91d4-466e-9861-8b17b31dd57b","width":1400,"height":909,"filename":"Competitive Analysis.png","type":"image/png","caption":"Competitive analysis and key takeaways","border":false}]}
```

## The process

1. **Definition** (problem or challenge)

2. **Ideation** (sticking to objective, user research, brainstorming solution)

3. **Paper wireframes** (scribbles and rough sketches of my ideas on app screens and functionalities)

4. **Low-fi mockups** (without going too much deeper into the colors, styles, and interactions, I try out perfecting the spacing, typo, visuals, and a few UI elements)

5. **High-fi mockups** (this is where the final mockups are made, which strictly follow the design system and design tokens where all the values for spacing, sizing, typo, colors, etc. are defined, Fully responsive, prototypes, etc. are taken care of)

### First draft and why it doesn't work

Here’s what I expect from an ideal habit-tracking app,

* Habit, name, progress, and streaks (because that’s what get people motivated)

* Header, showing brand logo, hamburger menu, and profile or settings.

* A block for navigating through time -either day-wise or week-wise.

After some scribbles and sketches, this is what I get, putting together the above data into a clean design. **But that doesn't work!**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FnLelBzlUZpRGhnJ1bjqV%2F7c2de400-0761-4747-9f6d-8d07d0606fe6.png?alt=media&token=2e37db68-7962-4093-a420-056be2d43abb","id":"7c2de400-0761-4747-9f6d-8d07d0606fe6","width":1400,"height":846,"filename":"first draft and why it doesn't work.png","type":"image/png","caption":"First draft and why it doesn't work","border":false}]}
```

### Improved design with functionalities

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FnLelBzlUZpRGhnJ1bjqV%2Fe2558f49-74d4-492e-b8a1-e4e5b0778428.png?alt=media&token=d560534e-c409-4a76-a4f7-1ba514a1bf0e","id":"e2558f49-74d4-492e-b8a1-e4e5b0778428","width":1400,"height":975,"filename":"updated first draft.png","type":"image/png","caption":"Updated screens and functionalities","border":false}]}
```

### Should habits be skippable?

* Personally speaking, I don’t want to make habits skippable.

* A habit is skipped meaning it’s been failed on that particular day. And the streak is broken. Whatever circumstance it may be, fail is a fail. A skip option brings in more excuses.

* In case users need the option to skip, who’s going to ask? Mark it as done instead, so the streaks don’t get broken too.

## Low-fidelity mockups

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FnLelBzlUZpRGhnJ1bjqV%2Fc3190380-9272-49bb-9785-77aacd9409d2.png?alt=media&token=cf0833a8-2452-4ba2-9382-cffd50990e42","id":"c3190380-9272-49bb-9785-77aacd9409d2","width":1400,"height":1024,"filename":"low fi mockups.png","type":"image/png","caption":"Low fidelity mockups","border":false}]}
```

## Branding

I began with some suggestions from AI, but I needed more names to be more satisfactory. After some iterations, Habidoo was born; Habit + do ⇒ Habidoo. And I thought the “doo” is fantastic and conveys the core of the application, to do (habits).

The logo also took a lot of iterations. Having three circles, two filled (habit is done), and one stroke (pending habit) makes it perfectly match with the name if the first circle is modified to look like 'D' - DOO from Habi**doo.**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FnLelBzlUZpRGhnJ1bjqV%2Ff357a577-2895-4566-b9d7-e6dc90306f3c.png?alt=media&token=56beb6f9-4882-4797-ade3-88a3aa8be294","id":"f357a577-2895-4566-b9d7-e6dc90306f3c","width":1400,"height":870,"filename":"Frame 64.png","type":"image/png","caption":"Evolution of Habidoo's logo","border":false}]}
```

## Design Tokens

If atoms are the basic elements that fuse to form relatively complex organisms, Design tokens are considered quarks that combine to form an atom. Consider Buttons as an atom in a design system. Then the properties that describe its color, typo, spacing, sizing, radius, etc., would be tokenized and saved as design tokens. This defines an atom and its properties, making it easier in future works.

In this project, I used three tiers of tokens.

1. **Base token:** contains raw values\
   `_hue.blue: 241, and blue.50: hsl($_hue.blue, 84%, 54%)`

2. **Component token:** for components referring to base tokens\
   `button.fg: $color.primary, or button.bg: $blue.10`

3. **State token:** accounts for different states\
   `button.active.bg: $blue.20`

## Design System

### Spacing and Sizing

I used the 8x scale, where the default is set to 8px, and progressively increased - 8px, 16px, 24px, 32px, 40px, 56px, 64px, 80px. The same is tokenized in tokens studio as follows,

`base_size: 8px,`\
`size.1x: 8px, size.2x: 16px,`\
`_button.size.sm: $size.4x`

### Color

I spent the maximum time here deciding on the palette and finding the colors that work perfectly—playing with saturation and lightness so that every color fits into the screens—then tokenized and synced into the design system.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FnLelBzlUZpRGhnJ1bjqV%2F652898b0-21d5-4e92-a221-d14045b5e642.png?alt=media&token=b6563044-bebf-4316-be5d-08455212c0f8","id":"652898b0-21d5-4e92-a221-d14045b5e642","width":1400,"height":728,"filename":"Color.png","type":"image/png","caption":"Tokenized color palette","border":false}]}
```

### Typography

Inter is chosen for its minimal, legible, and flexible characters, even at smaller sizes. Inter is also web-optimized, ensuring smooth UX. Six styles have been used - large, h1, h2, h3, body, and small- and two weights- regular and bold.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FnLelBzlUZpRGhnJ1bjqV%2Fc13492f4-73df-48ac-bb80-ca6a2c89805e.png?alt=media&token=6c6dff14-e1dd-462f-9436-36aa7ab27c2b","id":"c13492f4-73df-48ac-bb80-ca6a2c89805e","width":1400,"height":378,"filename":"Typo.png","type":"image/png","caption":"Typography styles","border":false}]}
```

### Iconography

Thanks to [ionic.io](http://ionic.io/ionicons) for their libraries of free icons. The stroke version of the icons has been used for its ample breathing space. Each icon is componentized based on size (16px, 24px, 32px) and color (primary, secondary, and foreground).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FnLelBzlUZpRGhnJ1bjqV%2F1a242643-fb09-4efe-a22e-6ec1d8c140e6.png?alt=media&token=9e018c63-7e95-4842-bee5-7de1ab9c1245","id":"1a242643-fb09-4efe-a22e-6ec1d8c140e6","width":1400,"height":400,"filename":"Icono.png","type":"image/png","caption":"Iconography","border":false}]}
```

### UI Components

All the atoms - buttons, navigation bars, modals, lists, toggles, form elements, etc. are made and componentized for every possible variant. For elements like buttons that contain a lot (144) of variants in themselves, a base button component is created based on different sizes and then turned into the main button component. In this way, it's easier to maintain changes.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FnLelBzlUZpRGhnJ1bjqV%2Fc4ea2a49-4565-42fc-a379-5058042fdccf.png?alt=media&token=fdb8eb5d-3165-4769-9daa-8e9232acb695","id":"c4ea2a49-4565-42fc-a379-5058042fdccf","width":1400,"height":596,"filename":"UI Elements (1).png","type":"image/png","caption":"UI Elements","border":false}]}
```

## High Fidelity Mockups

Now that the design system is set up, it's just a jigsaw game of fitting pieces right into the frames. All the edge cases are designed in the mockup phase. Here is a glimpse of some of the screens.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F8YwrAUzNYxgRxah8p4WyGWrVTfA3%2FnLelBzlUZpRGhnJ1bjqV%2F0d167b72-7e18-4ab4-b88c-e358b9b7a795.png?alt=media&token=e991b3a6-675c-4373-aca2-66f9c25cf915","id":"0d167b72-7e18-4ab4-b88c-e358b9b7a795","width":1400,"height":2640,"filename":"High fi mockups (1).png","type":"image/png","caption":"High fidelity mockups","border":false}]}
```

```cv
figma
{"url":"https://www.figma.com/file/mAJfVnwEkCToPTQxYcj7uO/Habidoo?node-id=1058%3A14958&t=sYIdjLoI83BpTuFn-1"}
```

## Conclusion

### Impact

Habidoo will be the ultimate habit-tracking application that makes you better every day. Analyzing habits and working to improve on them is now made easier via Habidoo's statistics page. Clean and minimal design, maximum customization, and ease of use with multiple timelines and views make it the perfect tool to grow in your personal life.

### Next Steps

I want to work on the prototypes for the application in ProtoPie and master the new software. Also, I would like to add a challenges feature that lets anyone take up a challenge and compete with the world in building habits.

### Outro

So happy to see you reach the end. I hope you enjoyed my project. Please leave a comment or add a suggestion, or a piece of feedback would be beneficial.

Reach me at [manikandan9206@gmail.com](http://mailto:manikandan9206@gmail.com/)

Please watch out for the entire project at [Behance](https://www.behance.net/manikandan9206), [Portfolio](https://dub.sh/m9206).

Project Habidoo

Perfecting Pixels & Discovering Dimensions, Enthusiastically.