Web Design Critique #60: Mogo Style
Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.
Today’s site is Mogo Style, a site for ordering a personal logo.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.
About Mogo Style
A mogo is the perfect tool for your personal brand, made for individuals looking to stand out from the crowd. Use them for your business cards, emails, and profiles. Personal like a photo yet professional like a logo. Make an amazing impression, each and every time.
Here is a section of the homepage:
Initial Impression
First of all, I have to comment on the service. It’s a really interesting idea. What they do is take a photo of you and turn it into an illustration that’s essentially an iPhone-icon-like square. So basically it’s a digital avatar service that provides you with a neat little personal icon for Facebook, Twitter, business cards and more.
The homepage of the site communicates this very well. Despite the fact that the company has a very unique concept, it only took me a second to understand it. That’s about as lofty a goal as you can hope for here and they nailed it.
The overall design is clean and minimal, which really draws your attention to the slideshow explaining the service and showing examples. I would say that the site is pretty close to perfect but I definitely have a few recommendations. Let’s take a closer look.
Alignment
The alignment is one of the few things that I really think needs to be addressed. It’s almost perfect, but I’m a control freak when it comes to alignment and the one out of place element here really bugs me. The Mogo Style text is aligned with the rest of the elements, but the little heart is sort of floating off in no man’s land.
The problem here is that the logo and the text are a visual unit. You don’t perceive them as two separate elements but one. The entire logo should line up on the left site with the rest of the content on the page. The solution here is easy, just move the logo to the right so that the heart currently sits where the text does.
The Story
As I mentioned above, the site does a great job of communicating its concept. This is largely thanks to the large slideshow on the homepage, which introduces you to Mogo Style and what they do. Here are the four images that you’ll see, presented in order of appearance.
The first thing you see is some examples of the product that they deliver. In this case, the picture is really worth a thousand words or more. No clearer explanation of the service could be offered. Next up, they impress you. The first slide gets you interested but now it’s time to communicate quality. Here they claim that every logo is hand-drawn. It’s hard to justify paying someone to stick your photo into an auto-trace program but a custom hand-drawn illustration is another matter entirely. The next two slides are dedicated to showing you why you need the product by depicting some use cases.
The setup here is a great sales pitch: Here’s what we sell, here’s why it’s great and here’s why you need it. Any time you’re structuring a slideshow for a homepage you should be keeping similar communication goals in mind.
Readability
Now, I will say that I’m not crazy about the readability of the text over the photographic slides. The designer tried to improve the situation with bold text and a drop shadow but it could still be much better. The photos here are simply too busy to easily read text over. If you don’t have a large field of fairly solid color, you almost shouldn’t even try it.
Fortunately, the solution is almost always an easy one: if you don’t have a solid color field, make one! A simple black bar goes a long way here. To make things a little more snazzy, I reduced the opacity of the black bar and blurred the image behind it.
Compare this text to the actual example and you can immediately see that readability has been drastically improved and it still looks pretty stylish, perhaps even more so.
The “Learn” Page
Jumping over to the “Learn” page, we see another well-designed space, this time with a much more linear layout containing three primary sections and some background story at the bottom.
I think this page is great, I like the expansion of detail on the important points and the use of different but closely related imagery. It would’ve been easy to make this area completely redundant with the homepage but it does a good job of standing on its own.
I’m inclined to think that the social logos after each paragraph are a bit redundant. Visually, it looks great but conceptually there’s really not much of a reason to repeat this element so many times. I think this page would greatly benefit from a slightly reduced focus on social media and an increased focus on getting users to the purchase page. A “get yours now” button or something similar would help.
Where’s the FAQ?
My last comment about the site is that, from a designer’s point of view, there’s not enough technical information on the product. Is this raster or vector? If it’s raster, what’s the resolution and size of the delivered file and does it come on a transparent background? How easy is it to change the color? What file formats does it come in?
Granted, most of this site’s customer base won’t have a clue what these questions are all about but there is a gray area of people who aren’t quite designers but still know enough to have questions about the product to be delivered.
Another question that comes to mind that everyone will ask: What’s the turnaround time? Are we talking hours, days or weeks? I think there’s an easy and elegant solution to all of this: an FAQ page. These are prefect for placing all those random bits of information that some customers will inevitably ask about. It also serves an important purpose for customers who simply aren’t informed enough to ask such questions but are perfectly capable of understanding the answers.
Conclusion
In summary, Mogo Style is a great little site and a very unique service. The home page communicates the concept very well and needs only a slight alignment adjustment and perhaps a reworking of the text on the slides. The “Learn” page also looks great but could use a few less social icons and a few more calls to action regarding purchasing. Finally, I think the site would benefit greatly from an FAQ page.
Your Turn!
Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.