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.

 

Growth Case Study: StudyPool on Growth for Fundraising & Increasing Revenue by 25% — monthly

Studypool is an online marketplace that has seen 25% month over month revenue growth — 90% of which comes through organic acquisition.

In the 3-month period that they worked with 500 Distro, the company also increased site traffic by 46% and grew customer conversion rate by 18%.

I recently spoke with Studypool cofounder Richard Werbe about growth, fundraising, and the “obvious” things that every founder should know (but often doesn’t).

6322f45c-59a0-4cf2-83ed-8cdc739fb93f

Give us a summary, Richard. Where are you at, and what did you do with 500 Distro?

We raised 2.3 million dollars, 1.2 of that on the morning of Demo Day and the rest shortly thereafter.

We went that route because it looked like the market was going to be tough so we decided to raise the next million shortly thereafter.

Later, we worked with Andrei Marinescu on the Distro Team as part of a Distro Fund (seed stage) deal, which was a combination of getting a part-time VP of growth plus the investment side.

Andrei is a boss.

He worked with us for over three and a half months, it ended up helping hugely.

As a founder, you miss things. It can be game-changing to work with someone who has seen dozens of companies at your stage and have them spell it out for you.

What’s your One Metric That Matters and your 3-month growth on that metric?

For us, it’s about revenue.

We’ve achieved a consistent 25% month-over-month growth on revenue, mainly from improving tutor quality and engagement, and increasing student acquisition.

What’s the single biggest WIN you’ve seen?

One thing that was really huge for us that came out of our time with Andrei and the Distro Fund turned out to be a very simple change (I know, but really!).

We added an SMS functionality for our tutors. So that means when there are new questions coming in, we now notify our tutors in real time.

It seems obvious but it was one of those things that we hadn’t gotten to yet.

Our tutor activity grew 3X, which means that overall we now have more high quality tutors interested in helping out students. And when that happens it allows us to make a better match for that student which creates a higher quality marketplace.

Aside from that, we also did a lot of work on SEO and organic traffic (which has grown a lot, conversion rate optimization, email marketing, new user activation, analytics, and improving our payments flow.

How do growth and fundraising go together?

When you’re fundraising, it’s important to know — and to be able to communicate — your vision in one or two sentences. You need to be able to succinctly talk about why you’re unique, why what you’re doing is unique, and why it’s working.

Those second two areas are where growth comes in.

Growth is the most essential piece of it because everyone can have a big vision and everyone can be unique. Growth is the proof of why your vision and your “uniqueness” is working. Growth makes the story real.

And it’s not about saying, “We have a $10M on run rate” or some general number like that.

It’s about showing how you got there over time and how you consistently were able to do that month over month.

You don’t want to just do 100% monthly growth for 2 months kind and then flatten out. That’s not actually impressive.

What’s better is to consistently do the same growth month over month for 6 months or nine months; even if it’s not “100% MoM,”  it’s actually much more compelling.

It’s telling investors, this founder and team know what they’re doing. They can control their growth.

That’s something specific that I learn from Andrei, how to build growth as a process not just as one or a few one-off lifts.

Now we’re much more robust now how we approach growth and how we test it.

What does it mean to build “growth as a process”? Is it all about spreadsheets?

The spreadsheet is just basically to document the genius of what’s going on the team.

But basically our process was to come up with a growth hypothesis, and then break it down with these questions:

– What’s the efficiency of this?

– How long will it take us to do this?

– What’s the potential if this succeeds on the test scale? On a larger scale?  

and then you measure that and give it a grade. It’s actually fun.

When ranking the experiments, you could find, for example, something that takes a very little amount of time for our future of our lives.

So that could be a high priority because it’s easy.

And then you might have something that’s extremely hard to make and also may do a lot of good in our lives. In the past, we probably wouldn’t have pushed aside everything for that, made it number 1 on our priority list.

But Andrei made us much more rigorous about ranking things ruthlessly and doing the experiments systematically.

Speed is important.  

———-

Studypool is an online marketplace that connects students with questions with tutors that can answer them.

Getting stuck on difficult problems is at the heart of the learning process, yet a lot of students can get so frustrated that they give up and lose their passion for academic subjects. Studypool aims to address this issue and keep the learning process going.

Studypool was founded by two college students Richard Werbe and Jimmy Zhong in march of 2014.

In classic startup fashion they dropped out of school and headed to California to build Studypool… (Don’t follow their example, kids. Or better yet, maybe DO).

#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

More 500 Distro? Get the Newsletter

* indicates required

(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=’EMAIL’;ftypes[0]=’email’;}(jQuery));var $mcj = jQuery.noConflict(true);