UI Exploration: Do the Technicolor Twist, Part 1

Working with brand guidelines can put a designer in a real funk when it comes to colors. We stick to what has been approved albeit our personal preferences. I personally have designed so many blue things I thought that I had seen the gamut of shades of blue but, nay! More were to be found. In the past year and a few months, I focussed solely on the color green with 17hats. (Green for positivity! money! success! more money!) Needless to say, I am now ready to work on projects that have NO GREEN!

Recently, a friend approached me with a UI project for his current endeavor: DropTrack. This product is a music marketing platform for musicians, djs, etc. to get their music into the hands of record labels, other artists, bloggers, and more. As someone who is a musician and music takes up 1/3 of life, I knew that this would be a fun opportunity. The original screens that were presented to me were laid out with an engineer's precision for functionality and ready to take on some designer TLC. I asked the owner, "How do you feel about adding in more color?" The response was, "Let's see it."

This post is presented as a Part 1 for a main reason: I am focussing on a few details at a time. The hope with this series is to display these UI elements to really showcase some of the detail work before featuring on the full screen UI.

My relationship with color in this product has been executed in phases. First was the whole page - how do I present an artists tracks elegantly? How can this product be an even better showcase for these artists? From there, color was used with all CTAs, messaging, alerts, tags. If it wasn't body text, it probably was assigned a nifty RGB value. It made the page come alive but in a functional way. Here are a few samples created thus far:

Dropdown with custom icons for download options.

Message modals. Success alert uses a non-traditional blue/green gradient that is upbeat but not overpowering. Error alert uses a burnt orange gradient versus a bright red to reduce reactionary stress for the user.

Payment modal. Uniting the CTA header text with CTA button with a fabulous purple.

This project is exciting in the fact that there is a great deal of creative freedom while respecting the product itself. The use of color can still allow for a sleek and modern look if done tastefully and correctly. There's always a reason behind a color selection which is why it is effective.

Stay tuned for Part 2 to see how the UI on this product develops.

Product Review: UI Stencils

As a designer who has an affinity towards pen and ink as primary tools of the trade, I always look to see what fun products are available to aid in UI and UX development. I came across UI Stencils while going on a slight binge to up my wireframing game.

A main component of my process as a UX designer is transferring any and all ideas onto paper. The sketches are my shorthand and allow me to communicate actions and flows faster than working on the computer (some may call this odd, I call this one of the wonders of Jen's designs). By fleshing out actions, gestures, questions, etc. via sketching, I am able to cut down on time spent on a series of digital wireframes that can sometimes lead to a collection of chaos. What I mean by that is artboards that go on forever and the idea you want to execute gets lost.

Enter UI stencils. They have thought of everything and I felt like Christmas came early when I browsed their product list. I went ham on adding items to my cart - stencils for iOS, Android, Web, gestures(!!!), a pixel ruler, and an every day carry kit (because everyone should have this in their pocket, am I right?). It didn't end there. Then began the addition of all the Sketch pads to pair with the stencil kits. Whoa!

iOS Stencil, iOS Sketch Pad, Pixel Ruler, Micron 0.5

My arsenal was full and ready to be used. I created incredibly detailed sketches that aided in my conversations with developers and stakeholders for feature development. Some of the developers had hearts in their eyes for some good old fashioned paper drawings stating, "this is why pen and paper should still be used." It felt like a huge win to me. With these wireframes, I accurately transferred the designs into PRD's and used them as the base for my digital wireframes. Process streamlined even more.

Yet with all the praises I have for these products come a few places for improvement. I found that many of the icons were just too large and felt like they would have been great back with older iOS guidelines for image sizes. Times have changed and we are no longer constrained to 44px! Icons were especially large when I used a fine pen such as 0.1 or 0.5, the sizes I comfortably use for sketching. Another wish list item would be horizontal lines for main UI components such as navigation tab bars, top bars, etc. While there is a small notch on the side to indicate where to draw the line, that secondary step could be eliminated by a simple thin line etched out. The last "please make this happen" item was a fuller notes section. I would love to be able to write out more notes alongside the devices. Yes, this would call for a larger sketchpad but SO WORTH IT in the long run.

Overall, everyone who encountered either the UI Stencils products or my sketches created using their products was incredibly pleased. It made sketching not just more fun but more accurate to tell a feature story even better.

Thanks UI Stencils for the stellar products!

Design Is For More Than Business Cards

After the tragic incidents which occurred in Paris, the masses took to social media for support. Messages of solace, love, and sorrow were all expressed through words and images. It's beautiful to see so many people from around the world unite even under the worst of circumstances to shine some light in such a dark hour.

Before hearing the news yesterday afternoon, my fiancé and I had been researching supplies for our bug-out/earthquake bag. The search took a backseat while following the events, work, and discussion around the state of affairs occurred. When the hunt resumed, I began to type into amazon's search bar for "emergency supplies" and made it as far as typing "emer" before stopping in my tracks. Amazon had implemented their message of support with an extremely simple yet effective design.

One color, one graphic, and one word combined to create endless messages. Not to mention the graphic and type in the top right corner used as global elements in the top bar added even more impact. The design is powerful in its simplicity.

This is a prime example of how design is used for meaning. A majority of people (although the thinking is changing more so nowadays) believe design is just for making things pretty. And while that is an objective, it is not necessarily the main goal. We, designers, are storytellers. We are people with messages to be conveyed which are to not just be absorbed but rather to ignite discussion, thoughts, and in some cases, for people to take action. This design by amazon pushed the state of affairs point blank to the viewer.

Amazon is not the only site to make changes which demonstrate support. Facebook brought back the profile picture filter using the French flag's colors and design. To some, the idea of changing a profile photo seems incidental, meaningless. But to others, it can mean a great deal. After the gay marriage ruling by the Supreme Court in the U.S. earlier this year, Facebook revealed this feature of the profile picture filter with a rainbow color scheme. Millions of people changed their image to demonstrate support for the cause. Members of the LGBTQ community responded by stating that the image change was meaningful to them when seeing their straight peers visually advocate for the cause . I hope that now, there is a similar effect with the current feature. The design brings about conversation and awareness. When some do not know how to act or do not have the means to financially or physically provide assistance, there is an outlet to visually express their feelings. What may seem like a small action to some could potentially provide a large impact for another.

Design may not save the world but it will certainly help to bring awareness, conversation, and ideas to the forefront. And in my eyes, that certainly takes us one step closer.

Today's Inbox Happiness :: InVision User Testing

Ok InVision, you already make my life easier with prototyping and your blog brings me much joy. I look forward to receiving the newsletter and checking out the webinars.

But lo, what is this? User Testing? USER TESTING! I can not explain how much time I feel the process of gathering information from user tests is wasted based on clunky systems. Collecting data in a poorly filled out excel file, watching videos where testing software is being glitchy and affecting the results, and, sifting through all the information in sub-par programs just wastes too much of my time.

After viewing the blog post on InVision's page, I have high hopes that even in beta this product will streamline the user testing process. So far the MVP feature set is solid, I look forward to how this develops!

Organizing Information :: How Do You Divide?

Ever since elementary school, I've had various pens and highlighters, notebooks of various sizes, and post-it notes to create the ultimate method of organization. Never caring for store-bought planners, each of mine were designed in a fashion which worked for me - how I mentally divvy up information to have the maximum retention. It's grown from composition books and Bic black and blue pens to Moleskine's with Micron pens and Copic markers (these are a few of my favoriiiteee thiiinggss).

Task, project, and overall life planning continues to be an exercise in handwriting for me where a hybrid of traditional versus new (i.e. phone calendars and online project management tools) takes place only in the workplace. Basecamp, Unfuddle, and Confluence have all made a presence but nothing quite compares like the grace and ambiguity of ink dashing across the 68 lb. ivory slate of glory that is my notebook.

Until I met Asana. Finally, a tech savvy match to my method has been found. The web interface is easy enough to work through albeit some of the UI could be enhanced for a sleeker feel which personally provides me with more clarity with information hierarchy. The methods of organization with sections and sub-sections to categorize tasks is one of my favorite features. Thus far, I've created projects for my design work, business docs, and specific meetings (weekly check-in is my favorite). The ease of inputting ideas, to-do items, and methods of labeling objects have greatly affected my work flow in a positive manner. The iOS app is very well done with a simple UI that allows you to focus on the tasks at hand. Not to mention the color palette is quite rich which is a nice variant compared to many apps out there right now which focus on a stark white or near black theme.

What I enjoy most about Asana is the information sharing and interaction features for other team members. Thus far, my only team member is my fiancé, who is the other half of our company. We are easily able to share ideas in the conversations tab which allows for not just text but also image uploads. Emails are sent when these are started to help notify you and keep the conversation in real-time. Most importantly, this keeps my thoughts and ideas in an accessible place providing for the utmost transparency regarding vision and product development, something my lovely Moleskine can't provide unless I physically open and show it to another person.

Thank you Asana for finally providing a tool that allows for tailored organization, increased productivity, and overall, a way to track the progress and excitement of an idea coming to fruition.

The notebooks and Asana lived happily ever after...