Basix Student Devblog, day one

This is part one in a series. For the next post, click here.

Hello, and welcome to the devblog for the Basix Student site redesign! My name is Andy, I’m a New York based fullstack web developer, and this is the first blog post following a freelance project that I’ll be working on for the next several weeks. I figure this will be useful for me in the future to look back on my progress and growth as a developer, and might be interesting to other developers looking for an insight into my own process and the things I learn on the way. I’ll include a bunch of links and resources as well as I endlessly research everything under the sun.

Scope

To summarize the scope of the project, basixstudent.com is a website that connects students who have college insurance plans to dentists who offer discounted dental services. Essentially the site both informs users about the program itself and connects them with dentists who participate in the program in their area. This is what it looks like right now:

The site as it stands today.

It’s been online for quite some time (at least so far as the internet is concerned), and we’re looking to improve the site in a few ways:

  1. Give it a visual redesign to look more modern
  2. Refactor the layout to be mobile friendly (this is a student-oriented website after all)
  3. Improve the UX overall so it’s easier to use the service and locate relevant information

This first day has been spent mostly thinking about planning and visual design. I’ve already had a few calls with my client to discuss the scope and work out details, and we’re getting down to the real work today.

Planning

If you don’t already use it, I can highly recommend Trello for planning just about anything. I got married last fall, and let me tell you, that massive orchestration of people, vendors, and events would not have been possible without it! (or my lovely wife’s extraordinary planning abilities 👸🏻)

A selection of Trello cards for the project

I find that once you reach beyond a certain scope for any given web project, the details get pretty overwhelming, especially when working on your own without any teammates or managers to keep you on track, so I’m going with the OCD approach to planning this thing so I can stay coordinated and not get blown away by the details.

Visual Design

So far the visual design planning has been about 20% technical details (mostly concerning layout), and 80% visual aspects (like color palettes).

Concerning the technical side of things, it will be important to keep responsiveness in focus. Up until now I’ve mostly stuck with the Bootstrap grid for responsive layouts, although I’ve wanted to experiment with a responsive Flexbox layout, seeing as it’s 2017 and Flexbox is just too good to ignore. Now is as good a time as any!

My research turned up this excellent demo by Philip Walton on a Flexbox grid layout, so in the spirit of this lovely open source world, I’m stealing it wholesale for my own purposes. Bootstrap itself is designed in such a way that you can pick and choose which parts of the framework you want to include in a project, thereby limiting bloat, but a full responsive grid in just 206 lines of CSS is hard to beat.

So far as the visual aspects are concerned, I’m really starting from scratch. There’s no predetermined color palette or stock photography to speak of, so it’s a clean slate. I must confess that color and design are a bit of a weak point for me, but fortunately I stumbled upon a very comprehensive article on r/webdev this morning: Practical Color Theory for People Who Code, which was an excellent primer on the topic (har har).

That, combined with a couple hours of experimentation with the Paletton color palette builder gave me a good selection of color palettes to work with.

Next Steps

There are many! To summarize just a few of the outstanding things to be done:

  • Set up the project in React to manage components and pages
  • Build a testing suite with Nightwatch and Mocha
  • Finish designing the page layouts
  • Migrate data from the old site to a new database and build out the backend with Node
  • Integrate Google Analytics to track page stats and visits
  • Deploy the site (either on a Digital Ocean server, or possibly AWS)
  • Integrate Mailchimp or another email framework for emailing users
  • Much much more

I’ll be sure to update you as we make progress.

If you’d like to reach out with some thoughts or comments, you can ✉️ me at andyfry01@gmail.com. You can also check out my portfolio and my LinkedIn.

Reference

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.