myCohost Saas

Originally built on Bubble. The current stage is building out segments in Microsoft Visual Studio Code and then copying them over to Dittofi.

Desktop and mobile homepage for myCohost.

Overview

Performance, accessibility, portabilty, and cost are top of mind for projects that I like to work on. With that in mind I'm moving myCohost from Bubble to Dittofi.

Introduction

MyCohost is a passion project for me. I have two short-term rentals in the same building. Individuals own most Short-term rentals. This first phase adds the house manual and local recommendations to a web app for guests to use when out and about. It also allows hosts to easily update the house manual, add or update recommendations, and have a landing page of the listing.

Research

Having been a host since 2011 I started with what I know my guests have asked for or had trouble with. I then started asking several friends that also have STRs to find out what their guests are looking for and what they would like to be easier to manage. I then put together a features scope.

Feature scope in an Airtable. Consistes of feature, which version to include in, and which audience needs it.
Feature scope

From there I did a competitive analysis of existing apps. The pricing that people are charging for way more features was a little disheartening.

Competitive analysis in Airtable. Name of comeptitor, url, features, and pricing.
Competitive analysis

From there I like to put together what the initial user flows would look like. This gives me initial thought on the required data.

Initial users flows in Figjam. This includes initial thoughts on data required.
User flows

Personas & User Study

Design Guidelines

The landing page is used to give information to potential clients and give them an idea of what they can expect.

Landing page mockup featuring hero, features, testimonial, prcing, and call-to-action sections.
Figma design file of the landing page.

The home page is the landing page for the host's listing. This gives the guest a welcome to the property along with links to the house manual and recommendations of what to see or do in the area.

The listing landing page featuring hero, testimonial, amenities, gallery, recommendations, and map.
Figma file of the listing landing page.

The house manual consists of categories and items within the category. Each item can be text only or with a photograph or video. This allows the host to easily update based on changing amenities, local laws, or prior guest feedback.

Wirefram of the house manual by category then item. Each item has an image or video where appropriate.
Figma wireframe of the house manual for the listing.

Guests sometimes ask me for my top recommendations of what to see in the area. The local guide will allow the host to easily update their recommendations based on what they have experienced.

Local recommendations wire frame with a category menu and search on the side of the results.
Figma wireframe of the local guide for the listing.

The admin area allows the app admin to manage users as well as any support needs.

Admin dashboard for customer managment and support.
Admin section wireframe.

Development

The next step in the process for this project was to design the database.

Database design in Figjam.
Database design

From here I then start building. First is to build the frontend in Microsoft's Visual Studio. This allows me to run some tests for performance, accessibility, and technical SEO. I rerun the tests after copying into DIttofi. This allows me to tweak where necessry for the best performance.

Final Product

Key Takeaways

Results