What is UI Design?

Once again, we turn to the Designing North Studio team (only a couple are dedicated UI practitioners) to share their their definition of UI Design in one sentence:

[clickToTweet tweet=”UI design is The translation of UX design into a visual interface.” quote=”The translation of UX design into a visual interface, where the color, composition and placement of various interactive elements reinforce the user experience principles that have been deemed most important for a given interaction.”]

“When function and art move in together before they tell their parents.”

The balance of visual design, layers of presentation, and interactiveness to provide a satisfying look, feel, and experience.

The translation of UX design into a visual interface, where the color, composition and placement of various interactive elements reinforce the user experience principles that have been deemed most important for a given interaction.

[clickToTweet tweet=”Let’s get visual. Here are the basics of UI design:” quote=”UI Design is the creation of graphics, illustrations, and/or use of photographic artwork and typography to enhance the display and layout of a digital product within its various device views.”]

Have you ever heard someone say, “Wow, that website has horrible UI,” or “The UI of this app is the worst”? Similar to our comments on What Is UX Design, if you aren’t around designers all day this acronym is likely meaningless. And there’s nothing wrong with that. But to understand User Interface Design (UI), is to have a greater appreciation for the way designers craft  the look, feel and even responsiveness of a digital product, which all accumulates to interaction.

However, we understand that much like UX (user experience design), UI (user interface) is often interpreted slightly different depending on who you ask.  

At its core, User Interface Design creates the the look, feel, and interactiveness of a digital product — think web experience or app. But this is only the basis for understanding. You see, good UI is a multidimensional approach that enables a product experience to be responsive to a human being. It’s the Xanax of the design world. Remember that short animation that perfectly substituted the need for a thousand words? Or even that website that you navigated as though it was a guided tour. Now, that’s some good UI.

Now, let’s paint you a more thorough picture of User Interface Design with these six articles:

1. UI is this, and UX is that:

https://medium.com/blu-mint-digital/ui-design-vs-ux-design-whats-the-difference-af97c2ff052a

2. UI basics, let’s start here:

https://www.usability.gov/what-and-why/user-interface-design.html

3. Good UI gets out of your way to help you complete a task:

http://blog.teamtreehouse.com/10-user-interface-design-fundamentals

4. Four ways color explains good UI

https://www.webdesignerdepot.com/2017/06/4-ways-vibrant-colors-boost-ui-design/

5. UI explained in 60 seconds. Starting now:

https://www.oho.com/blog/explained-60-seconds-ux-ui

6. These big design buzzwords make you sound more experienced — UI is one of them:

https://www.upwork.com/hiring/design/ux-ui-ia-digital-design-terms-explained/

Have a burning UI/UX question? Let’s chat!

Do you subscribe to Designing North Stories yet?

Everybody knows that the three most important words in real estate are location, location, location. But did you know that the three most important words in managing digital product design & development are communication, communication, communication?

No, this is not a new Geico ad. We recently interviewed Designing North Studios’ Managing Director and Executive Creative Director Lisa Peacock  and Head of Technology Nigel Peacock about how best to navigate the sometimes stormy seas of digital design and development. The interview was timely, as we just completed a retrospective on a major digital product design (yet to be unveiled to the public) – a process we undertake religiously after every big digital endeavor.

What tools or processes are most critical to the successful execution of a digital development project?

Nigel:

If the decision is solely ours, then we employ the Agile development methodology, which has consistently worked well for us. Depending on the client’s preference, we can employ offshoots of Agile such as Scrum, Kanban or even Extreme programming.  That doesn’t mean that we can’t adapt to other more traditional processes, however, such as Waterfall or Critical Path Method (there’s one for the teenagers). That said, we often find ourselves working in a hybrid environment to accommodate a particular client’s internal processes. Whatever the preferred methodology, we do insist that a decision is made early on in the engagement usually during the discovery process which ensures that we get everyone on the same page thus completing stage one of “communication, communication, communication.”

Lisa:

Yes, and I think that the daily stand-ups are probably the most beneficial or critical element of that process. Every team member who is deployed on the project is part of the daily stand-up, and is expected to report on what they’re working on that day, what’s next on their task list, and any blockers or impediments that might cause them to not complete their task.

Nigel:

I would add  that it’s imperative that those meetings are kept to the brief three-point agenda that Lisa mentioned. In fact the meeting leader, the “Scrum master,” has a responsibility to keep the stand-ups organized to the point of being regimented and steer each contribution to a 5-10 minute slot at the same time every day.  Longer discussions can be saved for the “Meet After” or “Huddle.”  Working with a virtual team means that we don’t have the luxury of “water cooler” discussions, so tools like Slack and Basecamp are vital additions to our project arsenal, and allow us to continue conversations outside of the stand ups. Or we can just say “Hi’ to make sure we keep the team socialized and the energy levels up.

You’ve both managed countless digital projects over the course of your collective careers. What are the biggest potential pitfalls to be wary of – the perennial hang-ups?

Lisa:

Two Things: Business Requirements and Business Rules. Not keeping requirements top of mind throughout the project, and not documenting the product’s business rules effectively so that they are not lost in the hand-off between Design and Tech is critical. Establishing requirements up front, which is part of an Agile process or any project process for that matter, is the easy part. But it takes strong leadership to continuously circle back and hold both the requirements and subsequent business rules up against decisions points as the team progresses through a project.

Nigel:

Yes, and steady tracking of the requirements and designs makes it easier to eliminate disagreements as they arise. When you encounter a conflict between a proposed UX solution from the designers and a technical solution from the developers, we’ll grab the applicable business set to help inform a direction. I would also add that guiding the customer toward defining the MVP (Minimum Viable Product) is paramount to any product launch success. It’s super easy to get excited as the product begins to take shape and keep adding more and more bells and whistles until you eventually have a difficult time reaching the finish line. Keeping a backlog of great ideas, with a quick prioritization indicator for add ons later is critical to keeping the creative thinking logged. It also helps to remind clients that you can eventually get everything you want, but not all at once. This is where Agile, used properly, can be a real asset.

Speaking of settling conflicts, how do you solve conflicts that aren’t necessarily settled by a review of the business rules?

Nigel:

Even the most well documented, evolved business rules can still be open to interpretation when the development rubber meets the road. It’s really important to have members of the design, development, and analysis teams joined at the hip from the project inception to deployment.  Rather than constrain enthusiasm or creativity, we tend to let ideas flow freely, then before committing to them, we’ll have the Tech team make sure that designers aren’t writing checks that can’t be cashed.

Lisa:

Hey now, expertise comes at a cost my friend. Ha! No, this is true. Creativity can jeopardize scope. A good creative director will spot it when its happening. I would also add that the designers can often help to rein-in the tech team too when their solution is more elegant than might be needed for a particular requirement or business rule. Again, daily stand-ups can give tech a better understanding from the design and business teams as to what the customer not only wants but really needs. Then assumptions aren’t made along the way that can cost everybody extra time and money.

You touched on time and money and that translates to budget. What tools do you use for scheduling and for tracking budget?

Nigel:

Typically we use Microsoft Project for the project schedule and Google Docs to communicate high level planning.  Depending on the customer preference we will use a variety of development planning tools, but most often focus on Microsoft Team Foundation Server (TFS) or JIRA for sprint planning.

Lisa:

In terms of tracking project budget, we’re a Harvest shop. Everyone works to a detailed time sheet that’s approved every week. Harvest reports make it easy to see exactly where you are, and forecast burn rate which is especially helpful when talent is working on more than one project at a time. Specifically, for tracking design deliverables, we like Trello, and find it to be an effective way to assign tasks, see what’s coming up next, what’s in-review with the client, and finally fill-up the complete column once a deliverable has been handed-off to tech.

What happens when a designer or a developer just isn’t getting it?

Nigel:

You know, that’s honestly one of the best parts of our business model. We’re a blend of freelancers who have worked together on a variety of projects. When we select our team, it’s after Lisa and I have a good feel for the type of client we’re dealing with, the type of project we’re tackling, and the methodology that’s going to work best for the client. We handpick the team from there. We’re not saddled with having to use anyone “on the bench” just because they’re filling seats at an office.

Lisa:

And look, despite that flexibility, we still need to have the fortitude to acknowledge when we’ve got the wrong person for a particular task. We recently had a very talented designer who came out of the chute with the client’s favorite overall design for a digital product, but whose follow-up design comps kept missing the mark. Rather than beating our head against the wall, we just made the change; swapped out one talent for another talent more suited to the pace and ‘feel’ for the product brand direction. It worked out great, in no time, we were back on track. It was the right move.

Nigel:

Again, our business model gives us a lot of flexibility. We usually shoot for the Extreme Programming model in that we assemble a team dynamic which comprises a mix of business experience, technical talent, innovators, and leaders but most importantly a team that works together, understands each other, and just gets off on producing quality products.

Any final thoughts or advice?

Nigel:

No process is perfect. We see digital product design & development as an iterative process always. We’re continually improving and refining how we tackle new projects. But without question, effective communication between team members and between DN and the client, is paramount. And actually, a true strategy we believe in.

Lisa:

I agree with Nigel, and would add that having people who are generally happy, energetic, and who come to the table with the DN mindset we’re always looking for in our stars, is what I strive for. We put together teams filled with people who enjoy what they do. It makes life much easier during crunch time. You can have the best full stack developer on the planet, but if everyone hates working with him, it can make for a rough project. Respect for one another and collaboration are key.

Nigel:

And I think that when team members have a common goal and a mutual respect for one another, it also eases the process. When everyone has a solid understanding of the scope of the project and has respect for each other’s abilities, it goes a long way. 

Top 5 tips for effectively managing a digital product design & development project:

_______________

1. Communicate, Communicate, Communicate.

Conduct daily stand-ups. Every team member knows what he or she is working on that day and that week. Blockers are addressed and mitigated.

_______________

2. Revisit requirements & business rules.

They’re established during discovery with the client and are revisited frequently – Scope creep kills the project, erodes motivation, and makes planning a pain in the ass.

_______________

3. Establish an MVP.

Make sure the project plan has a clear definition of the MVP and successfully execute that first. Refer to the “wouldn’t it be great” list later, and don’t let that distract anyone.

_______________

4. Assemble the right team.

And don’t be afraid to make changes when needed. One wrong apple makes the whole tree look like it needs water.

_______________

5. Iterate.

No process is perfect, so keep striving to refine your processes with each new project. Wisdom comes by learning something every single day.

_______________

Ready to get started on a new digital product or redesign?

GIVE US A HOLLER

_______________

Subscribing to all our storytelling yet?

We periodically receive requests for advice from friends and colleagues. If you’re not knee-deep in design mud on a daily basis, it’s easy to wonder if things are going along the way they ought to be. And it’s equally common to wonder if you’re spending your design dollars wisely. You want to be fair, but not taken advantage of. You want to make sure that nobody is blowing smoke…

Here’s a recent one that we thought might be useful to more than just our friend:

I contracted out a designer for our company to help us design our new Web app experience. We had wireframes in place so I needed someone to bring them to life.  One of the requirements I gave him upfront is that we have a very weak front-end development team and my preference was we built the design off a Bootstrap/Material Design theme.  He didn’t show any resistance to this early on.

As the project progressed, I noticed that he wasn’t using any themes and, instead, was creating his own design.  I called him out on it and he went back and swapped some of the visual components with ones from Bootstrap (e.g., paging control).  I, then, did a full assessment on his comp and found that almost all of it was custom.

I brought this up to him and he started getting defensive saying that I shouldn’t have hired him if I just wanted him to a apply a theme.  So, I’m in a bit of a bind.

What’s your perspective on Bootstrap/Material Design vs custom?  For our company, it’s most important that we move fast (even with weak front-end development) and provide our end users a super simple experience.

Hmm. A few things come to mind here:

The planning, the agreement, the approach.

There are a bunch of Material Design framework themes based on Bootstrap that already exist – did you guys start there? “…build the design off a Bootstrap/Material Design theme.” If you purchased an existing framework, then I don’t know why the designer didn’t follow and work with the purchased theme – seems odd if that was the plan. If you did not purchase a theme, was the agreement clear as to what you meant by “…build the design off a Bootstrap/Material Design theme?” Because Material Design is more than just color and visuals, it also offers tested layout principles to follow (particularly with regard to the interactions around the Android OS) – but the approach to working with Material Design can and should be interpreted/considered/potentially mixed if designing for both Android and iOS.

As for getting defensive around working with a theme, it still takes design talent to work with a theme // but you need some code chops or a good developer partner to actually execute against a canned theme well – it’s not an out-of-the-box exercise.

As for my opinion – both options can be expensive and turn out badly without a good upfront plan. If you get a rock star designer that understands how to design for a developer – then custom is best. If you get an all-in-one designer/developer that finds it easy to work and pull apart a purchased theme, great – but that’s likely a designer-focused person who can hack at the code vs. a developer who can follow a design aesthetic  (good developers hate purchased themes, faster to do stuff from scratch). But if you were just trying to follow the principles of Material Design so as to execute good UX – then the designer and developer should have been working closely from the beginning. And they both should have known to ask for that up-front.

fast=crap // slow=crap // appropriately steady=quality.

Got a question? Shoot us an email.

Like any red-blooded, country-loving, digitally-engaged American couple, my husband and I spent last Sunday morning shopping online. He for some bike rack attachments for a road trip, and I for new sheets to replace our frayed sets.

This is a rather pathetic first-world problem, but we are selling our home, so I didn’t want to invest in a whole new design/style for our bedding – just in case our new digs have a different vibe.  After hearing an annoying satellite radio ad over and over again for Boll and Branch sheets, I thought I’d check them out.

I found the whole user experience remarkably easy and intuitive. I was greeted with a $30 off-my-first-purchase-coupon-offer, which I quickly dismissed after determining that my satellite radio coupon code would give me a better deal. The website’s photos were big, bold, and beautiful, and visually answered nearly all my questions. Option selections such as size and color were in big print and simple to navigate – a bonus for my deteriorating middle-aged vision. The checkout process was a walk in the park. No hassles, no long processing waits while you’re wondering if you actually pressed a button or not, no repeat entries – clear bold calls-to-action (CTAs) so you know exactly what to do next.

Meanwhile, as I was delighted with my quick and facile purchase, my husband was grumbling loudly at the other end of the sofa.

“Jule, you gotta check this out,” he said.

I gathered my robe, and slid my coffee over to his end.

“I mean look at this! It is so irritating!” I knew where this was going.

“I know exactly what I want to look at, but they’re making me enter all this junk first. Okay, so now I’ve done that, and I have no idea if what I’m seeing matches what I need now. I want it for my truck, but they’re modeling the rack on a car.”

He was exasperated. The company was Yakima, one I hold near and dear to my heart due to a native allegiance to the Northwest. We have spent thousands of dollars on Yakima equipment – from Rocket Boxes to ski racks to bike racks for just about every motor vehicle imaginable. Suffice to say, we’re fans. I’d almost go so far as to say to we’re influencers in the parlance of Malcolm Gladwell. But here’s the deal, my husband was so frustrated with the user experience, that he abandoned the purchase. He figured out a way to make due with what we had. If you go to the website, it looks beautiful. The user interface or UI, is modern and appealing. It’s the user experience that was miserable.

So there we were. A once blissful couple wiling away our morning with our laptops, Meet the Press, and our credit cards burning in our hands – both intent on a purchase. And due to user experience (UX), the too frequently ignored brethren of UI, one purchase was gleefully made, and one purchase was angrily abandoned.

If you’re building a new digital product or updating an existing website, make sure the firm you’re working with knows the difference between UI and UX. Designing North Studios’ Managing Director Lisa Peacock likes to say, “UX should inform the UI. We’ve all been to art school – we know we can make it look good, but can we make it useable.” That’s the problem your firm needs to be able to solve.

Think of the money, time, and effort you expend on finally getting BUYERS to your website. Not just looky-loos, but BUYERS. Don’t blow it once you’ve got them there. UX is not optional. Our weekend foray resulted in one happy customer, (who will be a return customer), and one temporarily lost customer. Had we not already been avid fans of Yakima’s products, we wouldn’t consider trying again. Fortunately, the coffee was good, the PJs were cozy, and Meet the Press was entertaining. Not even crummy UX could spoil our Sunday on the sofa.

Wow. Big news for us designers. After two years of deliberation, the U.S. Congress quietly passed a bill to add a new letter to our Latin alphabet yesterday. The news was buried behind the Trump/Cruz wife mud-slinging and Bernie-Bird-Miracle on page 12 of the New York Times.

The letter, which is most commonly described as a combination of the letters “N” and “G,” will sit between “N” and “O” in the alphabet.

“Academics across the English speaking world have long thought that the NG (pronounced eng) never should have been eliminated when we transferred from the Phoenician alphabet to the current Roman or Latin alphabet,” said former Secretary of Education Arne Duncan. “It endured the same kind of critical debate as the ampersand, but it has emerged triumphant.”

While the single character will replace “NG” creating some content economies, the fiscal costs for government, publishers, and corporations to roll out the change will be extraordinary.

Why is this such big news for designers? Think of every font we use today. The new letter will need to be added to each and every one of them. Think of all of those gorgeous campaigns and websites you’ve worked on – they now all need updating.

Polish up your resume!

#AprilFools

Small triumphs

Our industry is no different than any other. Some weeks are more of a grind, littered with meetings and deadlines. Others are punctuated with small or large triumphs that energize the team, the project, the day, the week.

This last week proved to be the latter. Our tagline at Designing North Studios is, “It’s not a location. It’s a mindset.” We aim to consistently deliver north of expectations – a hover above what’s expected. This week, after working around the clock, quite literally around the world, we presented design comps on a very large project (still cloaked in secrecy).

Exceeding expectations

Instead of delivering the minimum number of contractually obligated design comps, our design team provided twice that. They were on a roll, and let their creative juices and our discovery findings be their guide. Because we are responsible for providing content, we were also able to include key messaging that led to a more authentic initial experience for the client. Hence, the client was able to grasp true manifestations of the end product in a variety of styles and formats.

The client had provided good direction in the form of inspirational websites, but in the end, the winning design took the benchmark websites to another level. The client was able to see what they had initially imagined, and then, although they liked those concepts, they were able to confidently eliminate them as a design direction. They weren’t wondering, “What if?”

A good  kind of unusual

The selected design direction featured key elements of the inspirational websites, but cleverly incorporated the client’s branding guideline components in an unexpected way. Or as the client said, “…in an unusual way – the good kind of unusual.” Our designer had provided three variations on his particular theme, so the client was able to pick and choose the favored blocks for moving forward. We concluded the design comp review (all done on GoToMeeting from coast-to-coast) with great enthusiasm and excitement for the next stages of the project.

The seminal lesson here was that the extra effort was not at all wasted. By seeing several concepts of what they thought they wanted side-by-side with a more innovative approach, the decision process was unambiguous. Thus, the overall project can proceed with greater confidence, and likely with less iteration.

More soon!

Not a subscriber? Jump on board.