Redesigning Unikrn
Utilizing Principles
Unikrn is a betting site focused on E-Sports. It is a fun experience, and the site performs well. It also utilizes responsive design which is fantastic. However, I believe that certain elements of the site hinder the possibility of a better experience. As a fan of E-Sports, I want to help in any way I can. Let’s boost Unikrn from diamond to challenger.
Redesigning the site without adding too many new elements, or changing too many things, offers a good experiment in optimal design that better suits the purpose of Unikrn.
Note: My purpose of this redesign is NOT to rebuild from scratch but rather to show how simple decisions, modifications, and principles can allow for a much better experience. This is a personal experiment.
Key Principles
Principles give direction to design.
- Focus & Purpose:
Unikrn is a betting site. - Clarity:
Only necessary information should be used.
Visual cues help users navigate. Clean & Simple. - Efficiency:
Don’t waste space or time.
We can begin our experiment with these principles in mind.
Home Page
The home page of a site can be viewed through two different lenses. The first lens is a natural view when the user is not logged in. This could be either a new user, or a returning user looking to log in. The second lens is when the user is logged in.
Technically speaking, multiple pages can be viewed through these two different lenses but the home page is the most notable as it often serves as a landing page.
The current Unikrn homepage functions quite well through the first lens as it offers a nice header that explains the purpose of the site as well as a clear form to create an account. It might be a bit cluttered though.
It also offers a glimpse into bets and articles.
Logging into Unikrn is quite easy and well done. I especially like the snappy tutorial that helps a user understand how the site works. However, a problem arises after all that is done and you want to use the site.
The Major Problem
This is the main view that a regular Unikrn user will see. It is a fairly nice looking site. It is aesthetically pleasing in general, and while the dark theme might not appeal to everybody, it at least follows a consistent pattern and can help ease your eyes when you are betting late at night.
There is one main issue with the image above. The main view does not focus on the purpose of Unikrn.
If we remember our first principle, we stated that Unikrn is a site focused on betting.
What do you see when you look at the home page? You see almost everything EXCEPT the lists of bets. The majority of the page is taken up by a carousel of articles. Some of them are useful such as the Unikoin announcement, but most of them are just articles which are relevant but better suited to the community or blog section. Different resolutions will display different amounts of the front page, but the fact that the other elements take priority over the bets is a major issue. It hinders the focus and purpose of the brand. This is especially true when you visit the site on smaller devices, or resolutions. Remember, people are coming to Unikrn to bet first, not to read articles.
Instead of bets, the site is focused on a giant header / hero carousel. This is fine for users that are not logged in and want to know more about the site but it slows down the experience for users that actually want to place bets. Granted, it is a nice looking carousel with nice articles but usability should always be prioritized first.
To put this in perspective, imagine going to Twitter and instead of being able to easily see all your tweets, you were instead greeted with a giant header that gave you articles on famous tweets or popular events that took priority over your precious tweets. I don’t know about you, but that would make me rage harder than facing a Soraka.
Focus on your purpose. Twitter has tweets, Unikrn has bets.
In order to get to the part of the home page that actually allows you to see and place major bets, you need to scroll down. This breaks the third principle in two ways.
- Priority space was taken up by a header instead of lists of bets, the purpose of the site in the first place.
- Forcing users to scroll down for no reason (unless you are on a larger resolution monitor, but we follow these principles in general) wastes a user’s time.
The design of a site should never hinder the experience of a user trying to use it for its main purpose. Unikrn is a betting site, not an article site. Fortunately, we can easily improve the site by removing or moving the carousel at the top. The “scrolled-down” view actually serves as a good home page. It has the games at the top, and the major bets in the middle with the betting slip to the right. Let’s use that view as a starting point and look at improving it.
The Nav
The Unikrn nav is well done. It is simple and fast. The one thing that bothers me though is the “Welcome Back” above my Unikoin currency. Why is that there? There is no point to have that message there, if at all. The site even includes daily quests and pops up an overlay now and then (which should ideally only happen once per day) to remind you that they exist which is nice. If you want to include “Welcome Back”, put it in the daily quest overlay, not above my currency.
The Unikoins are an INTEGRAL PART of the Unikrn experience. That space should NOT BE CLUTTERED BY POINTLESS MESSAGES. Sure, it is a nice message and better than “Welcome back scrub, stop feeding”, but it is equally pointless and hinders the experience. Good design does not waste space, nor distract from key elements.
The Game Row
While the “scrolled-down” view serves as a good starting point for a better home page, I do believe it could be further modified to actually use the game logos as the site currently uses fairly random (although iconic) images, largely focused on splash art or box art. However, most people do not recognize these images in 2015, as most games (especially E-Sports) are focused on digital downloads and put their logos at the forefront of their brand.
Logos serve a purpose. They provide clear and quick messages to users about the product they are using. The Unikrn logo lets people know they are using Unikrn, and game logos provide quick visual cues for which game they want to bet on or search through.
Using the actual League Of Legends logo is a better idea than using an old picture of Katarina. Sure, she is pretty, but I already don’t want to see her in a game killing my team, let alone on a site.
Game logos also help users who are not well versed in different games navigate the site better. They offer more clear distinction between what they are used to and what they don’t know. This improves the clarity of using Unikrn.
The Lists of Bets
These lists are the core part of Unikrn, or at least the home page. They allow users to place bets quickly and have a glance at major upcoming or ongoing events and matches. I like them in general, especially their card-like appearance.
These lists could use minor improvements however to help them reach their potential, just like CLG.
- Use icons of teams and logos to help give better visual clarity.
Icons and logos are universal for fans. Put a small League logo before “League Of Legends” , or put a team logo (if they have one) before the team names to help users navigate the lists visually. Also, a game logo before the match title can help users understand which game the match is for. - The grid icon in the top right is confusing. Use a list icon instead.
The grid button allows you to basically configure the home page to your liking and choose different games or categories of bets to list. This is a great feature, but the icon is confusing. These bet list cards more closely resemble LISTS, rather than grids. A list icon would give users more clear instructions that the button will allow them to choose another list. - The arrow icon is confusing too.
The downward (or upward) arrow allows you to “scroll” down the list and see more matches / bets. This is a bit confusing because the list remains as 1–5. This makes it unclear to a user what the button is doing or what it should be doing. At first, I thought the icon would collapse the list to save space, but then realized it was loading more content. To solve this, the list should update numerically to numbers greater than 5 to give a consistent list experience that allows users to really feel like they are advancing and progressing through a list. Also, the list should animate downward or upward to show that the user is going through the list of matches. Alternatively, and possibly a better solution is to just make the cards themselves actually scrollable.
The Betting Slip
The Betting Slip itself is very well done. It is very fast and works well, like most of the site.
Once again though, we can make adjustments. The “View Pending Bets” button should not be there. The expanded view showing the pending bets should be the default, with a scrollable interface or a button for “View MORE bets”. Clicking on that button wastes time. Less clicks = better experience.
Furthermore, the pending bets should automatically update through AJAX or any other solution. Unless it was a bug, I had to refresh / reload the pending bets to see additional bets I made.
Expanding the betting slip by default and automatically refreshing the betting data allows us to be more efficient with our space and time. Think of it like saving time in the shop so you can get to lane faster.
A quick note of importance is that you will notice small article features at the bottom of the page below the bet lists. This is a fine place to put articles as it is after the core features of the site. The articles are nice, but they are secondary in importance and the site layout should reflect that.
Small Grievances
I have already used this picture before, and I’ve already explained why the header carousel is not ideal, but I want to come back to it to make some final minor points.
The first issue is the marketplace, or rather its absence. On the home page, there are two links to the marketplace (one in the header / hero, and the other in the nav) and NEITHER OF THEM WORK. I’m not sure if this is just temporary downtime but please don’t give me links to features you don’t have yet. (Update: It appears the marketplace is location locked. This is fine, but the error message should make that clear.)
One small issue that might be a bug or a problem on my end is that the site seems to log me out automatically after a certain amount of time. It is quite annoying and I’m not sure what is causing the problem. It might be an authentication issue, but I haven’t yet examined the code in detail.
The other issue I have is not really a problem but possibly a concern for the future. The Unikrn logo is really fancy and nice. You can see it in the image above. The only issue with it is that it is fairly complex. Complex logos don’t work well in all spaces, especially smaller screens.
To put this in perspective, Google recently updated their logo (at the time of this writing) to this:
The design is simplified and focused on clarity. If you read their blog article on the redesign, they emphasis certain values, the most important to us being clarity across all devices. You might think that the old Google logo was already simple, but the serifs of the font were complex and when loading google under minimal conditions (especially on slow connections), they would load a font-rendition rather than the actual logo that was close but not the same. Their new logo (which is based on a custom sans-serif font they call Product Sans) can be loaded under all sorts of different conditions. Furthermore, they changed their icon to a nice “G” which serves as a solid icon that can fit in different locations such as the famicon in a browser tab, or an app icon where space is limited.
I bring this up because the Unikrn logo is similar to the old Google logo. It is fairly nice but overly complex and might encounter issues under stricter conditions. Creating a simplified version of the logo, possibly focusing on the “Unicorn K” (instead of the red star) in the middle could help give Unikrn a strong brand identity icon that can be used more effectively in certain areas such as app design and smaller devices, or slower connections. The world is a big place and we should make sure that all people are having an optimal time.
Conclusion
As you can see from the above image, the new home page mockup I created is more usable, and offers a better experience. It is clearer, efficient, and more focused on the goal of betting on E-Sports.
I did not go through the other pages because I believe I covered the core principles which can apply to all pages. However, it should be noted that informative banners and the like (such as in the game pages) can be useful as long as they are relevant and enhance the user experience rather than slowing people down. Secondary elements should be kept to a minimum, either through absence or by their size, color, vibrance, and priority.
Remember to focus on the principles of design. Good Design isn’t just about making things look pretty, it is about giving people a good experience and making them happy. Good design makes for a good product. Focus on your purpose, clarity, and efficiency.
I did not redesign Unikrn from scratch, and did not even change any element myself except for a few modifications. Simply by utilizing design principles, we can optimize just by making good decisions. The small details can be fixed afterwards.
Think of it like this:
Mechanics can get you far, but understanding the game, working as a team, and shotcalling are what make you world champions.
Finally, I know this article was quite long and I thank you all for reading it. I hope I did not come across as too negative as I criticize in hopes of making things better. It might seem nitpicky but making good design decisions and optimizations turn a good site into a great one. They are the difference between a diamond player and a challenger player.
I believe in Unikrn, as well as E-Sports, and I want to help them grow. Feel free to contact me for any reason.
Oh, and if anyone is looking for a designer or front-end engineer, hit me up.
James Mete
Jamesmete.com
@Jmete
Jmete3@gmail.com
