Fitcode Website

Dec 2014 - Aug 2018
Role: Scrum Master, UX/Web Designer, Front-end Developer

The Fitcode website had gone through a few phases over its lifetime. I had been involved in the website since its launch in 2015 but will focus on the latest iteration as a case study on how I work. Since it was a small team I took on many roles including strategy, UX design, visual design, HTML/CSS code development, and QA work for this project.

Problem

Fitcode’s existing website was a proof of concept for our fit recommendation technology, but our business model had changed. We needed to update the site quickly to focus on bringing in more partnerships.

Process

When our CEO came to us with the need to change our website no one knew exactly what the new site would be or how long it was going to take. I decided to step up and volunteered to lead a series of brainstorm and strategy meetings. Using concepts from the book “The Elements of User Experience” and Agile methodology I sketched out a plan for how to get my team organized.

In the kickoff meeting I had the team mainly focus on three things, what are the business needs for the website, what are the user’s needs, and what does success look like. From the results of the kickoff meeting, I wrote a list of user stories, which led to a list of potential features. Following Agile methodology, I organized a white board with post-it notes representing each feature and hosted the Minimum Viable Product (MVP) meeting. The team reviewed, revised and organized the features, decided what our goals were for a Minimum Viable Product. With this information the team was able to estimate the time needed to build each feature and based our timeline for completion on those estimates.

White board after the planning meeting

I took all this info and wrote scrum tickets for each feature that we agreed to build, filling up the backlog, and making sure all the insights from the meeting were captured and organized to fit into our weekly scrum process.

With the strategy phase complete, I could focus on design. I made a site map and several user flows, noting as I went that the site itself was actually pretty straight forward, so I didn’t dwell on the IA or wireframes very long, just mapped out what I needed to review with the team and answer questions as we went along.

Example of some user flows

Wireframe for the landing page

The bulk of the design work went into coordinating content with our Copywriter / Marketing Director, art directing photoshoots, executing spot illustrations, mocking up drafts to review with the team, and iterating on my designs until final drafts were agreed upon.

A rough draft of the hero image on the partner page showing original photos

Sketches of spot illustrations on the partner page

With the design laid out, I switched gears and started pitching in with the front-end development of the site. I wrote markup and organized the CSS including sitewide, page layout and feature specific styles. I also optimized images according to responsive web methodology and used .svg files wherever I could. Working with the code meant I was able to trouble shoot and resolve any issues related to executing my designs.

As we got closer to launch I transitioned into QA work. I checked features on a range of browsers and devices when they were completed by the dev team, and organized a bug bash where the whole product team pitched in to test the site before launch.

Results

Fitcode was able to pivot and create a website that spoke more directly to potential partners in under 2 months. Here are samples of the final designs that went live.

Desktop design

Landing page

Partner page

Mobile design