Bet Frames

New idea came up to build up a web based responsive platform for the people who is betting online in different sports or disciplines.

Summary

In general, I collected all ideas from the stakeholders and we started working on the most important features for the future application.

Services

  • User research
  • Competitor research
  • Workshop facilitation
  • Wireframing
  • Design system and UI
  • Prototyping & testing
  • Developer collaboration

People

  • 2 product managers
  • 1 designer
  • 5 engineers

Outcome

Delivered fully functional experiences together with the researches on one side and business requirements on other.

Research & discovery

In general, I collected all ideas from the stakeholders and we started working on the most important features for the future application.
We separated all project in different parts and sprints for the better collaboration between us and development team.

After collected all ideas, I started working on initial version of user flow. For the better understand the features, different business ideas and experience we agreed that this was the best and fastest way to group and connect all features on one place together with the terms for specific application roles (business, personal roles for users)

Also I was researching competitors with the focus to find out if there is a some similar application with it own strengths and weaknesses. The research results showed that the live apps are mostly focused on online gaming or blogging platforms. Here are the results:

BetMgm

This platform is mostly focused on news, sports results and online betting. I didn’t find any feature which contains any social networking parts.

 

Strengths:

  • Nice focus on the online betting,
  • Most important informations are in the main focus
  • Large content app, sorting & filtering works well.

 

Weeknes:

  • Users can’t switch to other state
  • Search feature not visible
  • Media filtering not clear

Betsnap

Betsnap is the web and mobile application for online playing games with friends. Well designed application, especially mobile version with it own feed feature, friend list, etc.

 

Strengths:

  • Two major parts (arena & ranked) separated very clear, mobile app
  • Good idea with matches with your friends
  • Leagues and snaps well organized with filtering and all necessary informations

 

Weeknes:

  • Feed feature has a not a lot post options
  • Friends feature not organized can be better with organising more important informations. The action for adding a new friend should be more visible

Solutions and iterations

After we defined to possible problems, get all the info from competitor research and users we defined the application flow on the beginning.

Together with the product managers, I started working on workshops bringing up all ideas, researches and we made our new Miro board. It was a nice, long and very useful iterations and we done mostly all necessary features which was necessary.

Together with the product managers, I started working on workshops bringing up all ideas, researches and we made our new Miro board.

The first and core feature that we started working on it was Feed. After few interations, talkings and meeting on our workshops, we tested internally with our few users the initial idea. The results were good, but only user’s frustrstions were about they the most important content for them based on their searches, clicks, etc.  Because of that, we added the stories on the top of the Feed page.

Sign in forms covered too. Actually, the business decision was to have two types of accounts which means that user can choose between personal or business account.

A bit more informations about the business account needed because the profile roles, company targeting, etc.

I made the forms as simple as we could and to postpone not so necessary inputs.

UI, hi fidelity mockups and prototyping

When we finished all features in Miro, I started working on brand new design system for the application.
Defined colors, fonts, UI elements and separated them in every artboard for itself with the description for each of it.

Admin features covered too. Basic features for admin panel are:

  • Dashboard
  • Page roles
  • Insights
  • Banners

 

An admin is having privileges to edit/add all users, check and edit their statuses, browse the statistics, create/edit/delete all roles and manage the marketing banners.

Feed feature

Feed feature contains the latest posts from selected users. Also showing different parts of it – News, Exe score and Match tracker.

Right sidebar shows new registered users and recent matches. Admin can edit widgets in the sidebar.

Insights

This admin panel feature shows the posts from the users, reach of it and date. Also the admin has the options for filtering results by the users and time.

Total audience and insights features actions which shows the users based on different intrests.

Page roles

Another admin panel features which shows different type of user roles using the application. The feature contains basic filtering and actions for each role.

Admin has privilegues to edit any roles and save it with this feature.

Sign in forms

The application has two major roles for sign in process. Actually, we had a business and personal account for our users.

It means that a bit more informations about the business account needed because the profile roles, company targeting, etc.

I made the forms as simple as we could and to postpone not so necessary inputs.

Outcome

In general, I collected all ideas from the stakeholders and we started working on the most important features for the future application.

Research & user flow

This part me helped me to understand the possible problems, define the strategy based on stakeholder ideas from one side and to find out more about the users and their needs.

Workshops & solutions

Sharing the ideas and put all people in one together is always good way to group and get the best solutions. Initial mockup versions based on the research and the main ideas.

Design & prototype

Group all together and to make fully functional mockups and prototypes with the defined all branding stuff with the new design system. Collaborations with the dev team was quick and successful.