SOFTWARE AS A SERVICE

THE CONCEPT

A start-up, SaaS (Software as a Service) web application focused on user sign ups and creating accounts, making simple content pages, and providing a way to collaborate with others within their organization. My role on this project was the Visual Design, Identity / Brand Design, Editorial Design and Front-End Development. The tools in which I used on this project were Illustrator, Photoshop, Skeleton Framework, Sublime2 and Github. The technologies used were HTML5, CSS3 , Responsive and Jquery.

VISION

In order to come up with Jottly’s solution I needed to research and see what other “writing collaboration tools” existed on the market. To my surprise there where a lot (ie: Penflip, Draft, Editorially and Zapier). Based on my research I noticed that young college students and like minded businesses appealed to vibrant striking colors. It was understood that Jottly was a collaboration tool and I thought where do a lot of todays young business people collaborate..., at coffee houses or eaterys. This helped channel the story of Jottly - Your Ideas shared everywhere. Once I had that idea I then decided to focus on Jottlys featured benefits as tiers.

CHALLENGES

On the surface the client's brief seemed rather easy - create a logo and landing page for the brand new startup, Jott.ly. However when digging deeper into their needs I found that Jott.ly was looking to appeal to young college students, individuals and young like minded businesses. Who have needs for a writing collaboration tool. They wanted this app to have clean lines, open space, bold friendly typography and calming colors. Like every great project I work on, I set out to explore the different ideas that come to mind first. In doing so I wanted to explore Jottly’s logo and iconography in its most naturalist form. Hand and pen. Here I learn no idea is wrong, yet learn what works best.

STYLE TILE

There were many concepts that came about during the hand-sketch/low fidelity process. I narrowed my focus to the best three concepts that worked best for Jottly. I then refined those concepts even more so I could bring it before my senior designer to get feedback. From there the logo and iconography was chosen. Choosing typography can sometime be based on a feeling or a look. Or other times it can be deliberate. In the case of Jottly it was a little of both. Railway and Open Sans both Google fonts were selected as options but Open Sans designed by Steve Matteson was developed with a “ neutral, yet friendly appearance” and is also “optimized for legibility across print, web and mobile interfaces.” Made Open San the obvious choice.

Jott.ly style guide

USER STORY

 Jott.ly User Stories

WIREFRAMES

Rough sketches were refined into one distinct directions through the wireframe. The exploration included call to action button “start today” information touchpoint a video about the company, the three main ideals of the product write, collaborate and connect. There is a dynamic slide show of quotes about the product and a sign-up now button. The mobile version resembles the desktop version.

Jott.ly wireframe

FINIAL DEVELOPMENT

Jott.ly Full site

NEXT:
HOME

So, What do you think...? Ready to hire me for your next UI Design
or Front End Dev
role or project? Email me and let's see how I can support
you and your team.