Posts Tagged "Inspiration"

avatar
  • 11.04.14

Mobile First Website Design

by Jay Littman

Mobile First

When it comes to responsive design, the concept of mobile first is not a new one. It was first coined by Luke Wroblewski (LukeW) in 2009.  However, as time goes on, it only becomes more apparent how important designing with mobile in mind will continue to be.

As of February of this year, Americans use tablets, phones, and other mobile devices 55 percent of the time they go online.  At IQ, we’re no strangers to responsive projects. We want to ensure that this huge portion of our clients’ traffic is able to access their sites without anything breaking. But we do have internal debates over which should come first: desktop design or mobile?

I tend to vote for mobile first. We know designing for mobile is important, but why design for mobile first? There’s several reasons to explore:

1. Forced Focus

Designing mobile first forces you to focus. Because when designing for mobile, you want the quickest loading time possible. That means cutting out anything unnecessary to the user experience, paring down a site hierarchy to the essentials, and keeping the core purpose of a site as the only content left standing.  Designing for mobile first requires designing the simplest, quickest method to get the user to what they want from your site. Then, in desktop versions, expanding upon that design while keeping those core functions top of mind.

2. Smaller Real Estate, Bigger Design Challenge

One of the key elements of designing for mobile, and also possibly the most intimidating, is that space is limited on a phone screen. Mobile design is the tiny NYC apartment where you end up using the oven for storage if you don’t plan for your small space. But if you do plan ahead, you can end up with a space that is streamlined and incredibly elegant. I will admit that this is not an easy endeavor, but your designs will be better for it.

3. Enhancements versus Degradation

Let’s get a bit technical. When you design for desktop first, it means loading all of the content that would be seen on the largest platform and then reducing it to the mobile version. The trouble is your user already had to wait for all that content to load on their smartphone before they can get to the mobile version of the site… if they indeed waited and didn’t just close the page out to find something else. Designing for mobile first means allows a minimal amount of content to load first, streamlining the experience. This is a lot faster and means your site gets enhancements as it moves up to desktop, instead of degradations of content when moving down to mobile.

These are some of the things we consider when beginning a website design project here at IQ. This method may help you find a few ways to improve your user experience all over, not just on mobile. So on your next site design project, try starting with mobile first and see where this aspect of creative intelligence takes you.

Want to know more about IQ? Contact Us

You may also like:

IQ brings #KNOWvember to you

Redesigning Amazon.com

Do’s & Don’ts of Creating Brand Videos

avatar

Rethinking Amazon.com

Eric Beatty Amazon.com redesign

 

A quick note from Clark Moss, IQ’s Executive Creative Director:

Every now and again at the IQ office, spontaneous discussions break out about our “dream brands,” those specific companies that we would just love to work on. It seems everyone in the office has one, from a tech giant to a local bar, a brand name clothing store to a niche-market product manufacturer. To celebrate that, we’ve challenged ourselves to write, design, blog and create ideas around these dream companies. We’ll be sharing them over the next few months on the IQ Agency blog, so please enjoy this first one by Eric Beatty, one of our wonderful Art Directors.

Before I start I want to state that I know that Amazon.com has an amazing team of UX & digital designers, and I know they have reasoning behind each element of the page and it’s placement. The comp that I designed is a direction that I personally think improves the usability of the site.

The Problem with Amazon.com

Amazon.com recently came out with an underwhelming redesign of their homepage. Though it is better then it’s predecessor, it didn’t solve for the overall clutter that is on the homepage. Due to the clutter there is no system of hierarchy to guide the user down the page through the various sections. Instead the user comes to the page and feels overwhelmed, flooded with information and images to take in. I wanted to solve for this.

Amazon's status quo

My Solution

I wanted to get rid of the clutter and focus on the most important things on the homepage: navigation, featured content and suggested products. I also wanted to create a system of hierarchy with the content, breaking up the page with large blocks of featured content  with smaller blocks of suggested products so the user doesn’t get overwhelmed. Finally I wanted to create a space at the top that showcased Amazon’s featured products in the best way possible.

Amazon.com solution

Navigation

Amazon Nav bar redesign

I shrunk the nav, leaving only the most important items: Departments, Prime, Wish list, My Account, Cart & Search. Note that search is front and center, allowing for people to quickly and easily get to it, since this is likely the most used way to navigate the site.

Hero Slider

Amazon hero slider redesign

I made an eye catching, full width image hero slider that showcases each featured product in an emotional way. I noticed that the current hero pieces are small and feel more like ads than a featured section. I wanted to make sure this section shined because this is where Amazon gets to push select items.

Suggested Products

Amazon Suggested Products redesign

I wanted to update the “related to items you’ve viewed” with Amazon’s colors. I feel they don’t use their branded orange enough, and by popping it in every now and then we are able to reinforce the brand subtly through the site. I also gave new spacing to the products to let them breathe, and to give the eye an easier time to see each product.

Featured Products

Featured Amazon Products Redesign

I think it is important to break up the product suggestion section with hero items. This keeps the user from feeling overwhelmed looking at a mass of products. It also provides visual interest and does a nice job breaking up the page.

Note the right side bar didn’t change that much, I wanted to make sure that section remained dedicated to advertisement, that way this is a more realistic approach to the redesign.

Take a look at the project on my Behance for more information. What is your opinion of Amazon.com’s homepage?

 

Want to know more about IQ? Contact Us

You may also like:

Don’t interrupt me when I’m interrupting you

Dear Brands, you’ll never be potato salad

Tips for Writing in Agile

avatar

Wirestorming: Templatize, organize, and versionize the wires out of your skull

Wirestorm

Do we know yet the volume of an idea? It’s Wednesday and I’m just out of IA and into wireframes. The pipes are knitting themselves into a fray. That’s how I know something is up there. My skull is not illimitable.

Wireframes. Wires: the boxes-and-bubbles tech docs that will instantiate the requirements of the project and breathe life into my IA. Wires: my big deliverables. The ironed down, buttoned up, spit shine proof that I “know what I’m doing.”

Heavy stuff. This cursor ticks with every new idea crashing into my cranium. I sift and sieve, identify and modify, assimilate and aggregate. How to turn this IA. In my brain is a swirling abstract with scrawny tendons and gawky legs. I command it to incubate.

The cursor blinks. My temples begin to bulge. A tumbleweed hops across the surface of my desk.

A wirestorm’s a-coming.

And here’s how I’m set to weather it. Maybe it’ll work for you as well. Continue Reading

avatar

Sketchnotes, by Eva-Lotta Lamm

Eva-Lotta Lamm has published a book of sketches she crafted while at web conferences over the last two years. The book includes notes for 100+ speakers, including Edward Tufte, Jesse James Garrett, Dave Gray, and Eric Reiss.

Jan Srutek: Information Visualisation – UX Camp Europe 2010

I’m always impressed with people that can take talking points or ideas and make them visually interesting. Rather than creating an ordinary bullet list that is less likely to be referenced after the conference, this is a great way of channeling your creative self and bringing ideas to life that you can later share with others (and possibly make a profit on!).

Check out some sample pages on Flickr.

avatar

The new guy’s thanksgiving

I know, Thanksgiving is still 10 days away. And I’m the new guy posting on the company blog. Two strikes. However, on my first day as art director at IQ, there are a few things for which I’m thankful.

1. Remembering the pass code on the employee entrance door. I think I was the third person to show up this morning and am glad I didn’t have to wait outside like a visitor till someone else showed up.

2. My shiny, new MacBook Pro. We’re going to be great friends.

3. The comfort of finally being in Atlanta. Planning for a move is the worst part. Unpacking boxes is much less stressful.

4. A 6 hour drive in a 22′ moving truck (while towing my car) being behind me. I’m not cut out for driving large vehicles like that. I wear contacts but fear my eyes are actually crooked on my head because every time I was confident both giant wheels were in between the lines, I would be dreadfully wrong.

5. The beautiful fall foliage out the window behind my new desk. I realize that when winter claims all the leaves, it won’t be as inspiring, but for now, it makes me happy.

6. Coworkers who don’t mind me repeatedly asking them their name. I’ve met a Chris, Ross, Dan, Tyler, Winston, Colby, Alice, Zach, Gary (and others) but have no chance of matching them up to the right face.

7. Being so close to work. Since I got an apartment as close as possible to the office, my morning commute was a grand total of four minutes. Four minutes! Take that Atlanta!

8. Being surrounded by people who I know will make me better. The only way to grow is to be around people who are better than me. My sleeves are rolled up. Let’s get started.

avatar

A Playful Night at the Guggenheim w/ YouTube Play

Last night Senior Technical Project Manager, Marina Filiuhina and I attended the YouTube Play event live from the Guggenheim in New York City! We had a fabulous time celebrating the works of artists who have used YouTube as an avenue for sharing their artwork. Last night, YouTube took over the Guggenheim museum by projecting celebrated video art on almost every surface area of the architecture inside and outside. The night was full of live music performances, including a finale by the YouTube sensation and grammy award winning music group OK GO.

The event was streaming in real time on YouTube Live and can be watched along with all the fabulous artwork on http://www.youtube.com/play

Continue Reading

avatar

Where Good Ideas Come From

“Chance favors the connected mind.” – Steven Johnson

Brings back fond memories of the UPS whiteboard campaign.. but this is fantastic on a whole new level!

avatar

Steve Jobs on the eve of introducing Apple’s famous “Think Different” campaign

Steve Jobs is not just a great business man and a very talented technologist. He has a very clear sense of what great companies need to do to cut through the noise of the marketplace. And that thing is to have a perspective, a point of view. Here he is talking about the “Think Different” campaign in 1997 (by Chait/Day). Here’s an article from LowEnd Mac on the history of the campaign which notes that the entire campaign and assets were completed in less than a month, assisted by the fact that Mr. Jobs was close personal friends of some of the people who appeared in the ads and posters.

Hat tip to Jason Kottke also points to the clear difference between 1997 and 2010 Apple advertising. Back then, their computers were not all that special (with MS Windows 95 catching up to the Apple Macintosh in a lot of ways), so they didn’t show the products. Today, Apple’s products are leading the pack, and so the television advertising they do can be summed up as “Nifty song. Here’s the product. Here’s a disembodied hand using it. It’s awesome. Buy one.” The recent ads for iPods, iPhones and now iPad are not nearly as focused on the soul of the company, and, in my view, not as compelling.

Technical Management in Digital Advertising

Since my transition from developer to manager of developers 4 years ago, I’ve been fascinated with art of technology management within an advertising agency environment. While technology management is well documented for software development companies, little exist for the development of complex web applications within a creative based environment. Below are a few high-level thoughts I’ve considered when approaching the art of technical management at an agency.

Organization within an Unorganized Setting
Where as the software development life-cycle is based on months and years the agency development life-cycle is often based on weeks. This is made even more challenging considering requirements tend to be more loosely defined and effected by non-technical stakeholders (the client). The agency environment forces you to have a more of a “run and gun” mentality. While you want to have: objects, requirements and goals clearly defined up front, timelines and bandwidth don’t always allow for it. One true rule of development is that clean organized code is necessary regardless of the size or scope of a project.

Letting Developers Develop
Probably the #1 goal of anyone managing developers is to make sure your developers have everything they need to write great code that can be delivered in a feasible timeline.  While management requires the ability to sit in hours of continuous meetings daily, developers need the ability to write code for continuous amounts of time. Being brought into unnecessary meetings or forced to hunt down project status or assets is a huge detractor to this.  Doing these things for the sake of code being written requires a very selfless mindset.

Ownership of Technical Failure or Success
With a waterfall method being the easiest and most dangerous process to follow, it’s easy for technology to be the last informed of project progress and status.  Early in my career there was a situation where I was told not to attend a meeting by the organizer since “development was not being discussed so you would be wasting your time”. When I told the my boss afterwards he stated in similar situations to tell the organizer that “unless you want to be responsible for the technical success of a project I should attend this meeting and determine if it’s appropriate for myself”. From initial requirements gathering through QA there are enough moving parts to warrant ownership from one individual. For the sake of the project success that person should be technical in nature.

Fighting Upstream

Combined with QA, development is the last  stage in the overall process. This results in being the last informed within the project. Within technology management you have to always make an effort to seek project status and information particularly when you know the project is active. You have to be willing to walk into meetings that you weren’t originally invited to and challenge deliverables from other departments.

Promotion of Innovation
Unlike others areas of the advertising industry, digital is totally based on constantly progressing technical mediums. Rather the output is: desktop browser, mobile or native os applications, there are numerous considerations beyond the design and content which can attribute to the success or failure of a project.  Innovation requires a understanding of theses constantly evolving platform so known boundaries can be challenged. The technical management lead needs to be at the forefront of these trends.

Stay Informed