jpsilva/portfolio

SVG Animation

These animations are drawn in SVG and animated completely with CSS. Javascript is only used to start and stop the animation.

Saving Checkbox Button

Click the button to animate the checkbox.

Roll and Check Checkbox

Click the box to start the animation.

Hand-drawn Text Effect

Toggle animation

Logo Design

Krista+Justin/Justin+Krista

I began trying to design monograms for my wedding, combining our initials in different ways. I ended up with an ambiguous signature that could say either "Justin" or "Krista".

Immigration Planner

At Immigration Planner, we worked to give immigrants to the U.S. control over their own immigration process. This logo - a ship's steering wheel - is meant to symbolize just that.

© Mossettes Technologies

Immit

Before we landed on the (rather obvious) name Immigration Planner, I came up with several other ideas that were not adopted.

Immit is a rather obscure English word meaning "to send or let in." It's the opposite of emit. The logo I came up with is a mashup of 4 symbols, including a suspension bridge (the letters "immi"), a sign post (the letter "t"), 2 people communicating over a distance (the 2 "i"s connected by a cable), and a smile.

Boston Baby Bows

The logo I designed for Boston Baby Bows (now called Beckham Belle) consists of a piece of ribbon twisted into the shape of a heart and rotated 90 degrees to form the letter B.

Patient Portal

I was hired at Vecna Technologies as the lead designer on their patient portal redesign. I took input from managers, fellow designers and clients to design and prototyped the new patient portal.

Objective

Increase usability across devices while adding new features to the then-current patient portal.

Before redesign

Pain points

• Top header wasted on client's logo with no real actions other than signout (which isn't obvious).
• Main navigation is placed, unexpectedly, on the right hand side, making them seem like secondary actions.
• Unnecessary introduction below header. Moving the main nav to the header should do a better job of explaining what the user can do than extra text.
• The lack of consistent alignment, dull textures and unnecessary use of wells makes the app aesthetically unpleasing.
• Unclear what "actions" are. Use of bold text and icons appears to be random, so no meaning can be derived from them.

After redesign

Changes

• Moved main navigation to the very top, to meet user's expectations.
• Changed "actions" to "to-do" to tell users that these are items that they need to attend to, whether it's going to an appointment, viewing test results or paying a bill.
• Added shortcut buttons to items for registering for appointments and paying bills.
• Added photo identification to differential between whose account the user is currently viewing. (Could be themself or a family member.)
• Added "messages" section for patients to communicate with their doctors.
• Added Electronic Health Record section.
• Added help aside to supply the user with contextual guidance.
• Added common actions toolbar.
• Hopefully the new design makes it more clear what users are able to do in the app without needing to explicitly point it out to them.

Tablet and mobile

• Hid less necessary information and actions.
• Allowed the user to easily access hidden information by clicking the "i" tab on tablet or scrolling to the bottom of the page on mobile.

© Vecna Technologies

Immigration Planner

I was hired by Immigration Planner as the web app's sole designer and engineer.

Objective

Allow users to easily navigate the complex U.S. immigration system.

The pieces

• Eligibility checker - Is the user eligible for family-based immigration to the United States?
• Checklist - What forms, documents, etc. does the user need to submit, and what other steps must be taken?
• Filing address wizard - Where does the user need to mail their forms and documents?
• Timeline - If the user begins now, when can they expect to receive their green card?

Theses were originally thought of as a set of separate tools to help users complete the immigration process. I realized that these tools don't all work very well on their own, but when combined, because far more powerful. E.g. in order to give the user a customized checklist, we need to know their family relationship, their sponsor's legal status, and other variables, all of which we learn with the eligibility checker. So why ask all those questions again?

What I designed is a workflow that begins with checking eligibility, the result of which shows the user their eligibility information along with a basic timeline, and then continues with the checklist. The filing address wizard is available when it becomes useful to the user.

• At the beginning of the survey, we ask the user for the name of the sponsor and applicant. This allows us to use their names in the following questions, help text and in the checklist. Without asking for names, the words "sponsor," "applicant" and "common parent" can quickly lead to confusion and incorrect answers, meaning we could end up giving bad advice.
• We narrowed down the questionnaires to use as few questions as possible.
• We split up questionnaires by topic so that we can give the user a new outcome as soon as we have new information to show them.
• We provided optional instruction on most questions to help users supply the correct answer with confidence.

• We split up the checklist into chronological segments. First the user must fill out the "initial application" and wait for a reply before moving on to the next section, and so on.
• We reused the names from the questionnaire to personalize the checklist and avoid confusion.
• Again, most checklist items are given contextual information to help users understand or complete each task.

• We created an extensive glossary of terms that users are likely to come across in our application and throughout the immigration process.
• When applicable, we provide quick links to definitions within questionnaire outcomes, in checklist help, etc. Here, you can see the glossary quick link being used within the glossary itself.

© Mossettes Technologies

Summer

I created this app as a side project after being unsatisfied with the available apps on the Play Store. Many scorekeeping apps cost more money than I felt like spending on a glorified calculator. The free apps that are available often have far more features than I want, which means it takes longer to get the app set up, when all I want to do is start playing the game!

Objective

Allow users to keep score of many different games (Scrabble, gin rummy, 45s, Uno, whatever) with the easiest set-up and learning curve possible.

When you launch the app, it will show your previous game, or a blank sheet if it's your first time in the app. From there, you can do one of 6 simple actions:

• Add a player by clicking the "+ person" icon.
• Rename a player by clicking on a name and typing a new one in the keyboard.
• Remove a player by clicking on a name then clicking the "remove player" button.
• Select a score field by clicking on it or by using the arrow keys above the keyboard.
• Change or set a score by selecting a field and typing the score in the keyboard.
• Clear the game by clicking the eraser icon by the score totals.

That's it. It doesn't save your games beyond the current one, so you don't have to give the name a game. You're only allowed 3 characters per game (old arcade style), so more player columns can fit the screen and start up is quicker. There's nothing beyond what's absolutely necessary.

Testimonials

Justin Silva has proven to me over and over his outstanding web publishing skills. He has done a wonderful job creating several websites for us and has not met a challenge he couldn't beat. I have personally assigned several tasks that other web publishers referred to as being too complicated or unattainable, but Justin showed patience and skill, while rolling up his sleeves and getting the task completed. He has exhibited a strong focus and attention to detail, and ability to follow through with tough assignments. I highly recommend Justin Silva to any company seeking a skilled, creative web publisher. - Bruce Bennett (Next Day Disc, The CD Recycling Center of America)

Justin Silva took my ideas for a website and made them even better than I had imagined. His ability to implement the latest trends and technologies made it so my website was fresh and current.... Thanks Justin! - Matt Donaher

Justin set up my entire website in no time at all. I trusted his creative decisions and he was able to put together exactly what I was looking for. It was so exciting seeing the step by step process as Justin paid amazing attention to detail. I highly recommend his website work to anyone. - Dan Crohn