Be Design logo
Sportsrunner app design



SportRunner required a design with old-fashioned HTML/CSS coding to be integrated into an app. The design needed to be mobile-friendly with multiple, complex data entry fields that could be completed on the fly. The design interfaces then needed to be coded for integration into their app.

Platform: Adobe XD and HTML/CSS

SportsRunner launch video

The client

SportsRunner had an idea. They saw a need for sporting teams to be able to enter and record games scores on the go. The had an app developer that could make it functional. What they needed was a designer to give the right look and usability.


SportsRunner had a very clear idea of what they needed. 

The Process

Design commenced in Adobe Photoshop and XD. Designs were submitted in .jpg and .pdf for feedback from the client. 

Once the designs were signed off, the coding began. HTML and CSS were delivered for feedback on usability.

The Product

Desktop Login

mockup login

Mobile Login

mockup mobile login

Data Entry Screen

mockup data v4

Mobile Entry

mockup mobile data v3

Sets Entry Screen

sets desktop 2

Mobile Sets

sets mobile 2

Players Info

player entry desktop 3

Players Info Mobile

players mobile 3