ClearServe

Role

Wireframing, Design, Copywriting, Illustration, Development

Tools

Paper, Photoshop, Sublime Text, Illustrator, HTML, CSS, JavaScript, jQuery

Date

August 2013 - March 2015

Brief

On my first day at ClearServe I was presented with an ugly and uninformative WordPress site that had been thrown up by the CEO. It was my task to completely redesign and develop a new website for the company. I began by sketching some ideas on paper, before creating some mocks in Photoshop. I reviewed the mocks with the entire company, which was then a team of 6 including myself. We worked out the copy for each section and went through the design page by page. I then took to sublime using HTML, CSS, and JavaScript to implement the designs. Minor maintenance has been done since then.

At ClearServe, I was the lead designer of all things product, marketing, and branding from concept to implementation. I took my designs to the next level by developing them using HTML, CSS, JavaScript, and AngularJS for our public and private applications.

Video Storyboard

After a year of working at ClearServe, we still had no video to tell investors or clients who we are and what we do. Brand awareness was small and as we were looking to expand our client list, I took it upon myself to create a video as part of our branding and marketing strategy. I began researching similar companies and other startups for their intro videos to get a better idea of the kinds of information they presented. I collected a list of links with notes about what aspects of each I liked or disliked (like the voiceover tone and emotion, animations, background music / side effects, etc), and which I thought presented the information the best.

After sufficient research, I came up with a script highlighting some of the benefits and unique features ClearServe has to offer. As I drafted the script, I thought about various ways to visualize it. I laid the script out in a logical order that would be easy to translate to a video with corresponding animations. Using a shared Google Doc, I reviewed and tailored the script with the help of my team.

Once the script was finalized, I began drafting high-level sketches, creating a mini-story board with multiple "slides" per page. Once I reviewed these with my colleague, I transitioned to sketching out a more detailed story board page by page.

After reviewing with the team, I worked with a more seasoned animator to bring the storyboards to life. I provided extensive notes about transitions, colors, fonts, styles, and more.

Dashboard Design

One project for ClearServe included designing a dashboard for the application. I began by gathering information about what made sense to be displayed on the dashboard by speaking with our product specialist and using informal feedback from existing beta clients.

I then turned to pen and paper to sketch some ideas.

After my team lead and I had signed off on the sketches, I turned to Photoshop to bring the sketches to life and to make sure there were no use cases that I had overlooked during the sketching phase. I worked with the product specialist throughout the process to come up with user stories and to get more information on how the client may use the dashboard.

Once the designed mocks had been reviewed by the team, I was tasked with developing the dashboard using HTML, CSS, JavaScript, and AngularJS.