Category

Design

"Design is not just what it looks like and feels like, it's how it works."

Design Sprint Cheat Sheet

February 25, 2017
Comments Off on Design Sprint Cheat Sheet

The guys over at Google Ventures are pretty smart! They unveiled their process of design sprints in a book aptly named Sprint. The full title succinctly describes its benefits —  How to Solve Big Problems and Test New Ideas in Just 5 Days. I read this book over last summer, it’s an easy read and remarkably insightful. Design sprints actually do help you solve big problems and test new ideas.

It’s not enough to just have a process anymore. Everyone, every agency, every firm has a process that’s guaranteed to be better than all the others because it’s “integrated.” In order to rise above the competition and have your clients really connect with their users, you need to get insight from…who else…the users. But in order to do that in a really efficient way, you can’t build out the website or mobile app first. So… you prototype.

The Theory…

Here’s the theory: when working with any company or business, you can solve really big problems in one week by getting together in a room with the right people, the right tools, and the right challenge and performing exercises like design-thinking, rationality, empathy, creativity, prototyping, and testing.

Now, in the words of John Maeda, design-thinking is just another phrase for business execs to feel good about doing design stuff. LOL! But I think there is something to getting in a room with your clients and doing these different exercises to uncover the answers to some really hard questions when it comes to your digital properties.

I’m going to walk you through an abbreviated checklist (or cheat sheet). It’s changed a little to mimic a process that I’ve used in the past and I’ll go over pre-sprint activities, the sprint itself, and post-sprint wrap-up.

Remember: you need the right team, the right tools, and the right challenge

  1. The Team:
    • Agency Side – it’s usually two designers, a strategist, and a project or account manager.
    • Client Side – at least one decision-maker. Someone who has the authority to call the shots relating to your challenge.
  2. The Tools
    • Conference room, post-its (lots of them), colored circle stickers, whiteboards and/or canvas paper, markers.
  3. The Challenge
    • Usually something that’s super expensive, like your client wants to spend $500k on a mobile app that has no users yet (challenge: to see if it’s even viable in the market). Or maybe your internal team is stuck on a big project and needs to get some creativity flowing.

Let’s begin…

Pre-Sprint Activities

You’ll need to do some research and collection before you go in and do the sprint with your client. The first thing you’ll want to do is an intake sheet. An intake sheet is simply a “worksheet” that gathers information on your client.

Some things you’ll want to know are obvious, like, client overview. Company name, number of employees, etc. But then you’ll want to know major markets, regional hubs, who are their competitors, what are the long-term business objectives and/or vision. Something like this:

Client Intake Sheet

You’ll also need to do some research on your client’s competitors so you know what they’re doing. Look at their websites or mobile apps and make note of what’s cool, what’s not cool, certain functionality or features, etc.

And also look into your client’s users. Who are they, what do they do, where do they hang out online, etc. This pre-sprint phase is pretty intensive. There’s a decent amount of upfront work that needs to be done. But then we get into the fun part…sprint week!

Sprint Week

Every day working hours will be from 10am to 5pm with a one hour lunch at 1pm. So, 6 hours a day – that’s how much you’ll work with the client. But you’ll find that the internal team is working much longer especially on the day you prototype.

Day 1: Understand


day one

  • Team Intros & Agenda
  • Client Talks (Vision, Functionality, Future State)
  • Innovation Talks / Expert Talks
  • “How Might We”

Day 2: Explore


day two

  • Morning Review
  • Personas: Day in the Life
  • Raw Ideas / Big Ideas
  • Crazy Eights / Solution Sketches

Day 3: Focus


day three

  • Museum Art / Dot Voting
  • Disucssion / Decision
  • Wireframes / Storyboards

Day 4: Prototype


day four

  • “Just Enough” Mentality
  • Prototype Tools
  • Divide and Conquer
  • Prototype

Day 5: Present


day five

  • Finish the prototypes
  • Present to the client
  • Wrap up / Next steps

Once the sprint is finished, it’s time to test and survey your users, which brings us to Post Sprint Week

Post-Sprint Week

You’ll need to fill out a survey (I use Google forms, super easy) and set the stage for the users. The prototypes won’t be totally functional, so let the users know that! You will usually do some baseline questions to get a gauge of your users, and asking them about who they are demographically never hurts. Then you’ll want to ask the same questions about each prototype, but it’s really helpful to send half of your participants Prototype 1 then Prototype 2, in that order. Then the other half of the participants send Prototype 2 first, then Prototype 1. Many times users will latch on to the first prototype they see, so this technique helps mitigate that risk.

Once the surveys are finished, you can start grouping themes (which is a whole other blog post – I’ll write soon!). And you’ve got real feedback from users and this helps your clients decide whehter or not to move forward with a project or mobile build before it drains all their resources for it.

 

Working With Premium Themes

July 12, 2016
Comments Off on Working With Premium Themes

We’ve all seen it — the vividly pictorial mountain landscape as the main hero image for the newest theme out there. It screams out professionalism and beauty all in the same sweeping breath. It entices us to click ‘buy’ or ‘activate’ and then…nothing…”wait..where’d the cool picture go?” Working with premium themes (and free ones) can be a discouraging activity, but it can also be a largely rewarding experience when you figure it out!

I recently redesigned my portfolio website at adamlamagna.com, and what I mean when I say “redesigned” is that I used a pre-made theme. It’s called Uncode – Creative Multiuse WordPress Theme, it was hard to use at first, but I’m going to shed some light on that in the following post. I’ve used several premium themes on a number of my digital properties. The ones I’m familiar with are Divi, Nexus, and Harmony by Elegant Themes, Brook by Korra, and Uncode by undsgn. I’m also familiar with some free themes like Sydney by aThemes, and pretty much the entire suite of WordPress.org’s 20-something series—TwentySixteen, TwentyFifteen, etc. Working with themes is a skill that should be learned by everyone (my little sister learned how to do it) so people can have the freedom to put there stuff out there!

First, the differences between free and premium themes…

I’m not sure if there is a huge difference working with premium themes versus free themes, both need to be configured (some more than others), most are compatible with the suite of popular plugins including page builders, and given an eye for design… sites can look downright professional regardless of whether or not they cost money. So, I would say this answer depends greatly on your budget because the only real difference I see is the cost.

Premium themes do sometimes include premium plugins that you would have to pay money for if you didn’t buy the theme. They’ll also include pre-made templates (which is nice if you don’t have that eye for design like myself!), but some free ones include templates too. Years ago, a WordPress user would be browsing the themes repository and find a theme they liked, usually because they thought it looked cool. They clicked on the button to activate the ‘live preview’ and fell in love with the theme. But when they installed the theme and activated it, it looked nothing like the live preview! Now, that’s only sometimes the case. With many free and almost all premium themes, there will be pages, posts, portfolio pieces that are pre-made and configured for you. Most times, all you have to do is import the ‘dummy’ content with it, and you’ve got your site. Now just substitute your own content; images and text, and you can be up and running in a day or two depending on the size of your site.

The premium theme battle…

I’m torn between the premium themes I’ve used. For the sake of this post and not making it too long, I’m going to review 3 premium themes that I’ve used and have familiarity with. They are:

  • Divi by Elegant Themes
  • Brook by Korra
  • Uncode by undsgn

I’m also going to look at a few different factors:

  • Documentation
  • Support
  • Configuration Process
  • Ease of Layout/Intuitiveness
  • Responsive
  • Cost

Let’s begin…

DIVI BY ELEGANT THEMES

About two (or so) years ago, the Divi theme made a splash! It was released in 2013 as the most intuitive page builder and theme on the market. I personally know a lot of designers that use Divi to this day because Elegant Themes keeps iterating on it that improves the experience and the output. It is a cool and versatile theme.

Divi’s documentation is pretty vast and easy to understand, they also have video tutorials explaining the page builder and theme options. When I dove into building my first Divi website, it was pretty straightforward. All you do is click ‘Use The Divi Builder’ and you can start to create cool layouts.

Screenshot of Divi builder


It’s pretty intuitive right off the bat. As you can see from the above screenshot, it asks you to insert columns. You can choose how many.


Screenshot of Divi Builder columns


After you’ve decided how many columns that particular row will be, you can start adding modules, and the list of modules is pretty vast; images, text, headings, contact forms, call-to-actions, blurbs, etc.


Screenshot of Divi builder modules


Again, it’s pretty straightforward without having to read tons of documentation. So we click on a module, let’s create a ‘blurb’ – it’ll ask you for some information, like the title of your blurb, if you want to make your blurb a link, if you’d like to use an icon, etc. But the cool thing about the Divi Builder is that there’s instructions right in the module itself. See below:

screenshot of the blurb module on Divi


If you’re not all that familiar with modules or building websites in general, then those instructions really come in handy! What’s the end layout look like, though? Well, let’s see.

DiviBuild
The Divi Builder on top, and its output on the bottom

Now, it might not look like much, but it took me about 5 minutes to make that layout. And the more familiar you get with the modules and Divi Builder, the quicker you’ll be able to do it. Divi also has ‘Theme Options’ which are kind of like the global site settings. You can add your logo, favicon, integrate with MailChimp, enable social media icons and responsive shortcodes, fonts, smooth scrolling, and more. Responsively, the layout breaks down the way it should, with the left columns going above the right ones.

So, overall:

  • Documentation: Good documentation, easy to understand.
  • Support: Really great, quick to respond and informative.
  • Configuration Process: Relatively straightforward in the Theme Options
  • Ease of Layout/Intuitiveness: Super easy, build pages in minutes. Easy to get started without reading the documentation, but the deeper you dig into the modules, the more a beginner will need help and have to refer to the documentation or support.
  • Responsive: Works well on tablet and mobile.
  • Cost: Elegant Themes has a yearly (or a one-time lifetime) subscription model. I would recommend paying the extra dollars for the lifetime membership. See here for more details: https://www.elegantthemes.com/join.php

Overall, Divi is a pretty kick-ass theme!

BROOK BY KORRA

I find Brook to be a light and responsive theme that can’t be configured with a page builder (well…unless you add one in with a plugin, but let’s not!). Regardless, it does have a some good things going for it! It seems to me that Brook is geared toward blog sites, in fact this site that you’re reading now is done with the Brook theme! Again, it doesn’t have a page builder, so the way to configure the homepage is a little trickier. You’ve got to have your homepage as your latest post page, which you’ll find in WordPress core under Settings —> Reading. Now, you will need some content before this theme looks remotely close to what the ‘live preview’ looks like on Themeforest, and they give you an option to import the demo content. Right from the beginning the theme was a little more difficult to work with than the Divi theme, but I really liked the look of the live preview, so I knew I could get it to work.

But I had to read the documentation, and if it’s one thing Brook had going for it—it’s the documentation. It’s plentiful and easy to digest, from installing WP and getting the child-theme setup to widgets and theme options.


Brook Theme customizer


The Theme Options for Brook are in the native Theme Customizer seen above. It gives you options to add a logo and favicon in the General tab. You can change the layout of the header, sidebar, and footer. You can pick your own typography, color sets, and background and do a lot more.

One thing I noticed was that in order to get the carousel on the homepage to work properly, you had to crop all your featured images to be the same size. Otherwise the carousel will scale up to the largest sized photo in your featured images. But within a post, there are more options to add a certain sized featured image for different areas, the theme just recommends that you install the Advanced Custom Fields plugin. If your post was going to be in a widget area in your footer and you wanted to use a square image instead of a rectangular one, there’s options to do that. In fact, there are more post setting options to choose from when using the Brook theme and Advanced Custom Fields:

Back-end of Brook post settings


There are also different WYSIWYG formats and elements. So if you’d like to add a dropcap, like at the beginning of this sentence, you can! It adds a little more flavor to your site to be able to put cool elements in your post. You can also add different font sizes, icons, highlighted text, cool buttons and links, image sliders, Google maps, and more! I think it’s a really cool theme to use if you’re blogging about anything, but it’s not super intuitive, you have to read the documentation in order to get it!

  • Documentation: Plenty and easy to understand!
  • Support: Good support.
  • Configuration Process: Pretty straightforward with the Theme Customizer that is native to WordPress, but the homepage is a little more difficult to configure and the documentation will need to be referenced.
  • Ease of Layout/Intuitiveness: Not really easy. For beginners, this theme might be a little difficult to get right, but read the documentation and reach out to support with any questions.
  • Responsive: Works well on tablet and mobile, they even have a tablet and mobile screen option to choose from in the Theme Customizer, it’ll give you a break down of what your page will look like.
  • Cost: $44 on Themeforest.

Overall: This theme might not be for a beginner, but it is a super cool theme to use. I love it! People have commented to me that my blog looks really cool, and I agree. It’s simple, light, not too flashy, and it puts the content front and center (which is important!)

UNCODE BY UNDSGN

My new portfolio site that I mentioned above was done with Uncode, and I will say that this was the most difficult theme to use out of all 3 of them, and this one has a page builder. The page builder is Visual Composer, but Uncode’s customized version of it. When I downloaded Uncode and imported the demo content, it broke my site. I will say that this is a hosting provider issue, apparently I did not have enough memory space with my hosting provider, so that was an issue. Simple fix though, I just called up my hosting provider and they told me how to add more memory. I will say with all the themes I’ve used, I’ve never had one that has maxed out my memory.

When you install Uncode, it tells you to install about 9 different plugins to work the way the live preview does. It has two premium slider plugins included, Layer 5 and Revolution slider, so that’s cool.  And they also have upwards of 60 different layouts preconfigured with the Visual Composer (VC). Which was nice, because if I didn’t have those page layouts already configured, I’d have no idea how to create them. VC is pretty intense.


Visual Composer screenshot


It can separate the elements by content or structure, widgets or WooCommerce (if you have that installed, you don’t need it if you’re not selling anything). But then when you drill down, the options for a single element are super complex. Because there’s not only the element, but the container that it’s in. You can adjust the row settings, the column settings, the element settings. Divi was the same way, but not nearly as many options as Uncode, which could be good or bad depending on how much freedom you want with your layout.

Icon settings for visual composer
Element settings

Row settings - Visual Composer
Row settings

 

Column settings - Visual Composer
Column settings

So, for every element, you essentially have 3 different components to adjust. And you have to watch out for the overrides. Let’s say you leave a color blank, well it’s going to grab the default color that you have configured in your ‘Uncode Theme Options’ – it took me a while to figure out what was going on when I couldn’t get the text to be light on a dark background, even though I had those settings placed in the element. It was because of the default settings in Theme Options here:

Uncode Theme Options
Uncode Theme Options

There are a lot of different theme options, from typography to social media (connections) to individual pages, posts, portfolio pieces, and content blocks. What are content blocks, you ask? Well, they are Uncode’s very own custom post type. Built in to make cool headers, footers, or other content to be used globally if need be. But you have to make sure that when you are adding a layout, you either need to override the theme options, or the look will be what the defaults are set at.

Content blocks took me awhile to figure out too. When you look at a page from the front end:

Classic Agency page - Uncode theme


It looks super cool!! But then look at that same page from the back-end:

Classic Agency - Uncode - backend


You’ll notice that the Heading text in the back-end page is not “Thinkers & Designers” like the front-end page says it is. And the featured image in the right hand corner is not the featured image on the page, so how does this exist? Good question, it exists in content blocks. If you scroll all the way down on the back-end of the page, you’ll notice this little area:

Page options Uncode


Page Options —> Header, and you can select the type of header that you want, which will be placed at the top of the front-end output of the page. The page layout with Visual Composer will start below the content block header, unless you don’t have a content block selected. There are little intricacies like this across the entire site. I was pulling my hair out at times, but the support is really awesome! They also have a lot of documentation, I would strongly recommend starting there because even for a seasoned site builder, who’s used to configuring themes, this one took me awhile.

LAMA website - home page

Now, I will say that the end product looks really cool and the design is worth the hassle, but be prepared to connect with support if you are a beginner…and even if you’re not.

  • Documentation: Lots of it!
  • Support: Great support.
  • Configuration Process: Not straightforward, there are lots of interconnecting pieces to this theme and you have to be familiar with all of them to get stuff to work, and to troubleshoot.
  • Ease of Layout/Intuitiveness: Not really easy. The Visual Composer was not that intuitive for me because there are just soooo many options. After a few days you’ll get used to it and be able to design layouts quicker.
  • Responsive: Works well on tablet and mobile.
  • Cost: $59 on Themeforest.

Overall: This theme did frustrate me, more so than the Brook theme, which I thought was way easier to use. Uncode is big, it’s a lot of code, it’s got a lot going on. But the design is freaking awesome, so it’s definitely worth it in my mind. There’s a cool plugin called VC-Particle Background that I use on my homepage, check it out – adamlamagna.com

Continuing to work with premium themes…

I’ll most likely always work with premium themes, I do think they’re fun to use and can look really really good if configured properly. If you’re just starting out and not sure whether a premium theme is right for you, check out some of these links below!

How to Get the Most Out of a Premium WordPress Theme

Everything You Need to Know About Buying a Premium WordPress Theme

Enjoy your day!

How much does a website cost?

October 10, 2014
Comments Off on How much does a website cost?

After being in the tech space for almost two years, I’ve learned quite a bit when it comes to the pricing of web projects. So…how much does a website cost?

A website costs time, it costs value, it costs behavior, and it costs relationships.

A websites’s cost is dependent on the time is takes, the value it brings, the behavior it causes, and the relationships it has.

Cost all depends…

Many agencies have hourly rates. Our blended rate is $150 per hour, we take our top strategists, our designers, and our developers and average out a blended rate. This is based on time. How long do we think the website will take to build? How many man hours? How many months? Websites can cost time, but they can also cost value.

How much value will building this website bring to your organization if we do right? How much value will you lose if we don’t do it? Value can be really hard to measure, but it’s something that you as a business development associate can help showcase by having your agency come up with an awesome and innovative web solution.

Behavior is another interesting thing to look at. What will the website do? How many features does it have? How much functionality do you need? Someone once told me about the Bermuda Triangle of pricing web projects: Quality, Functionality, and their relation to Cost. Most companies that have a small budget can choose either quality or functionality, but you can choose both.

And finally relationships. Will this be a good and easy relationship? Are they going to be a problem client? Will they listen to my advice?

The reality is, that websites can range from $1,000 to $1 million, it all depends on what you want! I read this incredible article, it’s a bit a the long side, but well worth the read. It’s all about agency costs and why we hate estimating. For anyone who’s been in my shoes, it’s really tough when someone asks you to give them a number, “well, just give me a number” – no, that’s a bad idea

Why? Because in order for me to give you an accurate number, I need to know more about what you’re trying to do. The solution is there, but it usually takes uncovering. I need to know things like business objectives, any creative objectives, what’s your timeline, what’s your budget. People have a tough time telling me that last one – budget. But I need to tell you why it’s so important. Budget dictates a lot of the solution finding process. It tells me that if you only have $15k to work with, then we probably can’t do any custom design for you, but we could take a pre-made template off the shelf and configure for you to be your own.

It’s a hard web to weave, and budget is crucial. If you don’t want to tell me your actually budget because of competition and the like, then I still need a range. Are you working with 10k or 100k. And beyond that I need to know what’s your timeline look like? Do you have a realistic timeframe? I ask a lot of questions, but this helps me get the answers I need to make a great proposal for you on your next project.

And just to let you know, not everything for a website takes 15 minutes. I love that one – “hey, I need you to put some forms on this site, that should only take a few minutes, right?” – WRONG! Working with working software is tricky, and can be daunting. So, keep in mind that it’s a process, anything you want to do (with the exception of writing a post, that’s relatively straightforward) will take time and therefore, money.

Check out this incredible article that I was talking about, it’s really amazing, but make sure you’ve got some time because it’s long!

How much does a custom WordPress site cost?

Have any website ideas, or are thinking about putting together that next blog? Let me know.

 

Agile Methodology

October 7, 2014
Comments Off on Agile Methodology

The agile approach is called many different names – scrum, sprints, agile. They all have similar concepts and they all work differently for each individual team. While building any type of software, whether it’s a website, phone app, or some type of cloud based CRM, the agile approach is the best way to go. Why, you ask? I’ll tell you, but first….

For those of you who don’t know, there are essentially two different approaches to web projects – waterfall and agile. Waterfall is your traditional approach to a project. An RFP is given to an agency. That agency wins the RFP by writing a killer proposal or one that’s priced according to the client’s budget. And the project begins, usually with a kick off meeting discussing important core features and business objectives. A discovery then occurs where developers come in and get a feel for the client’s information architecture (content types, categories, etc.) and database structure (fields, fieldsets, etc.). The designs are started and shown to the client, either with a yay or nay. And then the build takes place. The critical part to remember is that the design comes before the build in this approach. That means that you have to build according to the design and not the other way around.

This approach can be tedious – relentlessly. What happens if that design you made doesn’t fit right over the build you’re architecting? What happens if that little tiny icon over that image breaks the navbar? What happens if newsletter signup gets cut off on a tablet or mobile device? What happens if, what happens if? These are the questions you’ll find while taking a traditional approach. So, what we do is change that approach to be agile. It’s a cool word, right?

Agile is the evolution of collaboration and iteration unveiling the right solution. And you do this by prototyping the build first. There are some great core values that the agile approach preaches and you can find them written in the agile manifesto. You do all the normal things you would do in an engagement like a kick off meeting and a discovery phase where you learn about the company, objectives, structure and architecture. But when it comes time to get down to the nitty gritty, you prototype and then you iterate. And you start the design while you’re prototyping. What does this give you? It gives you a working, clickable, browsable, some-what designless website – what we call a gray site. But then you keep iterating and things start to take shape. It’s a process that lets you build a site that works properly and doesn’t lock you in to a final technical spec.

And trust me, the design will look good, great in fact! But it needs to sit on top of a fully functional website. What will make a visitor leave your site quicker? Not having that cool icon sitting over the image the way you wanted it to or having a website that loads slow and doesn’t function properly across all platforms? Yeah, I thought you’d say that!! So, if you run a team of developers and are thinking about going agile, I strongly recommend it.