ecommerce website graphic design, and web development with optimizing ui ux wireframe

Website Review for Ecommerce side project

ecomm side project test website

Hello Founders,

We are covering a side-project prototype for our feedback round. Here are a few suggestions to improve the current version of the landing page UI/UX:

  • To start with, I think the header image could be something better and more relatable to your audience. Something that shows your target audience interacting or your product or both.
  • The icons above the ‘Stay active, Stay connected, Improve the quality of life’ can be improved and have 3 different colors for 3 different icons so that the landing page feels more like “smile”, “active”, “fun”, “engaging”
  • You can add emojis instead of the bullet points in the ‘What’s inside the box’ section
  • ‘What’s inside the box’ section feels too black currently, maybe you can try using, a grey or a bold or different color for the title so that it doesn’t feel boring.
  • ‘What’s inside the box’ section is the section that your audience would want to know about your proposition. This is the section where most of your selling needs to be done. Maybe adding some images on the right side would help make it better.
  • For the 3 points inside ‘How it works’ you can use the same colors that you use for the icons in the ‘stay active, stay connected, improve quality’ section
  • Reduce the space between ‘Get notified when…’ and ‘A perfect gift for your parents…
  • The submit button could have a different color other than red.
  • The K Mug/Cup image on the right can better. Something that connects more with your audience.
  • Create a logo for your brand and use it in the header and footer.
  • Create a favicon from the logo and use it in the tab icon.
  • Contact details in the footer should be bigger so that your product feels more reachable.
  • Add live chat to the website. It helps in converting prospective customers quicker.

If you want Landing Page feedback for your website too. Just head over to Getfeedback and subscribe to get FREE feedback for your landing page UI/UX.

If you want Graphic Design for your website; head over to Draftss.com and get unlimited graphic designs on subscription.

 

 

 

socialn reverse logo design

Gradient Landing Page Review: SocialN.io

colorful landing page with transition of hero image
https://socialN.i

Hello Founders,

We are covering SocialN.io for our feedback round. Here are a few suggestions to improve the current version of the landing page UI/UX:

  • The first look on the landing page is definitely positive and wow!
  • The size of the text in the navbar could be a bit bigger
  • The line underneath each section “home, features…contact” is too lengthy; make it smaller. Small enough to fit FAQ text, this way on all other places it would appear shorter than the text, which should give it a more crisp effect.
  • Try changing the text inside Login and Signup button to capital letters
  • The main opener text and the diagrammatic representation of the product are also good, but both are utilizing almost the same amount of space. This is a distraction and confusion for the user subconsciously on which part his eyes should focus on first, which part is more important. You can try slightly reducing the size of the diagram to make it more impactful.
  • Coming to the diagram, the left side “Your social media accounts” isn’t really needed. You should focus on making the gif on the right more better. The gif currently shows on Twitter widget appearing on repeat.
  • You can try a version where,
    — increase the size of the widget
    — make the widget with other social accounts as well
    — maybe for the sake of representation only you can show social media icon on widget where “your logo” is there.
  • Remove the See Demo button from the diagram and add it underneath the main text. Change the text from “See Demo” to “See Quick Example” or something similar, The word “demo” induces time lengthy activity in the minds of the users and it feels like more of the demo of the whole saas app, where in reality you are showing a quick example of how the outcome widget looks like, and thus you should really communicate something where people can quickly check how the widget appears rather than talk about a “demo”
  • Features Section
    — Increase the size of the icons, probably by at least twice as of current.
  • Pricing Section
    — Remove the word ‘Plan’ from all the plans
    — In the Free Plan section, change ‘SocialN Link’ to ‘SocialN Branding’
    — I guess for all of the pricing you support same platforms, so it is best to remove the platforms section from all of the pricing and maybe add a completely new section dedicated to a platform that you currently support. This section could be underneath the features section. Similarly, Responsive Feature is available on all the plans so that can be removed as well. The simpler the pricing the better.
    .– Remove the trial section from the pricing and add subtitle text where you currently have “We have plans for everyone”.
    — A sample ordering of the feature list inside your pricing should be something like this: Notifications, Websites, Support, SocialN Branding.
    — Try changing the label text on Pro Plan to “Popular” instead of “Best”.
  • Who we are Section
    — The section to be very small. Maybe you should try adding more content.
  • Contact us Section
    — the layout for the contact form is not really great. You can try making it more simpler.
  • Footer
    — Why is the logo different in the footer?
    — Add all the links from the navbar to the footer as well
    — Social media icons on your website should be more prominent as your product revolves around it.
  • Try adding a live chat to the website to communicate with your visitors.

If you want Landing Page feedback for your website too. Just head over to Getfeedback and subscribe to get FREE feedback for your landing page UI/UX.

If you want Graphic Design for your website; head over to Draftss.com and get designs on a monthly subscription.

zencast logo design icon

Podcast Website Design Feedback: ZenCast.fm

podcast website design html css flocksy thumbnail
http://zencast.fm

Hello Founders,

We are covering ZenCast.fm for our feedback round. Here are a few suggestions to improve the current version of the landing page UI/UX:

  • The logo can be better.
  • In the navbar, replace “Get started” with “Sign up”.
  • The title “Host and publish…” is not aligned with the logo.
  • The opening title is pretty good. It explains your product pretty clearly in one go.
  • I am not sure why is there a green “Get started” button, whereas everywhere else you’ve used blue for your branding/buttons.
  • “Get straight to grow…” can be bold, bigger and have a different color.
  • “No technical skills needed” title can be bigger. Repeat this for all other similar titles.
  • There should be Pricing Plans above “Start your free 14-day trial today”. I would want to click here, but I would like to know your pricing and then decide if I would like to get the 14-day free trial.
  • Add a reference ID to every button to determine which of your CTA buttons are performing better.
  • All feature titles should be bigger and bold. (Fast & unlimited hosting, Understand your listeners, etc.)

If you want Landing Page feedback for your website too. Just head over to Getfeedback and subscribe to get FREE feedback for your landing page UI/UX.

If you want Graphic Design for your website; head over to Draftss.com and get designs on a monthly subscription.

best design and code tools of 2019

Best ways to optimize your product using free tools in 2019

The past year had been full of innovations. We have seen quite a few emerging side-projects morphing into startups. Out of this clutter only a handful number of products managed to survive by providing good features/services. You will see a lot of dead projects everywhere which failed to get any traction. However, the startup industry is such that founders create a product, make mistakes, learn and improvise.

Here is a list of few FREE products that you have probably heard of a bazillion times. And here is how we make the most of it.

  1. Live Chat – Tawk.to

A very simple chat tool that offers most of its features in the free tier. The best feature we loved is that we can proactively initiate a chat/conversation with your website visitors and app users. There are loads of other popular chat products the only offer this feature in paid packages. We usually get a spike of traffic when we get featured on platforms like IndieHackers, HackerNews, ProductHunt, Reddit, etc. At such instances we keep ourselves glued to the chat platform looking for opportunities to start engaging a conversation with our visitors. After investing a good amount of time in monitoring traffic on our website; we have come up with certain growth hacks/tactics/rules that help us in creating engagement with our visitors.

Rule A: Let the visitor checkout our landing page

We’ve been tracking the visitor behavior for a long time and we understand that it takes at least 2-3 minutes for an average user to checkout our landing page properly. The visitors who spend more than 2 minutes are visitors who might be interested in knowing more about our product. How do we utilize this best? Ping the customer between 2 minutes 30 seconds to 2 minutes 50 seconds.

What do we ping our customer? Not something that introduces us or strives towards selling our product, but rather something that helps us make our product better. Some of the messages can be — Hey, were you able to understand our product offering? What do you think about our landing page? We’d love to know your views about our product? At times this became so engaging that we gave away free packages to customers whom we loved interacting with.

“Are you good at keeping a secret?”

“Are you good at keeping a secret?”

Rule B: Message people who come repeatedly

Which visitor would come to checkout your website again and again? Visitors who are interested in your product in some way or another. Most of these visitors are prospects who would be genuinely interested in buying your product and are evaluating or comparing your services with another. What do we do with these customers? We engage these visitors by asking them direct questions if they would be interested in any of our packages or what exactly are the prospecting?

Rule C: No Compulsory Email required to engage a conversation

What makes the customer reluctant to speak on live chat? Fear of getting spam, spam & lots of spam in context of follow-ups. We believe that if a visitor is sees value in your product/services, would just buy your product/services. So, we did not make it mandatory for visitors to share their email address to speak with the support team. You can just put your name and get started! This approach makes it accessible for visitors to engage in a conversation with our support team.


“Batman meets Ironman on Draftss.com

“Batman meets Ironman on Draftss.com

Rule D: Sneak peek message real-time

Call this stalk-ish, but we love to read what people think and type. With tawk.to you can view what your visitors are typing in real-time. Often we come across a visitor finding difficulty in expressing his thoughts/query in words. But in this confusion of typing, deleting, rephrasing, correcting & sending we are able to understand what the customer is trying to communicate and be proactive in answering the same.

“The eye that sees everything.”

Rule E: Send customized URLs and validate if there are CTR

Apart from focusing on individual subscribers, we target high-valued clients/sponsorships/partnerships where we need to understand if the person has gone through our website. To do this, we add some customized URLs and check if the person has gone through the website yet. This also helps in recognizing fellow founders from IH, PH, HN & Reddit who reach our website from our comments to their original posts.

2. Heatmap Analytics – Hotjar.com

A fantastic tool that every entrepreneur must use to learn about customer behavior on their website. This tool helps in analyzing your customer’s interaction with your product/services. It can be considered as a stalking tool on visitors viewing your website. Hotjar enables you to view what people are browsing, navigating or spending its most time on. Analyze that data and you’d be able to understand the bottlenecks in your sales funnel. In the free version, you can track upto 3 web pages with 1000 visitors each. This tool helped us in identifying and eliminating the bottlenecks in the journey of visitor to make a pleasant experience for your visitor.

Here are a few quick things we optimized at draftss.com using Hotjar to understand our customers better:

A. User Recordings

You can record 300 recordings in the free plan. This is sufficient to check how visitors experience your website overall. We focus on observing the visitor journey and identify buyers from non-buyers by making a pattern of the journey taken by successful buyers. We started by observing the places where the visitor navigates, the places where the visitor spends most of the time reading or if the user was interested to check out the pricing. We found out barriers user was unable to view our Money back guarantee feature and closed the tab before completely viewing the whole website. We identified more of these red flags during checkout process and understood better why people were abandoning their cart.

“Visitor recording of Draftss.com landing page”

B. Heatmap

This feature helps you visualize the visitor’s engagement on your website. You can understand what your users interact with on your site by visually representing their clicks, taps and scrolling behavior. This will allow you to understand the data and layout the right kind of journey for your visitor. You will be able to learn better about where to place forms, content, buttons, opt-ins, etc. to improve conversion rates and capture more leads. You can find the red-blobs in the screenshot of Draftss where users are clicking the most. Identify these places and make them the best part of your whole website.

“Heatmap of Draftss.com landing page”

C. Funnel

By creating funnels, you can understand where are you losing most of your visitors and prioritize work on those steps first. The key to building a great Funnel is to build it backward. Start defining your major goals – A subscriber? A purchase? Create a Funnel that maps back to the pages that have the highest traffic. The general rule in this case is to have a Funnel for each goal on your website.

“Funnel screenshot by Hotjar”

D. Forms

In this feature, we analyze a form to see exactly where the visitors are dropping off. Many times we make content mistakes in forms or use complicated words to frame a sentence. This often creates a nuisance for a visitor who might have difficulty in understanding a sentence or responding to the same. Identify these fields that are confusing or a concern to visitors and replace them with simple and easier fields. If the fields are not important, you can always let the visitor purchase your product before asking for those fields.

“Form statistics of Hotjar”

E. Survey/Polls

This feature can be utilized better depending on whom you share the survey links. You can either invite people directly using a URL in a newsletter or enable it as a pop-up on your website. The visitor can opt to be part of the survey where you can ask questions with text answers, radio buttons, check boxes, or scales. However, if a visitor does not agree to participate, the same Survey does not show twice to the same visitor, even if they navigate to a different page.

“How do you find the best graphic design service?”

3. Management Tool – Trello.com

The best part about Trello is that you can use it for management of tasks. The Kanban style board that lets you add lots of details to your tasks. Whether you’re organizing work projects, family chores, travel plans, or just about anything else. You get the accessibility to all tasks at one place which gives you an overview of all tasks at hand making this a perfect tool to schedule your priorities. You can use it to organize just about anything. Some of the tasks that we accomplish at Draftss using Trello are day to day activities, sales funnel, design task management, team management, and anything else that requires to be organized.

Apart from the free utility of the product, there are some paid features which can be used to make Trello even better. One power up is free on any board in the free account. Out of 100+ power ups, we have shortlisted some of them that we think would be most useful:

A. Time Tracking Power up – Time Camp

A great tool to manage your productivity. We use this power up to identify the time taken to complete a particular activity. We use this tool to track the time taken to design a concept for a category of the design brief. Using this power-up enabled us to identify the average time taken to complete a logo, illustration, t-shirt design, web UI/UX or any other design. This data has been very important in the hiring process for new designers. This power-up can also help you in identifying and optimizing the time taken to complete a task. You can even track the time taken by your complete team and learn a few insights in your work process.

B. Card Repeater Power up

Another great power up to duplicate boards and cards for managing day to day activities. You can create rules that trigger automatically when you perform actions on the board. This power-up helps you to avoid wasting the time taken to add repetitive daily/weekly/monthly tasks to the board. This power-up is a great utility for a power user of Trello board.

C. Task Management – Card Aging

A fantastic power up to stay accountable to all your tasks. Once you start using Trello for managing tasks, your board will its populating and some of the cards will go deep down the list. In order to be productive you will need to finish off the pending tasks or else they will vanish. This power-up will help you in identifying the tasks which are pending for a long time and force you to update them else they will fade away.

These are some of the great hacks we use to optimize our work process with free tools. We shall keep updating this list with more product hacks. Currently, we at draftss.com are helping out founders, agencies with our design services on monthly subscriptions. Using these tools helps us on day to day basis. Let us know what kind of hacks do you use for your startup. We would love to add them to the list; reach me on jd@draftss.com