<div class="text-justify">

**Hello everyone**, this is my first time writing in this community, the reason is that I wanted to write a blog about one of my UX and UI design processes but I was not sure if this is the right community. Another problem is that when I start to type, it is quite hard to stop until I have explained everything, but looking at other blogs, I think pictures are more valuable than the text here. 

First of all before creating any interference or sketch I needed an idea. I am a huge sports and football fan and the hot topic here in Sweden, where I live, was the Swedish football league **[Allsvenskan](https://allsvenskan.se/)**. I checked the Allsvenskan application and it was terrible, in terms of information, colors and bad user friendliness, so I decided to recreate the Allsvenskan app.


<center>![allsvenskan-2024-spelschema-matcher-lag-tabell-tv-guide-1.png](https://files.peakd.com/file/peakd-hive/saif-ul-wahab/23u5WwhVoiJ4TedW72x6c9N5yBJXuQ6XUgykW6MFSniR3qXHJ4sXiwXGgBnPSuyEZ55NZ.png)[Photo by Dopest](https://dopest.se/allsvenskan-2024-spelschema-lag-tv/)</center>


First step was to create a **sketch**, which is often a guide to the designing process. I looked at various other leagues and their applications, one common thing was, **user log in**, **scores**, **results**, **team info** and **stats**. Now, I wanted to add something to make this application a bit different to others. So here in Sweden in order to buy match tickets you have to go to the home teams website and buy from there, but I wanted to add that to my Allsvenskan app to make it unique and different.

This is the overall sketch with flows and to not make this blog boring, I decided to not include one picture for every screen. My goal was to be clear with my design and color theme so that the app doesn't look cluttered with different concepts, because that won't be user friendly at all. This sketch was just a skeleton for help and not a final design so I knew that there would be a lot of changes on the way.


![Picture taken by me of the Sketch](https://files.peakd.com/file/peakd-hive/saif-ul-wahab/23tmcqgy5Eg68xZwe7JzCG6VDC5SSDoSzBCjhbUSsoq6KBmh4HZUoTS9mysTa2JkoBjw3.png)


After the sketch was completed, I started to design my application. Some components of a mobile, like **time and notification status** and **mobile navigations** are already made and you can just copy and paste them, because I had a lot of those templates on **Iphone 13 & 14**, I decided to make the design on **Iphone 14**. The concept and theme was clear so I just followed my sketch and was able to easily make this design. On the way I had to use **[Photoshop](https://www.adobe.com/se/products/photoshop.html#modal-hash)** to change the colors of logos to match them with the color theme and it was quite a task to balance everything together. Here is the design I made in pieces so that you can see the screens better.

# <center>**Log In & Sign Up**</center>
![](https://files.peakd.com/file/peakd-hive/saif-ul-wahab/23tcLvdYGfv54ohnZhzcvqkCmWwTVz5Nw5goJF732i2vbiBFqHkWyGQZFuj55EfPWCBCB.png)

# <center>**Home & Buy Tickets**</center>
![](https://files.peakd.com/file/peakd-hive/saif-ul-wahab/23vsjkYWDBegHKyt8jJsJYJTmePSXQqPUhfksa2ase35iH5Wri3uNbACp9cxEWCEHoDgX.png)

# <center>**Stats & Profile**</center>
![Screenshot (8).png](https://files.peakd.com/file/peakd-hive/saif-ul-wahab/23wggcnUddoGw7RcktyhEqupK8JJ2A2h31bAFTEbty3BUghub4JWyfHEz2qhxLBhRq7Gh.png)


This was the whole flow. Prototyping was hard, because I wanted to add scrollable elements to see all the matches and then few animations and popups as well, but in the end everything went to plan. I didn't have a password changer, privacy policy and settings in my sketch but when I was making the design, I thought without these things the application would look incomplete. So I added them later on, which also explains that your sketch is just a help, and you might forget things while sketching that you think of later. 


![Screenshot (10).png](https://files.peakd.com/file/peakd-hive/saif-ul-wahab/EocDHhCn8j6bQHGP15fRygPPR2o9QXXxB44Hirfx6Sq6ErQgM7ox47pNhvyPiLR7giF.png)

<hr>

***Hope you enjoyed my process, you have the whole flow as a video down below to make it realistic, sit back, watch and enjoy. Special thanks to @hamza-art for making it possible for me to publish the video.***   
  
https://youtu.be/HLCvwnysCOI?feature=shared
</div>