Metrics Website & Marketing

About the Project


Title: UX Front End Enginner


Client: Center Centre


Duration: Decmember 2023 - March 2024


Tools: Figma, HTML, CSS, Zapier, Canva, Stripo, MailChimp, Active Camplain, Github, Spiffy, WordPress, Data Base, Notion.


Overview of the clents:
 Center Center is Company ran by Jared Spool who's goal is to educaiton UX Leaders to improve there voice within companys to improve designs.


Abount Metrics:
 Jared Spool hosts intensives, three times a year. These are workshops about different topics related to working in UX: Metrics, Research, and Aglie. Metrics is a one week instenve UX course and also offers a VIP package that includes extra meetings and one on ones with Jared. I was tasked with developing the website for the Metrics Intensive.

Logo of Urban Wizards and phonix over nyc skyline

Early in the Project

Planning

The fellowship has a senoir fellow who manages the set up for this project


He reviewed the emails and pulled the github repo from prior years and started to update the content, we worked with the marketing team to develop the emails that would go to people signing up for the workshop. We also knew during the set up time he would leave and a new fellow would join. I would become the senor member of the team.

Logo of Urban Wizards and phonix over nyc skyline

Automotions

Zappier and Spiffy introgration


Using Zappier to handle the API, Spiffy took the payment, I used Active Campain to make the automations for payments, ran testing to insure people would be placed on the proper lists after they bought their regrations.

Logo of Urban Wizards and phonix over nyc skyline

Branding

VIP is out PTL is in


The first drafts VIP was used, after the first were designed and developed, VIP was changed to Prepare to Lead. Emails, websites, automtions, imgages had to be change to the new branding.

The Website

HTML

CSS file



Center Centre is a detailed design but I found issues that aren't good for accessiblity. With limited time I had to pick what to updated.

Buttons



A div isn't a button, its a div and should be used limitly when no other html choices are aviable. I updated the html to have buttons then updated the CSS to remove the inhered proporities from the button

Text



Jared has a lot to say and is always changing and updating his programs. Metrics is no diffent from changing vip ot PTL from package to program. Many different branding consenties would need to be updated by the December 11th launch target.

The Date was missed.



The text wasn't updated, and the senor fellow was leaving at the end of the week. The following monday I would be encharge of training the new fellow.

December 18



The landing page google doc was given to me at 11 am on the December 18 that included style changes that included changes to the text, and the layout of the page. I was able to translate the 19 page google doc into HTML for the website. I finished the site not by 3 pm, but by the 3 am and invloded a merge conflect.

Now onto WordPress

WordPress

WordPress



The code for the landing page was is developed in HTML, however the payment is hosted on wordpressed. witht eh changes to the branding the PTL page needed a rewrite to match the new laugune used for this program. The content was updated and tested for the lauch while I was also actively training the new fellow to take over emails.

Building a custom Theme in wordpress



Center Centre updates there branding for every Workshop, which ment the templates needed to updated to match the new theme.

Figma To Code

When I started this project the content hadn't been writen just the figma file had been designed so some content was changed and revised as the site was live.

Figma Mock-up

Final Site

Its' alive!

* Note: Now it's not, but you can view the placehold information site I also build here

Final Thoughts

I learned alot during this project, alot of last min updates to the site such as went we sold out of our VIP packages, and the button had to be replaced with a sold out. I also spent alot of time updating the CSS file that has been passed down from web dev to web dev with very little documation explain what does what inside the file. I would like to work on more projects like this and keep growing as a design who likes to design in CSS.