Below is a collection of my tips and feedback from a creative branding workshop I led during the most recent 500 Startupsā€™ seed accelerator program, Batch 19. The goal was to teach startups to apply design thinking methodsĀ to improve their UX/UI , and thus increase user acquisition and market growth.

Did you know the human attention span is shorter than a goldfishā€™s?
[Fun Fact about Attention Span] Goldfish:Ā 9 secondsĀ > Human: 8 seconds.Ā šŸ˜±

Yep, your website has a lot of work to do in a short amount of timeĀ to get your key message to your audience.

How do you do it? Here areĀ 7 Design Thinking Tips to Improve Your Growth RateĀ šŸ”‘:

1.Ā Integrate

Combine a strong marketing message (content) with effectiveĀ visuals (form).

My Feedback for Bstow: Bstow rounds up your spare change to charity.

Below is the original design for the top half of Bstowā€™sĀ  home page. It has a simple marketing message, ā€œDonate spare change to charityā€. However, at first glance, the website looks like it’s featuring an analytics product.

Neither of the key visuals, theĀ app interface on the phone nor the blue background, reflect the marketing message – ā€œdonationā€ andĀ ā€œcharityā€. How does theĀ graph on the phone have anything to do with charity? Why the blue background? Ā They are disconnected. There is no integration of the formĀ & the content.

bstow-old-top

I asked the founders to look at their analytics and see whichĀ part of the website gets theĀ most engagement. They told me the mostĀ engagement comes from the “causes” section, which on the website you have to scrollĀ all the way down to find:

bstow-attention

Yep, thatā€™s a lot of scrolling…Ā By the time you scroll down to the causes, those Goldfish have already lost their attention – let alone humans!

I suggested the Bstow team integrate their charity causes into the homepage visuals by using the iPhone screen as a frame, showcasing charity partnersā€™ content one by one.

Homepage After Feedback:Ā TeamĀ Bstow came back with the new home page designs below: Boom!Ā šŸ’„

bstow

2.Ā Manifest:

Present your company with a short, punchy tagline & visual, make it clear andĀ obvious to the mind. This helps people remember who you are and what you do.

My Feedback forĀ Scopio: Scopio is a search engine to find and license images on social media.

Homepage before Feedback:
scopio-homepage-before

Get a short and effective tagline (6-8 words) that conveys bothĀ HOWĀ your company worksĀ andĀ WHYĀ you do what you do (your purpose, cause & belief).

Combine the original two lines on your website homepage,ā€œSearch engine and licensing platform for trending photos & videos on social mediaā€ and ā€œDiscover Moments and Tell Storiesā€, into a simple and effective one-liner.

Homepage After FeedbackĀ (version 1):

ā€œReal Images Engage Audiencesā€ is a much more effective tagline. NowĀ how canĀ we show (even better) that these photos are taken by real people?

scopio-1
When using very light weight text over the video, itā€™s VERY hard to read theĀ tagline and explanation. I suggested changing the text, “A cutting-edge platform…,” into a one-liner.

The more clear andĀ obviousĀ you can make this, the better.

Homepage After FeedbackĀ (version 2 – current):Ā Team ScopioĀ came back with the new home page designs below. You can view the full site here.
scopio

3.Ā Portray:

Depict your product/service vividly, let it come to life through visual storytelling.

My Feedback forĀ ShearShare: ShearShare connects salon owners to stylists to fill empty salon chairs.

Below is ShearShare’s originalĀ Homepage:

shear-share-before

OnĀ the home page, aĀ static image of aĀ phone with the app search bar text, ā€œWhere do you want to work?,ā€ is not the best use of the precious space.

Let’s make it moreĀ vividĀ and engaging, by actually showing the audience how this app works. Embed the Demo videoĀ on your demo pageĀ as an animated .gif or video on the phone.

You can see my above feedback into the mockup below.
shearshare-after

After the Feedback: Team ShearShareĀ came back withĀ a much improved homepage animation seen below. You can view the full site here. šŸ‘Š
final_home

4. Reuse

Whether you are a new or established company, brandingĀ consistency always matters, becauseĀ your brand is reflected in your logo and messaging. One of easiest ways to improve your branding consistency is by examining theĀ visual consistency of your site/app. Reuse and reapply your branding colors andĀ elements throughout the site and app,Ā to create a unified look and feel.

My Feedback forĀ ChangeJar: ChangeJar is a mobile cash platform optimized for small retail payments.

This is ChangeJarā€™s current logo:
changejar-logo

But if you look at their icon page, the main branding has not been maintained. Itā€™s completely different with white on a purple background.
changejar-icos_before

To remain consistent across your whole site (and aid in brand recognition), add the green color from your brand/logo and/or the ā€œjarā€ icon to the design of these icons below:

I made the mock up below to highlight the dollar signs in the green color from your brand logo. Now these icons look more consistent with your brand:
changejar-icos_after

Also, the current Favicon is hard to read when itā€™s white on green gradient. Its design/color scheme isĀ not consistent with the current logo.

Current Logo:
changejar-logo

Current Favicon:
changejar-favicon-before

I suggest making it the same design & color scheme as the current logo. See the mockup below:
changejar-favicon-after

Similarly, here is Scopioā€™s current logo and itā€™s current set of icons (more on Scopio below):
scopio-icon-before
I suggest you reuse the Symbol from the logo/brandĀ as much as possible like below:
scopio-icon-after

5. Organize

You can organize content by color making it easier for people to remember your brand name or for the audiences to differentiate the business.

When it comes to content marketing, color can help you stand out from the crowd. According to NeuroMarketing, ā€œif a good color sells, the right color sells better.ā€

ColorĀ is an important emotional cue in content marketing. Different colors and their combinations will evoke different emotions and feelings. It is vital to choose the right color(s) which represents your identity truthfully and effectively.

According to CoSchedule, people make a judgment about your content in 90 seconds or less. And up to 90% of the judgment in that 90 seconds is influenced by color. Marketer Neil Patel gives further proof of how colors affect conversion rate, revealing that 85% of consumer-based buying decisions comes from color and that full-color ads in magazines get recognized 26% more than black and white ads. Color helps people recognize your brand by up to 80%. Itā€™s important to choose your brand color carefully and stick with it.

My Feedback for Aumet:Ā Aumet allows medical suppliers & distributors to do business with companies no matter where they are.

Here isĀ Aumetā€™s current website:
aumet-before

Since ā€œAumetā€ is a made-up name, I recommendĀ highlighting two different syllables, using two different colors, to help users learn how to spell and pronounce your name.Ā 

Also, because your target audience is both medical suppliers and distributors, it makes sense to use the same two colors to highlight the two different target audiences. Ā 

Since your brand is targeting the medical industry, the current mint green works well as the main color. I would suggest your additional color be something like blue to compliment the green.Ā Here is a simple mockup of how this could be done:aumet-after

If your business market is facing both B2C and B2B, like Aumet and ChangeJar, I would also suggest using two different colors for the two different consumer audiences. Ā 


6.
Visualize

AĀ picture is worth a thousand words: Applying effective visuals helps to arouse emotion within your audience,Ā creating an instant connection with your company.

My Design Feedback forĀ TalentBase: TalentBase is an HR software for growing enterprises in Africa.

Below is their current website homepage:

talentbase-before

Very straightforward website with all its functions. My overall feedback with your current branding & logo is: Itā€™s too plain and thereā€™s a lack of engagement.

If you are a B2B company, remember the foundation of business is still human. I love what Jack Ma suggests, whether your business market is B2C or B2B, it’s all about P2P, People to People.

I suggest you eitherĀ add a secondary color that works with the existing blue color orĀ addĀ a set of colors inspired by your market,Ā African HR (Human Resources) professionals.Ā Start with Africa, and its people!

I have mocked the site with photos ofĀ real African professionals,Ā  with the same text/content from the current site. Do you see and feel the difference?
talentbase1
talentbase2
talentbase3
talentbase4
talentbase5
talentbase6

Showing the faces of the workforceĀ arouses emotion within your audience, thus establishing trust and loyalty between your audience and your company.

7. Elaborate

“Elaborate” means provide more context and addĀ additional details, which can help others (e.g. your users or investors) to have a better understanding of what your business is.

My Feedback forĀ ChangeJar: ChangeJar is a mobile cash platform optimized for small retail payments.
changejar-logo

The width of the logo type and the symbol in the current logo looks a bit too thin, especially when it’s being scaled into aĀ smaller size. It’s hard to see. Keep ā€œchangeā€ in white, but change ā€œjarā€ to green.

Also, add a dollar sign or currency symbol in the logo. At the moment the logo only conveys the notion of a jar, but it doesn’t indicate money. Adding a money symbol will help your audience subconsciously digest what your company (a payments provider) does. As you scale internationally, change the currency symbol. You can already create multiple mockups with a dollar ā€œ$ā€ sign, pound ā€œĀ£ā€, euro ā€œā‚¬ā€, and Japanese or Chinese sign ā€œĀ„ā€, etc.

I mocked up the above suggestions below:
changejar_after

If you want, you can even animate it with the different currencies, like this:
changejar-logo-animated

To summarize, here are the 7 Design Thinking Tips to Improve Your Growth Rate:

1. Integrate:Ā 
Combine marketing message with effective visual content
2. Manifest: Make your messageĀ clear and obvious to the mind
3. Portray:
Depict your product / service vividly, let it come to life
4. Reuse:
Re-apply visual elements to achieveĀ visual consistency
5. Organize:Ā 
Categorize content by color to help users read & remember better
6. Visualize:Ā 
UseĀ visuals to engageĀ and establishĀ emotional connections
7. Elaborate: Provide contextĀ to help usersĀ understand your business better

And if you are paying close attention, you will noticeĀ theĀ initials of each tips make the wordĀ ā€œIMPROVEā€ (I know, so nerdy šŸ¤“ right? But admit it, this just made your day!)

šŸ’°šŸ¦„šŸ”‘

p.s. Batch 19 Demoday will be at computer history museum on February 15, 2017. Ā Join us here!

p.p.s. Yiying Lu will be giving a talk on ā€œCross Cultural Design in the Age of Globalizationā€ at Adobe San Francisco on February 08, 2017. Join us here!


yiyinglu-profile-squareYiying Lu currently leads creative direction at 500 Startups. She is an award-winning artist & designer with more than 10 years of experience in the creative realm. Her projects have been featured in many publications, including The New York Times, Forbes, NBC News, TIME, CNN, BBC, San Francisco Chronicle, TechCrunch, Mashable, and The Huffington Post. She was named a “Top 10 Emerging Leader in Innovation” in the Microsoft Next 100 series. For more from Yiying follow her on Twitter and Linkedin.