Easyquote.se approached DNA to help build out a landing page template that they could use for the multitude of verticals they target on the web. Once we understood their target demographic and the core objectives of the landing page: 1. Users engage with the sign up flow 2. Educate the user about Easyquote's easy process 3. Localize SEO we set out to incorporate these goals into our design.

Web Landing Page Template Design

After the discovery phase we will set out to mock up lo-fidelity wireframes to quickly bounce ideas around. After a few volleyball iterations tossing ideas back and forth we are able to land on a design that makes the most sense while achieving the core objectives of the landing page.

Localized SEO

We used contrasting colors to draw the users eye to call to actions and added extra reinforcement to the sign up button on the hero image. Below the value proposition & tagline we had a small infographic that explained just how easy using easyquote was. If the user was still not convinced below that a video breakout explained the easyquote process with a block of text for people that wanted to learn more before committing. The block of text also served as valuable SEO keywords for spiders to crawl and rank the landing page. In the footer we localized SEO by adding in a locations column for Easyquote to propagate with the cities that they service.

Santa Barbara Graphic Designer

Charit.ee came to DNA looking to create a dashboard design to pitch potential investors about their startup. Working closely with the founders we were able to understand their core business objective, brand guidelines, and vision for how the backend of their product would work. After defining our teams insights we set out to create a wireframe of the dashboard.

Santa Barbara User Experience Designer

First we created a Trello board to prioritize the most important data sets from top to bottom. Once we understood what information the end user required we set out to build a wireframe around these findings. We iterated several times internally massaging the wireframes until the user experience felt seamless.

User Interface Design by DNA Imagery

The end result was a clean & modern dashboard inline with the Charit.ee's brand guidelines. We ensured that the end user could access the most pertinent information, in this case how many tickets were sold, front and center while making sure it was easy to see key metrics about their campaign. This allows the end user to get a quick & succinct snapshot of their campaigns activity. Understanding your end users needs is critical to creating human centric design that improves the efficiency of navigating your product. The end result? Happy users and happy users make for a happy business owner. Contact Santa Barbara Graphic Designer today to see how we can help your business thrive.

Santa Barbara Graphic Designer DNA Imagery

Plot.ly came to DNA seeking a refresh of four cheatsheet's for developers to reference to aid them visualize data. As in most cases our clients need help not only creating an aesthetically pleasing graphic, but with the organization of information to display it in a coherent way to the end user.

What they currently had in place was this. Serviceable, but I think we could do better.

After a quick consultation and understanding Plot.ly's brand & core objective we were able to piece together a graphic that intelligently laid out the information in an easy to understand format. Drawing the end users eye to the left panel to follow the start up steps before diving into the main content of the cheatsheet helped onboard users.

The result? Plot.ly loved the graphic so much that they sent it out to their Twitter followers where they received over 20 retweets & 60 likes in 24hrs. Speaking of, if you're active in the twitterverse follow us at @dnaimagery and say hi!

User Interface & User Experience Design by DNA Imagery

Plot.ly had another project that needed a once over, but this time instead of merely graphic design it was also a user experience issue. The problem they were having was laying out the dropdown menu's in a meaningful way while still being able to maintain all the functionality of customizing the graph. Here is the web app that we were to work with:

As you can see this could be improved on a few fronts, so we immediately went to work. First we made sure our design would fall within their branding & style guidelines. From there we dissected the best way to layout the menu structure before stylizing the entire web app. Here's what we came up with:

We placed the graph itself in a wrapper with a white background because we all know that higher contrast draws the human eye and the graph is what is the most important piece of the puzzle here. By pushing the menu across horizontally we were able to create a balanced header bar that didn't feel crammed in the corner. We also took "Time" out of a drop down menu and turned it into a switch since there was only 2 options to ease the end user experience by making the options more accessible. We did not change the color of the graph bars because Plot.ly's core color is blue & the warm orange has great contrast against the cool blue to make sure that the most important information pops out at the end user. Putting UI & UX best practices use goes a long way in making an enjoyable experience for your users.

They always say the best testimonials are the ones you don't pay for. Clearly Rob was blown away and if you are too make sure you reach out to us to see how DNA can help you on your next project. Learn more about DNA on our official website at Santa Barbara User Experience Design or give us at ring at 805-680-4931

Local Loans User Experience Testing

--

When designing an onboarding flow for Local Loan’s borrower app, our goal was to increase the number of users who input their
invite code and connected with a loan officer.Our hypothesis was that once the borrower has input their invite code both the borrower & loan officer
would receive more value, and thus have a higher likelihood of converting the loan officer into
a paid customer.Here’s what the borrower home screen looked like at the time:

The borrower would have to tap on "Invite Code" & then input their invite code they received from the loan officer. The concept was sound, but the user experience still needed a bit of polish.

The user onboarding flow was simple with no tutorial, but required the user to know to tap on "Invite Code" even though the green "Get Pre-Qualified" button was attracting all of their attention.

Recruiting the right
people

--

In order to get the right results from the user test we
needed to recruit the right users.For our Local Loans user onboarding designs, we
wanted to get feedback from 10 people.To recruit them for the study, we sent emails like this one to unengaged
trial users.

--

Hi Steve,

My name is Derren and I am on the research team at Local
Loans.I see you had signed up for a
trial of Local Loans recently.

How’s everything going?

My team is interested in improving the Local Loans
experience.Would you be open to
touching base on a quick call to discuss why you signed up for Local Loans and
your experience with invite codes thus far?If you’re available
this Thursday (4/21), Friday (4/22), Monday (4/25), or Tuesday (4/26), I’d love
to schedule some time to talk.

I just want to clarify that this is not a sales call.You will be speaking with myself and a Local
Loans product manager.

The goal of the call is to learn more about your experience
so far with Local Loans, why you started a trial, and to show you a new feature
we’re working on to hear your feedback on it.This is not a sales call – it is purely for research, but we’re happy to
answer any questions you have about Local Loans along the way.For taking my call, I will be happy to offer
you a $25 Amazon gift card.

The call will take around 30 minutes and will be at a time
of your choosing within the next week.I
look forward to hearing from you.

Thanks,

Derren Ohanian

Usability Testing & Research

Local Loans

--

I focus on a few key points during these e-mails:

I make it very clear that it is not a sales call.This will improve the odds of people
committing to the call.

Include an incentive to improve the odds of
people committing to the call.

Select users that have signed up, but did not
complete the task you wanted them to.This will improve quality of results from potential users. In this case we were looking for loan officers that have not sent out invite codes to borrowers or realtors yet.

Generally response rates to these types of emails are pretty
high (around 50%), so I will send out no more than 10 at a time until I have
the desired number of tests scheduled.If people do not respond to the first email I make sure to follow up a
second time before dropping them.

At Local Loans, we schedule these calls virtually and use Appear.in
to run them.When possible we will
schedule meetings in person & videotape sessions.

Appear.in is awesome & free. Little is better in the world than being awesome & free!

Creating the User Testing Process

--

I follow the same process for each user test I perform. This helps ensure that I
can compare my observations apples to apples, and draw logical conclusions
without bias from my findings.There are
three primary parts to my process.

Background questions

Task-based walkthrough

Wrap up

Background Questions

First I ask the basic questions to get to know the user, put
them at ease, and discover relevant information about their background
with the product thus far.Here are some
background questions we used in the Local Loans user test:

How did you find out about Local Loans?

What do you know about us?

How would you explain Local Loans to a friend?

How do you keep track of referrals & leads?

How do you find potential leads or clients?

Why did you decide to start a trial?

What expectations did you have about what Local Loans is?
Did the trial match that?

What have you done with Local Loans so far?

What value have you found in Local Loans?

Why haven’t you used the invite codes to lock in potential leads?

I tend to stray away from yes or no questions to get the
person to open up about their experience.

Task-based
Walkthrough

Next, we move to the task-based portion of the
interview.Before the user takes any
action, we set the context.In our Local
Loans test, we told one user to “Imagine that you’ve been doing research on the
Local Loans app and decided to start a free trial.You know that you’ve been looking for a way
to lock in new business.Start the trial and walk me through what you are
doing.”

We knew this user was looking for a way to lock in leads through background questions and our recruiting processes,
and that’s what we use to make the tasks contextual.We could have framed the task for another
user by saying, “Your boss said you need to sign up for Local Loans and decided
whether it’s the best lender solution for your company.Start the trial and explain what you are
looking for.How do you decide that
this is the best solution?”

During the task based portion of the interview, I ensure
that we:

Record the session so I can share the observation with my
colleagues later on.

Encourage the user to think out loud.I want to hear everything that goes through
the user’s head when completing the tasks.

Tell the user that I am testing my designs & not them.This helps put them at ease by letting them know they cannot do anything
wrong.

Get every user to go through the same tasks without my
help.This allows me to aggregate my
findings and agree on design changes with my team.

At Local
Loans for this test we gave users a beta product to test with. However, I have used staging versions of
software, hand drawn mockups, or clickable prototypes built in Invision as well.

With each new screen or step in the task, I allow the user
to think out loud and make a note of his or her initial impressions.If I feel that there is more to learn then I
will ask the user follow up questions to gain further insight.

Wrap Up

Once the user has completed all the tasks I’ll wrap up the
interview. Letting them know that they have reached the end of the tasks, their feedback was helpful and insightful, before finally thanking them for their time and saying goodbye. Shortly thereafter, I follow up with a thank you email and the promised compensation.

After each interview, I’ll take 10 minutes to go over
everything I just heard with my team.This ensures that everyone who was watching the interviews is on the
same page and leaves a little time for discussion and
synthesis.This 10 minutes potentially saves hours of
debating and going over video later. It is vitally important to digest the most important takeaways, document them, and decide on the next step together to keep the process moving forward smoothly.

Turning Observations into Action

After all the interviews have been completed its time to aggregate and see how many users completed the tasks. This could be as simple as:

Sharing questions or comments that came up during testing tend to be helpful as well. For example, I took note of things like:

“What
if I want to service multiple areas?” - This user wanted the ability to
represent multiple localities to be able to receive more leads.This indicated an additional potential
revenue

"The underwriting
guidelines allows me to completely do my job on the go. This is great!” – This indicated that the feature
set was correctly chosen for the product.

Conducting these customer interviews, there were three
themes that emerged:

Loan Officers were sending invite codes out, but Borrowers were confused about how to input the invite codes properly.

Loan Officers wanted to share the invite
code with realtors as that is their primary means of referrals.

Add
tooltips to help explain what each field is during the sign up process to
reduce confusion.

From these observations, we made the following changes to the product:

We
added 5 marketing slides to the user onboarding flow at the start of the
app.

We added the ability for users to share
their invite code with realtors & track the amount of referrals they receive
from realtors.

We
extended the onboarding flow to include tooltips and additional step by
step walkthrough once the user was inside of the dashboard to walk the
user through the most valued features of the app.

After making these changes, we shipped a variation of the
below screens and saw a 400% lift in the number of invite code use after one
week. All because we solicited feedback on a design before building it out.

Instead of relying on the borrower to find out where the invite code was we prompted each user at the beginning of the app to input their invite code. If the user did not have a code they would fall into the top flow which included new user onboarding marketing materials. If they did have a code they would link directly with the loan officer & begin their pre qualification process.

123Compliance aimed to refresh their website and separate
themselves from their competitors.Taking a bird’s eye view of their site map, information, and objectives
we focused first on simplifying their message and then laying out the
information in bite size pieces that could easily be consumed by visitors.Taking this approach we broke down a complex
product into a straight forward value proposition that would attract new
customers to their suite of products.

Wordpress Plugin Integration

Integration with comprehensive retargeting online software
Hub Spot allowed 123Compliance to track users journey’s through their website
and provide them with new content every time they revisited their website.The ease of setting up multiple landing pages
allowed 123Compliance to not only create landing pages for each individual
product, but also allowed them the ability to split test and optimize their
conversion rates.

Responsive Website Design

With nearly 50% of internet traffic coming from mobile
sources it was imperative that the web site not only look great on desktops,
but tablets and mobile phones as well.We created multiple responsive break points to ensure that the 123Compliance
website would look & perform spectacularly on any device screen size
regardless of make or manufacture.

Santa Barbara Web Development

Prior to the site going live we provided a hi-fidelity
clickable prototype that allowed 123Compliance to interact with the website
before it went to development.This
allowed 123Compliance a feedback loop for us to make continual improvements to
the site. We develop on a staging server which allowed 123Compliance to
experience no downtime as they could keep their existing website up until we
migrated the new website over to their servers.Lastly, we future proofed the backend of the website for growth &
scalability should they want to add additional pages and or drive heavy traffic
to their website.

The Storygize team was in the middle of engineering their
new online platform, but did not have a UX or UI designer on staff to help aid
with visual design & flow of the platform.They called on DNA to refresh the product and streamline it to match the
rest of their brand.We worked closely
with Storygize to understand their product, vision, and message.Based on the insights gathered during the
discovery phase we proposed a new style guide to model the web app off of,
provided hi-fidelity design mocks as examples, and marked up their existing UI
so that their engineering team could easily implement the designs to spec.

Before & After

Santa Barbara Graphic Design

The result was a clean and crisp interpretation of their
user interface that helped direct users to pertinent information instead of
wondering where or what they should be looking at.By directing users eyes using color and
contrast we were able to help guide users through the platform.We modified how users interact with the
dashboard ensuring they are not bombarded with information all at once.Instead of being overloaded with graphs we
allowed users to interact with only the information that matters to them the most.This not only cleans up the dashboard of busy
graphs, but allows users to focus when moving through the dashboard.

By supplying a style guide, ui kit, and having their
existing ui screens marked up with notes from our senior visual designer, Ana,
we were able to ensure that their engineering team would know exactly how to
implement the new ui into their existing platform.This process also cuts down on overhead
saving time & money for the client as we are not mocking every single
screen.Thus allowing us to move faster
in an agile work environment that encourages iteration.By using this methodology we can iron out
major ux issues before the product goes live.

Santa Barbara WordPress Design & Development

DNA Imagery is a Santa Barbara Web Design firm that specializes in WordPress development for websites & mobile sites. We are happy to offer a complete suite of WordPress development services including front end and back end design and development. For a client who needs a WordPress site we offer fully custom web design with a customizable WordPress Theme that can easily be managed.

What is a Content Management System?

WordPress is one of the most popular platforms online and for good reason. We are able to offer a wide array of designs, widgets, plugins, add-ons, search engine optimization, and a content management system that allows you to update your site at your leisure.

A content management system allows you to publish, edit, modify, organize, delete, and maintain your website from a central dashboard. Often referred to as a CMS for short these back end systems help run websites containing blogs, news, and shopping with relative ease compared to hard coding by hand.

The WordPress & SEO Bond

We started using WordPress for our Santa Barbara clients because
“google loves WordPress” not only is WordPress easy to use for our Santa
Barbara clients WordPress is easy to crawl and the google spider bots can easily navigate WordPress websites, for a Santa Barbara WordPress developer that is the best you could ask for.

Google is constantly changing their ranking system and smart content
management systems and Santa Barbara SEO is essential to maintaining a
strong web presence in the local Santa Barbara website community and online search
results.

More about WordPress UX and UI Design.

UX Design refers to the term User Experience Design, while UI Design stands for User Interface Design. Both pieces are halves to a greater whole of quality web design & development. UX Design requires understanding of human interaction and psychology. Whereas, UI Design is a creative field that deals with the visual arts and bringing your ideas to life.

Here at DNA Imagery we specialize in UI & UX Design for Web Site Design. Through a highly iterative process we can help build your project from the ground up massaging out issues early on in the development stage so they don't show up once your website goes live online.

About

DNA specializes in web and mobile app design and development in Santa Barbara. We have been in business for 10+ years while working with enterprise level companies & startups to help build custom digital products.