the-captain-william / marketing-page-for-taniti-island

Taniti Prototype Page for WGU

Link to Site 👇🏻

👉🏻 Click here to see the live site deployed on GitHub. 👈🏻

✔ The site is responsive and can handle different screen sizes.

More Links:

Click here to see a PDF breakdown of market research and UI/UX feedback.

Click here to be directed to a collection of low fidelity designs I created in Figma.

Details:

What this repo is about, and how it was made

This is a mockup/prototype website for a faux island known as the island of Taniti. I created the prototype strictly with HTML, CSS, and JS written by myself. The only other addition was an accordion from Bootstrap and some boilerplate from Tailwind.
I did not use Tailwind, other than to use some of the boilerplate that is generated when you create a new project.

Reasoning behind my choices

• 🤔 At the time I started this project, I was still getting the ropes of Tailwind and found it easier and faster to produce the CSS from scratch, but still liked some of the Tailwind defaults.
  
• 🚀 I prefer to use low-fidelity mockups and jump right into programming to get a feel for what looks good if a design is not handed to me, this allows me to get the initial MVP out faster and iterate faster.
  
• ⚙ I also created custom classes in JavaScript to handle the interactivity of the photo galleries you will find on some of the pages, and the header navigation.

Market Research and UI / UX testing

In addition, I also created:

• A PDF explaining the ideal persona (if you're in sales, you might know them as 'avatars') that this site is tailored to market to including but not limited to:
  • age
  • income
  • lifestyle
  • needs & wants (pain points)
• A collection of feedback based on my initial designs
• A list of features for users to test
• The original low-fidelity mockup files created in Figma
• A Flowchart of the site

Lessons Learned

• Stick to SASS or use Tailwind, Writing all this CSS took a huge amount of time lol.
• I improved my skills with the grid display, which at the time was a sticking point for me.