UX Review Example
UX/UI review on https://wishyoo.com/
Let’s do without introduction and go straight to review.
Problem #1: Autoplay Music Video on top of the page.
Autoplay is a bad idea not just for accessibility but for usability and general sanity
while browsing. Imagine you’re one of these new visitors who just received a link
to the website from your old friend. You’re sitting in the office and just opening
the website for the first time. Here comes the video with music, it starts to play
unexpectedly and the whole office staring at you. What would be your first
reaction? To close the website immediately either switching off the sound on
laptop and most likely close the website anyway after. The first experience on the
platform is negative and you simply won’t visit it again.
The other bad factor of autoplay is the sound from the clip will override or conflict
with other sounds that any user is listening to at that time.
Autoplay video is one of the most frustrating elements on website and I wouldn’t
suggest to use it at all, especially in one of the most important parts of the website.
I will mention this later in my review as well. Instead of the video we may put
something else (see problem #2)
Problem #2: No clear UVP
When a potential user lands on your website he/she has just several seconds to get
an idea of the website. Value proposition is the #1 thing that determines whether
people will bother reading more about your product or leave your website. The less
known your company is, the better value proposition you need (key rule!)
Currently page has some pieces of UVP but it scattered throughout the website.
Value proposition is a clear statement that:
- explains how your product solves customers’ problems or improves their
situation (relevancy),
- delivers specific benefits (quantified value),
- tells the ideal customer why they should buy from you and not from the
competition (unique differentiation).
I’d suggest to use one static banner image on top. Just one, not a carousel of
banners (see why - http://shouldiuseacarousel.com/). On the right side on it we
may put UVP. It should be smth like:
- Headline. What is the end-benefit you’re offering, in 1 short sentence. Can
mention the product and/or the customer. Attention grabber.
- Sub-headline or a 2-3 sentence paragraph. A specific explanation of what you
do/offer, for whom and why is it useful.
- 3 bullet points. List the key benefits or features.
Usually designers use “lorem ipsum” there, since it’s copywriter’s job to create
headlines etc. However we may only suggest or discuss it with you what
headlines/subheadlines would work well.
Note: Avoid superlatives such as “the best” or “world-class,” as well as any jargon
or acronyms. Address the key needs and pain points of your target audience and
underline how your offering is the solution. Use customer-centric language rather
than company-centric language (remember, this is NOT your mission statement).
Steer clear of using the words “we,” “our” or “I.” However remember that your
UVP has always a room for improvement.
Problem #3: Not clear user journey
User journey means at least that user should have known where to click next. In
this case I’d suggest to add CTA buttons on banner image under UVP. What user
cares about after reading UVP? He/she should immediately either starting use your
services (if they already familiar or understood the main idea) or they should see
‘how it works’ video (if they would like to see examples how to create cards or
simply didn’t have time to see UVP).
Btw – did you track analytics? How much percent of the cards were created in the
mobile Wishyoo app? And how much via desktop app? It would be good to have
such data. In case there is overwhelming majority of cards created in the mobile
app we should use a CTA button for downloading it. Otherwise we may just leave
“Create Card” via desktop app.
Quick summary: I have mentioned 3 key problems of user experience. Let’s go
through the other elements of the website.
Next goes this one:
Is it really necessary there? As a first time user I didn’t get an idea what exactly
that section means. Is it a public card which everyone from any place of the world
could sign? What if someone will write something rude or with mistakes or
something which is not appropriate there? How do you moderate all wishes - only
by “report abuse” button? Anyway I would suggest to use it later. First of all we
should motivate a new user to create a sign or card.
Once user understood UVP, main idea and benefits of your services he/she should
have ability to try it. Clicking on “Create Card” from the top banner image will
scroll the page down to the section where the categories are. So I’d suggest to do
without “Featured Public Cards” section for now and put a carousel of categories
with latest examples underneath the same as you have it now. We should also think
how to make the left and right arrows of the categories look more prominent
keeping in mind that among your users are those who has bad eyesight. Since there
are 22 categories of cards/wishes I think we will leave them as a horizontal slider,
this would be appropriate.
We will also redesign the look and feel of the cards slightly. We will add CTA
buttons under each one with “Create card” on it or most likely this button will
appear after hovering a mouse on card. Currently it’s not 100% clear that clicking
on the card allows to create your own, so we need a button there.
Then yes, we may use the section with iPhone and screens on it with key benefits
and FAQ on the left and right. Let's also make the very key words more prominent,
catchy and fatter ;) Actually you did a great work in this section. However «Gett
the app» should be underneath, not above the iPhone device. First user should see
benefits then react on it.
Testimonials
Then we will use a testimonials of happy customers since in your kind of business
it's a very friendly way to give trust for new users, to give an undertanding that
everything works, that people are really happy and your success depends on their
satisfaction. Your service is great, we just need to make everything as clear as
possible and give a true picture of it (using feedbacks for example). For this
section we will need some feedbacks from your real customers, do you think it
would be possible to collect them from some previous or new users?
Video / How It Works section
Then goes a section with Videos. But we will show all
videos more familiar to users. This shouldn't be a
dropdown list of videos as on the screenshot from the
right. The most important video is
https://vimeo.com/-, it's clear enough in
comparision with the rest ones and gives the basic
understanding of the service you're offering. So this
one will be the first, the other videos will be available in the same window or
somewhere underneath (or even from the right side of it). We will also add CTA
button «Create Cards» in this section.
About Us / WishYoo Team
It’s good to have such section since users much prefer to know that someone real is
behind the company. However this section shouldn’t be too long and take a lot of
space. In this case we will combine it into one and will try to make it as short as
possible. In mobile version of the website especially. For example let’s use small
circular avatars of your team rather than large pictures. This will take the same
effect but will save much space on page.
Footer
This is quick UI job, we will reorganize all items into one beautiful section. Update
icons as well.
Logo Design
Actually now it’s quite good, however we may redesign its colors (see the next
point)
UI and Colors
I know you have a mobile app, videos and other stuff, but the problem is that gray
color is not so good for this kind of business. You may see what the meaning of the
gray color here on Bourncreative - https://www.bourncreative.com/meaning-ofthe-color-grey/
It would be better to change current orange/gray/white palette to more colorful
one. Keeping in mind that your target audience are mostly kids (or let me say even
adults who are still kids inside, which is actually good) they prefer more colorful
and bright colors. Orange is the color of joy and creativity, but gray is not.
From the other side I see that changing colors could lead to a more fundamental
work, which means redesign the app and other marketing materials stuff for
example. This could be quite expensive, however it’s better to solve the color
problem at the start. Let me know what do you think of it.
Menu items
In the menu there will be logo on the left, which will also be used as a home
button. Then goes from the left to the right Create Card, Our App, Testimonials,
Video (or How It Works section), About Us.
Then goes search field. We will make it more prominent and with “search” button
on the right. We will leave social media icons, just probably let’s use them in their
own classic colors (Twitter and FB are blue). Btw do you have Instagram? I guess
this should be one of the key platforms for your business, this would be a great
option to tag people in Instagram, so the other could see these cards and use “word
of mouth” mechanism which is one of the most important things for any business.
Register / Login
The process of registration on website is actually great. It may sound weird but it’s
one of the most great things on your current website (notice, not in the app!) I have
registered as a guest and it’s fantastic way to discover your services for new
clients. One of the most common UX mistakes is that the owners of the websites
force users to register at once or before they actually see what service you offer to
them. This mistake is currently in your mobile app, I’d definitely suggest to add
register as “guest” option in mobile app. Again, let users discover the app first and
show its benefits before registration.
Create Card/Sign page
All items in the header of this page (from “this wishyoo is public” to “to create a
card, download the app!”) needs more professional touch. We will make it look
prominent and easy to use.
On the left side of the page there are Images, Signatures and Donate. Currently all
of them are unclear to new users. Instead of just “Images” let’s use “Choose an
image”. Instead of “Signatures” – “See how others signed”. Instead of “Donate” –
“Make a Donate”. As you see we have to make not just buttons, but CTA (call-toaction) buttons.
Card image is good. Great animation on Sign button in the top right corner. Only
animation helps to notice that it’s actually a button to sign. Let’s leave it as it is or
probably right in the middle of the card to be even more noticeable. Board on the
right with signature animation also looks fantastic. Pattern image on background is
good.
Card Popup
In the top right corner of the Images/Signatures let’s use a number of the elements
instead. Search is not clear, what should I search here? We should put “Search for
user” instead and this wording itself should be clickable as well as the loop from
the left. If you used “Report Abuse” previously then let’s use the same here, not
just “Report”. It’s also not clear who are all these avatars in the bottom of popup.
We should either mention the title of this section or remove it at all. I would also
suggest to use that pattern image as background of the popup. It’s necessary there
even more than on previous page (Create card page).
Summary:
This is my initial review on the current website. As you see it has a room for
UX/UI improvements.
Current desktop optimization is 51% which low https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fw
ishyoo.com%2F&tab=desktop
Mobile optimization is 49% https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fw
ishyoo.com%2F&tab=mobile
I have mentioned not all mistakes, more to come during the design stage of the
project. You have a great service with large potential. Let’s make the page as easy
as possible, think about your users on each step of the project and test your ideas
on them. Make users say “thank you” for your easy and clear services, this is the
best way to be successful on that market. I’m sure you will.
Take care,
Alexei Kulitski, UX consultant-