7 UX / UI Design Tips to Improve Your Startup Growth

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!)

💰🦄🔑

500 Batch 22 begins July 24th, 2017 in San Francisco.

Click Here to apply for our the Batch 22 Seed Program.

 

See also:

7 Marketing Secrets from 500 Startups Demo Days
7 Design Hacks to Improve Your Startup Logo Designs


yiyinglu-profile-square

Yiying Lu is award-winning bilingual (English & Chinese) artist and designer. Born in Shanghai China, Educated in Sydney Australia & London UK, now based in San Francisco, Silicon Valley, she currently is a Design Lecturer at the NYU Shanghai Program on Creativity & Innovation. She is also an individual creative consultant who provides talks & workshops for global startups and corporate innovation teams on design thinking, entrepreneurship & creativity. 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, you can follow her on TwitterLinkedin and Medium.

 

How to Grow a Startup, Marketing Hell Week Edition

Today’s post comes from guest author Lauralynn Stubler, a growth marketer who’s been helping out 500 Startups’ brand new Batch 17 survive our Accelerator program’s (in)famous Marketing Hell Week.

Batch 17 Marketing Hell Week is over, but the learnings from our startup resources have just begun….

Today we’re sharing some key takeaways on how to grow a startup from our recent Marketing Hell Week roster of speakers.

HOW TO GROW A STARTUP – THE QUICK TIPS

“Start with running A/A tests to test your tools.”

Hiten Shah on A/B Testing

Click-to-tweet: http://ctt.ec/hK6zd

A/A testing is often overlooked but it’s an excellent method of double-checking the effectiveness of your A/B testing software. A/A testing is the tactic of using A/B testing to test identical versions of a page against each other. In an A/A test, the tool should report no difference in conversions between the control and variation after enough conversions have been logged.

“Optimize ad spend for power users to maximize ROI with a limited budget.”

(Daniel Riaz on Customer Segmentation)

Click-to-tweet: http://ctt.ec/16N6t

By identifying and understanding your power users, you can optimize your marketing spend by targeting those who match their profile.

YOU ARE YOUR COMPANY’S BEST GROWTH HACKER

 

“Growing users without having those users complete the core action is the empty calories of growth. It feels good but it’s not good for you.”

— Sarah Tavel on B2C Engagement Hierarchy

Click-to-tweet: http://ctt.ec/ySc2c

If they nibble it doesn’t mean they are hooked. It’s not enough to drive traffic to your website, you actually need your users to take a specific action. And not just any action, but the ones that are in line with your objectives.

“The most important part of your dashboard is the janitorial work. The janitor updates the data every day and keeps the data clean. If you are going to build a dashboard and not keep it clean, don’t build a dashboard.”

— Susan Coelius on Remarketing

Click-to-tweet: http://ctt.ec/hyQeC

Pretty dashboards that tell all-the-things are great, if you need to know all-the-things. If not, it becomes a bloated daily chore that you begin to de-prioritize. Which makes the data, at worse, useless. And at best, something you need to spend time updating before you can see the whole picture. Keep it simple so you can update it on a regular basis.

INSIGHTS ON COMMON STARTUP RESOURCES

“People don’t go to FB to make decisions, they go to FB to avoid making decisions. Educating customers/generating leads is a better use of FB ads – give them value to build relationships instead of being aggressive and trying to make a sale.”

— Armando Biondi on Facebook Ads for Startups

Click-to-tweet: http://ctt.ec/H66d2

While our ultimate goal with paid acquisition is to land the deal, it’s a truth that most consumers need more than one touch before making a decision. Providing valuable content to your Facebook audience, rather than pushing a product, is a great way to nudge them through your activation funnel quicker.

“Avoid money in Referrals: Bringing up money changes context for users from social norms to market norms.”

— Ivan Kirgin on Referral Marketing

Click-to-tweet: http://ctt.ec/xVaNf

If you’re unclear about social vs market norms, consider this from a different angle. What would happen if you asked your dinner guests to bring a specific cash donation instead of a bottle of wine?

So, in other words, by offering money your referral incentive goes from “I share because I’m a caring person” to “Is this worth taking advantage of my network?” Figure out the best motivation for your customers to share your product, and capitalize on that thing. Sharing is actually a pretty big ask, and not everyone cares about a couple of bucks off.

Case in point: Twitter. If you don’t fix retention, you’ll run out of Internet to acquire.”

— Casey Winters on Retention

Click-to-tweet: http://ctt.ec/inwH7

There has been a shift in focus recently from acquiring new users to retaining existing users. It’s more costly to convince a new lead to become a user, and it’s downright agonizing to reactivate a churned user. Keep your customers, find out what makes them happy about your product. Then you can focus on acquiring new users who will undoubtedly stick around longer.

In the coming weeks, we’ll be publicly releasing all our Marketing Hell Week videos.

>> Sign up to be notified when the videos are available <<