Hi, I'm Manny

I am full stack UX/UI Designer

I create websites and design layouts that are aesthetically pleasing to your brand or product

I write a bit of front-end coding too!

It's a pop, pizza and work kind of night

I'm a web designer at Tyndale House Publishers. I design banner ads and marketing emails for our products and authors. In 2015, I completed a full-stack UI/UX design bootcamp at DESIGNATION Labs, located in 1871 creative space. I was there for 900+ hours of user-center training, completed design projects for local companies, and polished my HTML5, CSS and jQuery skills. Occasionally collect $$$$ for website side work. I am also a Graphic Artist at The MadeCollaborative Project and an Illustrator at The Greatest Story Never Told theater show. To recharge the batteries I do introverted stuff like going movies by myself and visiting this place. Love traveling. On weekends, I spend my time nerf sword fighting against my kids!

Vicolo Tours

A website revamp for mobile, tablet, labtop and desktop use.

Role

UX/UI Designer, Front-end Developer

Overview

Vicolo Tours offers customized private tours anywhere in Italy. My client Jeremy said he felt the current Vicolo Tours website was too simple and plain. Jeremy wanted the redesigned site to look richer and feel more luxurious, without making it look too extravagant. Also it was important to give the user a sense of being in Italy, but without making the site feel like a typical Italian theme site. Also, the current site used maroon as the main color, Jeremy wanted to try a different color.

My deliverables were the PSD files for mobile, tablet, labtop and desktop. Along with a coded mock-up. Project due in two weeks.

Screen shot of Vicolo Tours current homepage

Design Process

I started with a completive analysis of other traveling and touring sites. Also, I looked at five star Italian hotels and restuarants for inspiration. I was also curious to see the homepages of credit card companies to observe how they used this space to ask customers to sign up for services. I created a mood board of images and ideas to capture my look and feel. Lastly I penciled sketched the layout for the new site.

Screen shot of my mood board
Photo of my sketch drawing

Style Tile

To give the site a rich look, I decided to use two variations of purple. Purple is used to express royality or luxury. Purple can even calm the mind, a great feeling for a custom touring website to convey to customers. These two variations, #454C53 and #282D2F came from eyedropping an image of a dark grape grown in an Italian vineyard. I used a variation of gold #D29914 to compliment the shades of purple. To neutralize these colors together, I used a beige color #F2E7DA, eyedropped from an image of Italian ceramic tile.

The obvious choice for fonts would be using a Italian font, but because Jeremy did not want to site to look "too Italian", I deliberately stayed away from that font family. Instead, I used Playfair Display because I notice that a lot of wine labels used it on their text. I also like how the italic style of Playfair reminded me of a menu at a five star resturant. Using the italic style on subheaders gives them that menu feel. A great combination font for Playfair is Open Sans, great option for my paragraph text too.

PNG of my style tile

Development

Once my stile tile was complete, I used Photoshop to design the layout. I start with the mobile first approach and worked up to desktop. Without using a layout template, and with a few jQuery plugins, I hand-coded a fully responsive mock-up of the site to present to Jeremy. Click the link below to view it on whatever device.

Pulseband

A heart tracking app that can send your heart's data to a Doctor.

Role

UI Designer

Overview

Pulseband is a concept app project I did while attending Designation. The app monitors your heart rate, respiratory rate and blood pressure. My assignment was to design 4-5 screens for these features and create the brand identity.

This project was a first for me in many ways. I'd never designed the interface for a mobile app before. Also, I was not directly involved with UXs team's decisions and development of the wireframes. This taught me the value of team dialogue and open communication between seperate roles.

Design Challenges

Our app's target audience are people that are "at risk", or already living with a heart condition. The average age of our target audience is 45 yrs old. Our brand had to target this older audience, but appeal to the younger crowd too. I spent time reading articles on design for older audiences and seniors. I gathered health care design information and did some competitive analysis of other heart tracking mobile apps.

Logo Concept

Designing a healthcare logo was challenging. To help me get some direction, I gathered people age 40 yrs+ and younger and did a word map of the words "pulse" and "wristband". The words that jumped out the most were "vibration" and "rhythm".

I drew sketches of hearts, the letters "PB" and lines that had movement. I played with the idea of using a rescue dog that can sniff heart irregularities and alert you of them. For feedback, I showed my volunteers my sketchs. The most common feedback was having a heart as a logo was typical, usual and kind of predictable. Both age groups suggested something that was not the heart.

Snap shot of my word map
Sketches of logo ideas

Final Logo Concept

The final concept came from a sketch with the mathematical "infinity" symbol. In philosophy, the infinity symbol is an abstract concept describing something without any limit. Having a heatlhy heart will not make you live forever, but it can prolong a person's life longer. I believe for anyone living "at risk" the message behind the infinitely symbol could be encouraging to their spirit and mind. My volunteer's feedback was posiitive.

Rough sketch of logo
Final pencil drawing logo
Vector image of logo

Brand Colors and Text

When designing for an older audience, because of poor eye sight, visibility of text is crucial. Text, images and background must be displayed using dark and light contrasting colors. I chose dark blue and neon green. Blue is the color of trust, honestly and tranquility. A dark blue conveys dignity and intelligence. Great choice for a heart tracking app that you want people to trust. Although green is the color of ecology, it still is the color of balance and harmony. A great choice for an app that has to appeal to two different age groups. For the to a younger audience, I chose some colors to be neons for a cool factor.

For older audiences, bold text is great for legibility. I chose a Arial Rounded because it's bold style is really heavy. Plus it's round edges are similar to the round curves of the logo. For older audiences, serif fonts can be difficult to read. So for subheads and paragraph text, I stuck with a Sans Seriff with flat edges to contrast Arial Round.

I kept the look of an iphone's IOS interface panels because is recognizable and clear cut for anyone, older and younger audience with a smart phone.

Vector image of style tile

Login Screen Flow

The screen of the left is the login screen. On the login screen, the link at the bottom is for account sign up. On this link, I included the words "tab here" because I read that older audiences might be new to smartphones. Guiding them through with "hand holding" instructions is helpful for them, especially when the interface relies on the user to input data. The middle screen is account set up. Clear instructions with easy to read, natural language is key when you design for anybody. The screen on the right, is the confirmation screen. UXer Janne Jul Jensen said it's important to tell the user when something happens, and to reward them if what happen, is a good thing. I thought that for the confirmation pop up, using an icon of a runner crossing the finish line is an expressive way to give our user's a reward.

Login screen, account set up and confirmation screen

Home Screen and Alerts

The wireframes called for icons that clearly communicated what each vital measurements were. I chose a heart with a pulse wave for the heartbeat section, a stethoscope for the breathing section and a sphygmomanometer for the blood pressure section. I used green to indicate everything is normal. The second screen is an example of a an alert sent on Sept 16, telling the user their heart and breathing rate is low. On the third screen, I changed the color of their sections to our warning color, yellow. Similar to a yellow you might use for yielding signs. I didn't use red because it was not as eye catching. I wanted the color to immediately jump out. The last screen is example of the alert pull up menu. The wireframes didn't have an visiual indiator to that pull up menu, so I added an notification icon to the previous screen.

Home screen, app alert, abnormal rates screen and alert pull up example.

History Screen and Sending Data

The wireframes called for an icon that was going to be universal through out this section. The obivous choice was using a plain heart. The yellow heart is our indicator that something happen on Sept 16. The next screens are the visual flow of sending Sept's 16 abnormal data report to our Doctor. The final screen is the confirmation screen with a cute icon of an enevolpe attached to heart balloons. I read surprises that make a person smile, is actually good for the heart. I thought surprising the user by using this icon, along with fun language for confirming the sent email, could effect our user's heart in this positive way.

History screen, sending data flow and confirmation sent.

Goals and Tips

In this section, we have three categories we can save our text under. Personal goals, achievements and reminders. The wireframes didn't call for icons for this part. Originally the categories where text and were selected via drop down menu I used icons to keep a uniformed similarity to the history screen. I used a soccer ball for personal goals (get it?), a trophy for achievements and a simple clock icon for reminders. I used the color red to indicate a missed personal goal. Sept 17 is empty because there isn't a goal set up for this date. The second screen we input or personal goal, chose the correct category, and it appears white on the third screen because it's not achieved yet. Notice the same tips indicator at the bottom. Finally the tips pull up screen with simple swipe to delete.

Goals and saving a goal

Krayt Close Up

A Star Wars petition website project I did for fun

Role

UI/Ux Designer, Front-end Developer, Star Wars Geek

Overview

Krayt (pronounced like "Crate") close up is a petition site I developed for fun. The goal of petition is to get two creatures from Star Wars universe are have never been on film, into the one of the next upcoming films. I modeled the look of the site from vintage Star Wars toy boxes. This was the second site I ever wrote and the first site that I made responsive. I am pretty proud of how it turned out.

Example of toy box

When working my earbuds play the Beastie Boys, U2 and 80's alternative music