catsandcache

[catsandcache]

Entitled: Waiting for Product Feedback

A quick-mini-design using James assets ^ _ ^

[catsandcache]

It’s official! 

---

Next 100 Day UX/UI Challenge I’m coming for you!

[catsandcache]

#005 - App Icon Hint: Design an app icon. What best represents the brand or product? Or is it incredibly unique? Does it look great at a distance and does it stand out when put on your home screen alongside other apps?  

I am learning to be a more present and awake soul. A fun 15-minutes challenge that symbolizes my on-going journey to find my center and balance in life. Gave this a simple green gradient to represent nature and our oneness as humans to our surroundings.

[catsandcache]

#004 - Calculator Hint: Design a calculator. Standard, scientific, or specialty calculator for something such as a mortgage? Is it for a phone, a tablet, a web app?

I observed an interface that used circles as info components for users to join different groups. I loved the idea of a more organic node-like structure and thought it would be interesting to create a calculator with the same almost whimsical tone. As calculators are the complete opposite. In addition, I created a gradient and color palette that still pays homage to the USD bill.

[catsandcache]

#003 - Landing Page (above the fold) Hint: What's the main focus? Is it for a book, an album, a mobile app, a product? Consider important landing page elements (call-to-actions, clarity, etc.)

I was trying to create a social landing page that included all the elements of a simple info card. Just for fun I decide to create the landing page as a standalone browser size info card (no scrolling required). I feel that Open Sans keeps the simplicity and cleanness that san serif provides, while a fun font entitled cookies&milk adds character to the composition and user.

[catsandcache]

#002 - Credit Card Checkout Hint: Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc

For today’s challenge I wanted to create a fun accordion payment interface that has a simple “surprise and delight” moment. When users begin typing in their credit card number their card type (ie Visa, Mastercard, etc. ) is auto populated after the first 4 digits typed in.

[catsandcache]

Now that I’ve had a moment to acclimate to my new job and city, I’ll be jumping into a new UI/UX 100 Day Challenge! In addition, I’ve tried to time-box myself with these challenges to max 45 minutes :) 

Day #001 - Sign Up Hint: Design a sign up page, modal, form, app screen, etc. (It's up to you!)

For this layout I wanted to create something a little more outside of what I usually create. A playful sign-in with larger CTA buttons for a more mature audience that loves gardening. Using gradients and a rich color palette creates a “Secret Garden” vibe that allows users to easily sign-in outside in their garden.

[catsandcache]

Throwback to delayed flights, strong whiskeys, and bar doodles.

[catsandcache]

So simple and fun.. its genius. Loving this balance and color palette chosen. Well done. (via iDo app icon by Kim Wouters)

[catsandcache]

Tinder Redesign

Who doesn’t love swiping left or right? I found many times that I had to turn down the brightness on my settings when I started swiping right before bed. Maybe it was a sign from my eyes that I’ve become addicted? LOL! I thought I would have some fun and create a darker, more sleek version of the infamous gesture application. Staying away from more heavy rounded icons, I played with hallow more sharp-edged icons. Also, using circles to surround the icons gives a sense of filled space but not bombard our phone real-estate.

Another thing I notice with the current design was a gradient at the bottom of the card stack. Instead of trying to re-create the well designed layout without the gradient I thought I’d give it my own twist and reverse the card stack layout so the stack is coming from top instead of bottom. 

Adding location distance also helps demystify and give a realistic sense of where the other individual is located. Overall, I am super happy with how the layout came out. And feel this view could definitely be for a more professional millennial when it comes to connecting with humans. #swiperight

[catsandcache]

Surf Conditions for Native Application

One thing I was not a fan of when I lived by the beach was there was no quick and easy view to observe the surf conditions. Asking Siri would pop users into a web search and at times those sites would not be mobile friendly. 

With this design I wanted to create something easy to understand for fast observations so users can spend less time searching and more time catching the perfect swell based on their current location. Colors are reflective of aquatic/sea foam and easy to read times via San Serif really brings together this very smooth style.

[catsandcache]

Mobile List View for Native Application

Inspired by none other than Fetty Wap and his song Trap Queen (also the Halsey version of Trap Queen is magnificent too). I always wondered what type of pie Mr. Wap and his baby would be cooking

I be in the kitchen cooking pies with my baby, yeah.

Creating this native application list view put my mind to ease that Fetty and his baby would be well taken care of. With main call-to-action FAB button located on the bottom right, users can easily be able to add more list elements (ie. pies). Along with easy to tap check elements with a counter at top allows for quick understanding of list item count. Creating a diagonal header not only creates for a fun layout but also resembles that of a pie slice. Bright, warm colors that resonate with happy times when baking with those we love after a wonderful night out on the town :) 

[catsandcache]

iPhone Zero State Screen

I really enjoy the new features iOS has made throughout the years, specifically to their iPhones. One feature I wish they created was a way to easily and quickly view current weather based on your current location. As of now, users have to swipe in and then click into the application to view. 

I created a professional approach that would allow users to be greeted throughout the day such as, “good morning.. good afternoon.. etc.” Along with time, date and current location selected for weather. Additionally, I imagined the background to be moving as a reflection of the current weather stream.

[catsandcache]

Sign-In Form

For this native application sign-in page I wanted to create something sleek and engaging. Creating a deep palette with contrasting colors and hard gradient that really gives emphasis to the main CTA. I find many sign-in pages are left skewed, I thought I’d try creating a completely centered layout and I feel happy with the results :)

[catsandcache]

I try to keep this blog primarily about design, inspirations and creative feedback. I suppose today’s events fall somewhere in between: 

The back story: For a past client, we were faced with a challenge to help educate users in a non-intrusive way throughout their on-boarding process within a financial application. The client explained that they wanted a “holistic educational experience.” Meaning, as the user went through their on-boarding process educational examples, calculators and tooltips would be available every step of the way. At first, this challenge can seem easy, but upon iterations and learning the complete depth of information of what the client needed, my lead and I thought the best approach would be a series of off-canvas panels that would load with info pertaining to that specific link and page. 

This afternoon, during our weekly design scrum I asked a question regarding multiple overlapping off-canvas panels as it was a pretty challenging experience when it came to the jQuery and coding these-said multiple panels. The question was referring to an upcoming code release for our open source framework and if we were thinking of implementing anything similar to the challenge we had faced with my past financial client. Another lead designer immediately informed our team that they would not be adding this functionality to our up-coming release... and further stated, “that was a pretty bad UX Design.”

As a product designer, you quickly have to develop a thick skin when dealing with clients and their creative criticism/feedback. Emphasis on quick. It’s just the nature of the position, but hearing those words come out from one of our internal leads really stung, to say the least. With product design, you create the concept from paper sketches, hi-fi wireframes, all the way to front-end code. These concepts are usually created through a series of iterations based on feedback and can easily take months to get just right before bringing the fidelity up from wires to visuals and then visuals to front-end code. 

Immediately when he stated, “that was a pretty bad UX Design” my mind went to so many questions. The first, obviously: WHY DIDN’T YOU TELL ME BEFORE THIS MOMENT IN TIME?! Then the rush of: How could I have solved this problem better? Did my lead for this project think my solution was shit too? How would they have solved it? Was my client really happy with the final results?

I plan on discussing these questions with both my lead for that project and the lead that made that statement tomorrow. But in the meantime, my question(s) to everyone are: when does creative criticism become just.. criticism? How would you have handled this? Do you have any solutions to this off-canvas challenge?

If anyone has any examples or suggestions for better solutions I would really appreciate and love to see them :) I believe that design is not meant to tear each other down (although it can definitely feel like that some days), but rather to help and lift each other in our quest to solve functionality challenges.

[catsandcache]

Sometimes working in design for a paycheck can really put a strain on enjoying the fact that you’re solving these awesome problems challenges. When I lived in Los Angeles I would wake up early and slang clay around at our local ceramic studio down the street to relax and clear my mind. Jumping from different focuses (and physical locations) helps keep your brain and body stimulated, and gives you a breather from your current tasks. Plus, you never know what inspirations you’ll find when you lift your eyeballs of that screen. Also, creating a fresh pair of eyes for yourself never hurt anyone in design :)

I am fortunate to know some pretty awesome womyn that always encourage each other to strive for more, no matter what career field you’re in. Having a background in front-end development, you find yourself falling into comfort languages and not wanting to extend yourself into other.. lands. Some people fall in love with jQuery while others prefer to jam with Rails... No one’s wrong here, unless you’re coding for emails. F- tables.. and you, IE.

On a side note, currently trucking through some horrendous legacy code at the office and learning Rails + Backbone Marionette = NOT fun. Especially, if you’re a ..product ..designer. But c’est la vie. Embrace the challenges, yo.

...Sorry, tangent. I’m stimulating my brain with AngularJS! (Side note, the docs can get a little hairy, I know I was a little overwhelmed when diving in). So, check out this awesome intro tutorial by codedamn my friend sent me! It keeps the stress levels of learning down and optimism of not getting confused up. And plus every video is roughly 5 minutes or less.

I’m pretty excited to show off some wireframes I’ve been working on in my next post. And show updated versions with every iteration based on feedback :)

[catsandcache]

Moodboards-

Probably one of my favorite bits about UX/UI/Product Designing. Moodboards are the point when you’ve done a good amount of leg work in you project (sketches put to rest, wireframes freshly uploaded onto Dropbox), at this point your client feels a sense of trust, which always feels awesome! It’s this phase when you really let your creative juices start churning and the client starts to see the magic come to life.

Usually, but not all the time, I find clients have specific requirements. And sometimes they don’t (there’s really no wrong or right when it comes to requirements.. unless their branding is pretty set in stone.. which is always not so much fun, but I digress). Some designers love having that clean slate/no restrictions to hold them back. I find it more challenging (and exciting) when clients do provide such restrictions. As these three moodboards will show you, this particular client was very set on having some sort of blue within their application.  

The idea of moodboards is to try and capture three (some prefer more, but we find three to be the magic number) completely different moods that will resonate with your client. More often, clients will combine bits and pieces from all three or two or they might just fall in love with one (which was, by happen chance, placed as the last one ;).

Things that I try to include in my moodboards:

Imagery (is it vector focused, hi-def photography?)

Typography (is your project light and airy, bold and condensed?)

Color palette (is your vibe more serious, light hearted?)

Buttons (illustrating an example of what your primary/secondary buttons look like can help bring your vision to life)

Line elements (Sometimes round borders come off as more playful, while sharp edges depict a more serious tone.. but not always!)

Slogan/Catch phrase (not all clients have this or find it necessary, but if they do, add their slogan/catch phrase in your moodboard... not only does it show that you’ve done your homework, but it also helps clients visualize what their new branding/application might be)

Basically, moodboards are awesome steps to creating that awesome product. Plus, creating moodboards with your S.O. is also a surprisingly cute date night too! Plus, there’s wine.. ^ _ ^