Graduation Project Documentation by Manoraj

Graduation Project 2019

"STRATEGIC THINKING & DESIGN FOR RUNADAMâ&#x20AC;?

Sponsor

Lollypop Design Studio Student

Manoraj SG Communication Design (Graphic Design)

Industry Guide

Sathish Natarajan

Faculty Guide

Prof. Ranjana Dani

GRADUATION PROJECT 2019 PROGRAMME : PG PROGRAMME The Graduation Project Evaluation Jury recommends MANORAJ SG to be awarded the Graduation Degree of the MIT Institute of Design, Pune IN COMMUNICATION DESIGN (GRAPHIC DESIGN) herewith, for the project titled "STRATEGIC THINKING & DESIGN FOR RUNADAMâ&#x20AC;? Members : NAME

ORGANISATION

on fulfilling the further requirements by * (*Subsequent remarks regarding fulfilling the requirements :)

Chairperson of the Jury

SIGNATURE

“Ensure it feels like it’s made by human, for humans.” Stefan Sagmeister

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

STRATEGIC THINKING & DESIGN FOR RUNADAM

Dedicated to my Mother and Father for giving me this beautiful life. Dedicated to my Sister for always having the belief and faith in me. Dedicated to my mentor Prof. Ranjana Dani for guiding me in the right direction. Dedicated to God, for always being by side in form of various people.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

• First and foremost I would like to thank MIT Institute of Design for the wonderful learning opportunities it has provided me over the period of 2 years. • I want to express my deepest gratitude to my guide Prof. Ranjana Dani for her guidance and support during the project.

00|

A WARM THANK YOU

• Lollypop Design, for being a wonderful place to learn and grow with so many creative minds around. • Along with being supportive, Sathish Natarajan my mentor at Lollypop, instilled the confidence and faith in me to take up projects. • I would also like to thank Team RunAdam at Lollypop, Navajish Ahamed, Chaithra Reddy, Dhwani Kikani, Ajay and Varun for giving me the freedom to explore, develop my skills and expertise in this field. • Friends at Lollypop studio for helping me settle down and making me feel at home and to all those endless laughter and fun. • Smriti Chowdhury, Shruti Shankar, Madhumitha Venkatesh, Shilpa Rajpurohit and Eshwanth for being my life lines and support systems throughout my two years at MIT ID. • Chanakya and Kadambari for staying by my side through thick and thin. • Mom, Dad, Sister and God for being my rock solid support system. • City of Bangalore for gently embracing me in its charm and providing me with countless memories.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

TABLE OF CONTENTS 01

introduction

conceptualization

104

UX Design Low Fidelity Wireframes High Fidelity Wireframes - Webapp Iterations High fidelity wireframes - Mobile

About Lollypop Design

Why this project About RunAdam The team

visualization

162

UI Design Icons Design UI Design - Webapp

brief & research

UI Design - Mobile

FED

Understanding the application Initial Brief

Timeline Competitor Study User Group Study

graphic exercise

214

Readability & Legibility E-mailers Design

analysis About the Process Decoding the brief

epilogue The Journey

User scenarios

References

Flow of the module

Get in Touch

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

246

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

01|

INTRODUCTION

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

LOLLYPOP DESIGN

Lollypop is an UX UI company that envisions to ‘put India on the world map’ as a digital design destination. They are based in Bangalore & Mumbai and is headed by the founder Mr Anil Reddy. They are a closely knit group of researchers, designers and developers who enjoy crafting great solutions. They have proved their metal in the field of digital design by re-imaging close to 20 plus industries. Their clients include many eminent brands ranging from fortune 500 companies to start-ups. Some of them are Myntra, Swiggy, The Hindu, Accenture, Housing, Stanford University, Paytm, Narayana Health and many more. Lollypop team are a bunch of creative rebels with principle. Their innovative tech-driven processes blend efficiency and effectiveness that drives value into the client business. Research first approach helps them create progressive yet empathetic solutions. Along with a great ambiance and a nice work culture, Lollypop has a good client interactions and exposure for a beginner. I learned alot of things from scratch and the level of understanding and challenges were great. Lollypop has a great team of people who always inspire to create.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

ORGANIZATION STRUCTURE USER EXPERIENCE (UX) They are the people who empathize with users and bring out simplified solutions to real-world problems. They analyze tasks, user journeys and provide work flows, interactions and wireframes.

USER INTERFACE (UI) Creative minds looking to create pixel-perfect look and feel for the designs. These people create trends and thrive on details.

FRONT-END DEVELOPERS This team consists of bunch of coders and testers, who make sure that the designs go live on the web. They are the ones who make the visuals come alive.

MANAGEMENT TEAM

They are the ones who crunch the numbers and do the math behind the screens. They are also responsible for pitching for various projects and bringing in clients.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

WHY DO A UX/UI PROJECT? My design journey has throughout been explorative in nature, irrespective of the field of design, I had nurtured the love for good design expressed via different mediums. Now that the world is moving towards digital design and breaking new boundaries in the field, it felt the right moment for me to explore the unknown. Mr. Sathish Natarajan had mentioned about this project when we had met during my initial days of my internship and had given me a choice to choose from a few other things he had in mind. Having already done a full fledged UX UI class project, gave me the necessary prerequisites to work in the field. I had a proper look at the entirety of the application and also given a proper team to support me, gave me the assurance that working in this project could get me the proper industry experience that I needed. I have always valued the learning experience in a project more than another aspect. The apparent creative freedom and opportunity to explore the unknown and also learn from the industry best is what helped me decide on working with Lollypop on RunAdam. At first it felt like stepping into a empty canvas, but I wasn’t alone as I had a team to lean on for support.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

RUNADAM Runadam is a networking platform that aims to connect aspiring athletes with professionals, coaches, sponsors and other specialists in the sports ecosystem under one roof. By integrating data, creating access, facilitating communication – the unique sporting ecosystem was now under construction. Additionally, the platform also aggregates sports associations, institutions, event creators, venue providers, teams and clubs, corporates and more on a single forum. Runadam wants to create a virtual space for all the sports related activities as well as creating a marketplace for trainers and other stakeholders. The platform wants to enable sport professionals to get the right training, equipment based on his requirements. A sport professional can be professional athletes, players retired from sports or wanting to give back to the society and students who already identified by their institutions and teaching staff can be recommended to get coached at a professional academy. Unique features like sponsorship, events and venues booking, coaching packages, finding coaches and fellow athletes with ease, all make the platform one of it’s kind in the market. With clear set agendas RunAdam has the potential to become the next best thing and help realize every sporting dream.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

THE TEAM

Chaithra R Reddy

Dhwani Kikani

UX Designer

Navajish Ahamed

Varun N R

UI Designer

UI Developer

Ajay P A Project coordinator

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

02|

BRIEF & RESEARCH

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

26 TEAMS & CLUBS - FPV

Search by athletes, coaches, institutions

Page

Notifications

TEAMS & CLUBS - TPV

Settings

Add link to sell your team/club match tickets here. 3

Search by athletes, coaches, institutions

You're 10% complete! Page

Notifications

Settings

Completing your profile will increase your chances of becoming a verified Athlete.

IPL 2019 tickets available here. Book now!

Overview Go to

Announcements 03 posts

Chennai Super Kings Owned by Chennai Super Kings Cricket ltd.

Overview

Jobs

10 listings 2000 members

2009 | Chennai | Cricket

Announcements

Players 08 followers

Asia's largest sports academy located in Chennai, Tamilnadu; functions

03 posts

as the academic wing of Sports Authority of India (SAI); offers in more

Chennai Super Kings

10 listings

Owned by Chennai Super Kings Cricket ltd.

Add/Edit your job requirements here.

View Jobs

Build your network & find the right job profiles for your page here.

UNDERSTANDING THE APPLICATION Lollypop has been handling RunAdam for more than a year now. While the initial branding and Phase 01 designs of the application are already up and running live on the web. Currently the platform has over 5000 user base and 200 active users in it’s initial release. I joined the project when Phase 02 designs of the platform were already underway.

Support Staff 2009 | Chennai | Cricket

2000 members

Asia's largest sports academy located in Chennai, Tamilnadu; functions

08 followers Contact Info

Support Staff

Gallery

Announcements

Sponosors

Apply for jobs here Specialities

View jobs

Connect & apply this team/club by viewing their jobs here.

Junior SuperKings Tournament 2018 Chess

Gallery

Webinar

Specialities

Announcements

15 - 30 December 2018 M. Chinnaswamy Stadium

Junior SuperKings Tournament 2018 Chess

CSK School League

Webinar

15 - 30 December 2018

M. Chinnaswamy Stadium

Go to listings

CSK School League 15 - 30 December 2018

Players

M. Chinnaswamy Stadium

View Leaderboard

Go to listings

MS Dhoni

Suresh Raina

Francios Du..

Suresh Raina

Wicket Keeper / Batsman

Batsman

Wicket Keeper / Batsman

Batsman

Players

View Leaderboard

View All

Support Staff Stephen Fleming

MS Dhoni

Suresh Raina

MS Dhoni

Suresh Raina

Wicket Keeper / Batsman

Batsman

Wicket Keeper / Batsman

Batsman

View All

Head Coach

Support Staff

Eric Simons Bowling Coach

Stephen Fleming Head Coach

View All

Eric Simons Bowling Coach View Team Performance

West Zone Cricket Tournament

View All

2018 - 2019 View Team Performance

Sacred Heart Cricket Tournament

Tournament

2018 - 2019

West Zone Cricket Tournament

View All

View Team Performance

2018 - 2019

Awards

Sacred Heart Cricket Tournament

View Team Performance

2018 - 2019

Rajiv Gandhi Khel Ratna Karnataka State Cricket Association

View All

2013

Rajiv Gandhi Khel Ratna

Awards

Karnataka State Cricket Association 2013

Rajiv Gandhi Khel Ratna

I Won This Prestigious Awards For Coaching The Winning Team Of The International Basketball Tournament.

Karnataka State Cricket Association 2013

View All

Rajiv Gandhi Khel Ratna Karnataka State Cricket Association

Sponsor

To gain a proper understanding, I had created an account on the platform to have a first hand experience of using the application, I had also sat with the design team to understand the nuisances of visual design that went into designing the platform. During the first couple weeks, I was tasked with designing several modules for the mobile application to ease myself into the project.

Players

Tournaments

as the academic wing of Sports Authority of India (SAI); offers in more Sponosors

Tournament

Initial days of internship was all about understanding the application, the approach taken in providing a solution to the stakeholders requirements and the visual language of the entire platform. The RunAdam team at Lollypop were very helpful in helping me settle in the project by giving me adequate knowledge transfers. Referring the case study and also other related document of the project helped get the basics right.

Jobs

Tournaments

Contact Info

2013 I Won This Prestigious Awards For Coaching The Winning Team Of The International Basketball Tournament.

India Cements Title Sponsors

View All

India Cements

Sponsor

Title Sponsors View All

India Cements Title Sponsors

Gallery

India Cements Title Sponsors View All

Gallery

+6 more

Specialities Cricket

Athletics 100m Chess

High Jump

Long Jump Cricket

Athletics 100m Chess

Javelin Throw

High Jump

Cricket

Athletics 100m Javelin Throw

Long Jump

Athletics 100m

Handball

Football

Javelin Throw Handball

Football Cricket

Trekking

Javelin Throw

Athletics 100m Chess

Specialities

View All Cricket

Athletics 100m Chess

High Jump

Chess

Javelin Throw Long Jump

Cricket

Athletics 100m High Jump

Long Jump

Athletics 100m

Handball

Football Cricket

Athletics 100m Javelin Throw

Cricket

Trekking

Javelin Throw Handball

Football

Trekking

Athletics 100m Chess

Javelin Throw

View All

Wireframes - Webapp

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Coach

KEY PERSONAS

The coach could give back to the sporting community by connecting with athletes through the platform and mentoring them. They could also create coach packages through the platform.

During the research phase four key personas were identified they are athletes, coaches, sports professionals and the general public. The platform has been designed in the keeping in mind the needs of all these four stakeholders.

Support Staff A support staff could be nutritionists, physiotherapists, fitness specialists, trainers and more. The platform bridges the gap between the support staffs and the athletes. They would also be able to create consultation packages.

Athletes The platform is built around the athletes being the key stakeholder. An athlete would be any sports professional striving to excellence in a given sport. An athlete could ask for sponsorship and get mentored by established coach by using the platform.

General User The final stakeholder are the general user who could be an sport enthusiast. They could sponsor the athletes, follow their favorite teams, and even book events and venues through the platform.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

STRUCTURE OF THE PLATFORM PRO

ATHLETES

STRUCTURE

COACHES

The various modules were designed keeping in mind the client’s requirements and also having all these modules completes the sports ecosystem the platform strives for.

SUPPORT STAFF

VERIFIED

PRO VERIFIED

GENERAL USER EVENTS & VENUES EDUCATIONAL INSTITUTIONS ACADEMY TEAMS & CLUBS ASSOCIATION CORPORATES GENERAL FITNESS MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

LOGO REFINED

VISUAL DESIGN The visual design started off with brand identity. The RunAdam logo significances letter ‘R’, and a human being running and also the lines on the typeface represent the cuts that are gained while training. The thought symbolizes sportsmanship; a mindset that’s always ready for a challenge and fights against all odds to become stronger. The primary brand colors are Blue, Orange & Red. Blue represents increased focus and a clear thought process, Orange communicates enthusiasm and happiness, and finally Red gives the energy and strength to chase those dreams.

LOGO USAGE ON DIFFERENT RATIOS

Actual Logo

Logo on website

Logo Mark

App Icon

PRIMARY COLORS

HEX: #2DB0EA

HEX: #F7941D

HEX: #EF4136

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

TYPEFACES

COMPOSITION

The primary typeface is Roboto, which is majorly used on the platform. Roboto was developed by Google as their system font for the mobile operating system Android and was released in 2011. It was made to be a web friendly typeface with four different weights and also the load time of the typeface is very fast on the web. On web Roboto is very easy on the eyes for the users.

Since the application will be used in multiple platforms namely webapp and mobile, a mobile-first approach was adopted to ensure that the design language is similar across all the platforms. The platform uses a card style layout to ease the users’ understanding and also for greater accessibility as the sports persons are always pressed for time.

Antonio is the secondary typeface used in the platform. Antonio provides a nice contrast to the more clean and simple Roboto typeface. The condensed natural gives a sporty feel and added dynamism.

Roboto

Aa Aa Aa Aa Light Regular Medium Bold

Antonio

Aa Aa Aa Light Regular Bold

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Mobile Application

Application Screens

1+&2%34(5#4/($*$#(46-#/4(6"%/7-#8

!"#$%&'()%*$(%+(%,,-.+/0(Login

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019 !"#$%&'()%*$(%+(%,,-.+/0(Login

INITIAL BRIEF After getting accustomed to the project by working on several modules along with the team. I was given the opportunity to take up a module from the scratch. The module given to me was Teams & Clubs. Like any other module in the platform, the basic on boarding and functionalities of the module were given by the client to begin off with. A team or a club could be any professional sporting team over the global. They could be able to connect with their fans, sell tickets, find coaches, share updates and connect with other stakeholders on the RunAdam platform. A teams & clubs page would ideally be a page on the application containing all the necessary informations about them. I did have certain limitations as to maintaining the same level of user experience and visual consistently that had been already established in the platform. But, I was given the opportunity to explore different ways as how to break down information and strategically present the information to the user.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

ON BOARDING

FUNCTIONALITY

(Information that’s required from the user in order to be display the same on the page)

(The important functions that the module must possess)

Name of the club/team

Add team players of the current year (Profiles of the player)

Sport type & Play level

Profiles of Coaches/ Support Staff

Description about the team/Club

List of major past tournaments, List of upcoming matches Other promotional events conducted

Owned by & Managed by Captain Name The year team/club was formed Social media links Enter the name of contact person & contact detail City they are based on

Live scores and updates Team Performance over a season Details about Sponsors Job opportunities Sell Tickets leaderboard Watch videos or access content.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

TIMELINE

4th March

Initial Brief received & brainstorming began

7th March

Client Briefing, Modification of Brief

13th March

1st UX Iteration

19th March

2nd UX Iteration

20th March

3rd & Final UX Iteration

25th March

Visual Design - Webapp

27th March

UX Mobile Wireframes

The brief timeline of the entire project is given on the next page, explaining the various stages that the project under went in short.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

2nd April

Visual Design - Mobile

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

THE BROADER ONE’S UNDERSTANDING OF THE HUMAN EXPERIENCE, THE BETTER DESIGN. - Steve Jobs

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

COMPETITOR ANALYSIS I started off by doing a competitor study to get a better sense and understanding of what others applications in similar field were doing. Even though RunAdam was first of it’s kinds and did not have any direct competitors, for the purpose of the study, I looked at cross category applications. The study was conducted to understanding where the product stands in the market, to know the strengths and weakness of the competition and to have reliable evidence when making changes within the product. After carrying out a holistic audit of the applications, I categorized the findings under semiotic, navigational and experiential in order to gain a meaningful understanding of the information.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

KHELOINDIA <kheloindia.gov.in> The Khelo India programme has been introduced to revive the sports culture in India at the grass-root level by building a strong framework for all sports played in our country and establish India as a great sporting nation. The platform has rules and regulation for most of the sports. It also has a performance tracker which the parents or a school sports teacher can use to track their kids performance overall.

SEMIOTIC • a energetic color palette adds to the bold typography used on the platform which brings out the sporty feel • a clean card based layout helps present the information in clutter free manner • visual consistency is lost while navigating into the platform

NAVIGATIONAL • a top navigation bar gives a clear idea of modules present on the platform • some of the modules takes the user to another website altogether • clever use of different types of call-to-actions • no CTA asking the user to download the mobile app

EXPERIENTIAL • bold and loud visual language • lacks the focus of the message to be communicated by the platform

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

MAKEACHAMP <makeachamp.com> Make a champ is global platform for crowdfunding for competitive sports. The platform aims to ensure that every competitive athlete gets the support they need to succeed. MAKEACHAMP helps athlete raise funds, share their story and grow their fanbase. They are present in more than 36 countries in the world.

SEMIOTIC • a clean landing page with the clear message of the what the platform is about • since the platform has been used by people across the global, a fairly clean and simple layout style works • card structure gives information to the point, helps the user to know the important details • a wise use of single color palette

NAVIGATIONAL • a simple three step process helps the user to complete the task of sponsorship • each project has separate page which makes it convenient to view them • call-to-actions are at appropriate locations, with the right color for the contribute

EXPERIENTIAL • a clean layout with lot of white spaces make it easy on the eyes • a clear focus on the task for the user to complete • the color palette gives a wise and mature look to the website • a chat box on the landing page gives a personalized feel

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

FITTERNITY <fitternity.com> Fitternity is a fitness discovery and booking platform, it allows you to discover new forms of fitness, experience them with trials and purchase fitness services or memberships across various fitness forms like gyms, yoga, zumba, marathon training, personal trainers, healthy meals and many more. The platform allows users to book and attend sessions over 20 categories of fitness services.

SEMIOTIC • Too many banners on the landing page vying for attention • monochromatic theme doesn’t bring out contrast in the page • card structure helps better presentation of large chunk of information • different kinds of icons used create inconsistently in visual design • too much cognitive effort due to much information on every page the user end

NAVIGATIONAL • header bar on top is very small that the user might miss out and doesn’t have a clear idea of where they are on the platform. • click on banners takes the user to another tab altogether. • call-to-actions are at appropriate locations.

EXPERIENTIAL • to much information for a first time user grasp • single color palette fails to create contrast in a content heavy platform • to many images of non-Indians working out, does not bring out the connection with the user.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

CUREFIT <cure.fit> CureFit is an Indian health and fitness company offering digital and offline experiences across fitness, nutrition, and mental well-being. Cure.fit offers both online and offline experiences across fitness, nutrition and mental wellbeing through its 4 products, i.e, cult.fit, eat.fit, mind.fit & care.fit.

SEMIOTIC • a pacy video playing on the background gives a clear picture about the platform in one go • a modern take on the website with the use of gradient colors • consistency over the use of icons and illustrations throughout the platform • nice contrast between the images and the content

NAVIGATIONAL • bi-directional navigation i.e both horizontal and vertical scrolls are active throughout the platform • clever use of different types of call-to-actions • a clear indication on every page for the user to know where they are on the platform

EXPERIENTIAL • very youthful feel with the color palette and icons used in the platform • a modern take on the platform with the use of parallax effect • a clean presentation of information

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

LINKEDIN <linkedin.com> LinkedIn is the world’s largest professional network on the Internet with more than 630 million members. LinkedIn helps connect the world’s professionals to make them more productive and successful.

SEMIOTIC • three column grid on the news feed page gives clear division of information • the card structure of presenting information (be it images, texts, videos) works well as huge chunks of information has been neatly arranged • use of san serif font and one color palette gives a very professional outlook for the platform • the gamification for completion of profile is very nice user engagement

NAVIGATIONAL • bi directional navigation i.e both horizontal and vertical scrolls are active throughout the platform • clever use of different types of call-to-actions • the top navigation bar gives a clear indication of which section the user is on every page

EXPERIENTIAL • • • •

a very professional feel to the platform badges and medals are clever user engagement tricks a clean presentation of information ease of use throughout the platform

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

INSIGHTS • Having looked at all these platform, it is very clear that there is no direct competitor for RunAdam. • All these websites have any unique value proposition in them, they focus one specific feature or couple of them to build their platforms. • To create a smooth user experience for athletes of all segments, the websites are relatively low on visual design with simple and clean elements to go with. • Because their storytelling lacks an edge, websites like Makeachamp do not invoke the passion to sponsorship an athlete.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

• On the other hand, websites like LinkedIn have a good gamification and story telling which drives the user to accomplish goals in the platform. • Trust is a big factor when it comes to sponsorship or booking a package using a platform. Building the brand to create trust is a huge challenge which best done by Linkedln. • Translating the sports vibe onto the platform, helps it to stand out from the competitor and also evokes the user to bring the zest on the field onto the platform too. Websites like Cure.fit does bring the sporty feel onto their platform to an extent.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

USER GROUP STUDY Since RunAdam is being used by people across all social segments, it was important to study and learn about the user in order give out a product which is accessible to all. As stated earlier, RunAdam has four major stakeholders Athletes, Coaches, Support Staff & General user. The user study was also conducted amongst these target group.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Arvind Kumar BASIC INFO Age Class Residing City Sport Academy

BACKGROUND 15 Standard X Chennai Cricket, District Team Loyola Sports Academy

DEVICE USAGE Time spend per day Devices used Frequently Used Apps Purpose of Use CRICKETER

HARD WORKING

PASSIONATE

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

FRIENDLY

4.5 hours Mobile & Laptop Whatsapp, Facebook, Youtude, Cricinfo Communication, entertainment & to be updated about the sport

Arvind hails from a middle class family. He lives with family and has two siblings. He has been playing cricket from the age of eight and idolizes Virat Kohli. After observing his good performance in the school tournaments, Arvind’s P.T teacher encouraged his dad to get him enrolled in a professional academy for training. And since he’s been training at Loyola Sports Academy. He’s won several awards and sponsorship till date. Through his consistent performance, he has earned a call for the district cricket team.

GOALS • Represent the country at the international level • Create records and milestones in the sport • Have access to state-of-the-art facilities

FRUSTRATIONS • Sports facilities are sometimes too expensive to afford • No access to proper nutritionist • Traveling to play matches becomes an expensive affair

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Isha Pawar BASIC INFO Age Class Residing City Sport Academy

BACKGROUND 18 Standard XII Mangalore Gymnastic, District Team Gymnastics Association

DEVICE USAGE Time spend per day Devices used Frequently Used Apps Purpose of Use ATHLETE

BRIGHT

FOCUSED

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

OPTIMISTIC

2.5 hours Mobile & Laptop Whatsapp, Facebook, Youtude Communication, to be updated about the sport

Isha hails from Mangalore in Karnataka from a middle class family. She started playing volleyball during an young age, until one day when she was introduced to gymnastic by her sports teacher. Even though she started late, she has excelled in gymnastics quite well. Lack of proper coaching staff has made it difficult for her to progress in the field, but she does not want to back down. Her recent good showing at the national levels has caught the eye of several coaches and sponsors.

GOALS • Represent the country at international level • Give back to the sporting society by helping fellow athletes come up • Have access to state-of-the-art facilities

FRUSTRATIONS • Since Gymnastics is not a mainstream sport, Isha finds it difficult to right the coach and training materials • Traveling to play matches becomes an expensive affair • Lack of sporting facilities

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Krishnan BASIC INFO Age Residing City Sport Work

BACKGROUND 61 Chennai Table Tennis, Represented India at CWG 2004 Head of Table Tennis association

DEVICE USAGE Time spend per day Devices used Frequently Used Apps Purpose of Use EX - PLAYER & COACH

Less than 3 hours Mobile Whatsapp, Facebook, Youtude & Instagram Communication, sports related news

Krishnan is 61 years old and lives in Chennai with his wife Jayashree. Growing up, Krishnan has been actively involved in all sports at school, but table tennis was his true passion. He was the captain of the Indian table tennis team and even went on to represent India at the 2004 Commonwealth Games. In recent years he been actively involved with the sport by being an integral of the Table Tennis association and plans to start a Table Tennis League in Chennai

GOALS • To find the right kind of supporting staff to establish a league • To get sponsors or funding to support his league

FRUSTRATIONS INSPIRATIONAL

HUMBLE

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

PATIENT

• Not having a platform that would help him reach out to better table tennis players and support them

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Meera Raj BASIC INFO Age Residing City Work Family

BACKGROUND 37 Bangalore Homemaker Husband: Abhishek, 42 Two sons: Abijeet, 12 and Karthik, 10

DEVICE USAGE Time spend per day Devices used Frequently Used Apps Purpose of Use MOTHER

7+ hours Mobile & Laptop Whatsapp, Facebook, Youtude & Instagram Communication, Entertainment

Meera and Abhishek have been married for 12 years. The live in Bangalore with their two kids. Abhishek was a semi professional badminton player during his college days. His passion for the sports rubbed off on his two sons, who have now shown real interest in the sport. Meera and Abhishek now want to give their kids a professional training in order to make them shine in the field and are looking for the best coaches in town near their residence.

GOALS • Find the right coach near her locality • Give her children access to state-of-the-art facilities

FRUSTRATIONS LOVING

SUPPORTIVE

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

OPTIMISTIC

• Lack of single source of authentic information

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Abhijeet Mitra BASIC INFO Age Residing City Work

BACKGROUND 26 Hyderabad IT Professional

DEVICE USAGE Time spend per day Devices used Frequently Used Apps Purpose of Use FITNESS FREAK & SPORTS ENTHUSIAST

9+ hours Mobile & Laptop Whatsapp, Facebook, Youtude & Instagram Communication, Entertainment

Abijeet is an IT professional in Hyderabad. His daily routine goes something like morning running or cycling and then he heads to his office after he is done with work, he heads straight to the gym to workout. He follows a very strict diet and is always concise about the things he eats. He follows the top athletes to get inspired and follow their daily routines and workout secrets. He is also a passionate fan Manchester United and a curious supporter of the Indian Cricket Team. He knows all the stats and trivia about the sports teams and constantly follows them.

GOALS • Follow his athletes idols and keep update to their day to day activities. • Find gyms and packages around him with a proper review.

FRUSTRATIONS SPORTIVE

LIVELY

CHEERFUL

• Lack of single source of authentic information about the gyms and their packages. • No social media promotes the athletes in their truest form. One doesn’t have much a access to the athletes sportive side of things.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

03|

ANALYSIS

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

PROCESS Since the project was up and running and I had joined it in the latter stages, alot of knowledge sharing from the team and also alot of study about the application helped me accustomed with the application. Also working on several modules in UI under the guidance of the team helped me learn the nuances. When given the brief for Teams & Clubs module, a quick study about the competitors and the target group were done in order to gain better perspective. The brief was then decoded into different segments to work on them individually and then combine it to form the final module. User scenarios for each of the segments were created for better understanding of what the user might what from that particular segment. The user scenarios really helped me narrow down and prioritize on the information that the user could want out of the module. Once the basic flow of the module was decided, sketching of wireframes began. The high fidelity wireframes were presented to the client over a call and the necessary changes were incorporated. The wireframes for mobile followed by the wireframes of the webapp. The UI part began with the webapp, later moved to the mobile UI. Once the visual design was completed, the files were moved to the front-end development team and the knowledge sharing about the flow of the module was given.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

FLOW OF WORK

UNDERSTANDING APPLICATION • User group study • Competitor study

INITIAL BRIEF

DECODING THE BRIEF • User scenarios

UX & WIREFRAMING

UI DESIGN

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

DECODING THE BRIEF At first looking at the brief, it felt this could be a big module in terms of functionalities. We felt the client us trying to incorporate to many aspects which in itself would make a stand alone website. Functionalities such as Live score, Job opportunities, leaderboard were huge functionalities to be incorporated in the module. So we decided to bring down each functionality, analysis and create user scenarios which in turn could give us the adequate information that a user could benefit from having it in our module.

Different functionalities for creating user scenarios Jobs Live Score Leaderboard Player Profile

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

DESIGN IS NOT JUST WHAT IT LOOKS AND FEELS LIKE. DESIGN IS HOW IT WORKS. - Steve Jobs

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

USER SCENARIOS “A user scenario is the fictitious story of a user’s accomplishing an action or goal via a product. It focuses on a user’s motivations, and documents the process by which the user might use a design. User scenarios help designers understand what motivates users when they interact with a design – a useful consideration for ideation and usability testing.” -interaction-design.org User scenarios helped us visualizing how an user could use our product given a situation. It helped us generate ideas and provide adequate information that an user might require to complete a task in the application. It also helped us valid some of the design decision we took while creating the module.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

He fails to land on any solid results on the internet

Functionalities: JOBS

A well accomplished coach is looking for a new job

He goes on to the internet to search for some opportunities

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Logs into to RunAdam. Lands on the news feed page which has posts about various job opportunities avialable

Applies for a suitable job through the platform

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Gets a call from the concerned club about the job

SOLUTION (Several websites such as Linkedin.com, Nakuri.com were referred to get a better understanding of how the process works.)

People who follow the club’s page will get an update in their news feed

CHALLENGES (Some of the keys questions that raised while discussing this functionality.)

Only necessary information to be displayed, such as minimum experience required, job location, salary range and so on. When applied, a notification will be sent to the person & also the admin of the page

How the user can access a job request? How does the entire process of applying for jobs work? What input fields to should be included? So that the adequate information can be displayed How to simplify the module?

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Functionalities: LIVE SCORE

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Varun & Ravi are discussing about their school team playing in the district finals

Ravi logs into RunAdam application, which has a quick access to the live score on the news feed page. Landing up on the live score page, they get live updates of their team’s score

They want to have a quick update of the match scores, they do a Google search but nothing comes up

They get real time updates and witness their team win a tease tie

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

CHALLENGES

SOLUTION

(Some of the keys questions that raised while discussing this functionality.)

(Several websites such as ESPN.com, Cricinfo.com were referred to get a better understanding of how the process works.)

Placement of the module in the platform How will the live score work? What input fields should be included? So that the adequate information can be displayed The client suggested to have the live score on the club’s page, which sort of didn’t make sense. What is a better solution to this? What if a person follows 2 clubs, both of whom are playing against each-other, how does the live score appear then?

Live score to appear in the news feed page, which helps to post the scorecard as a neutral. Score updation will be taken care at the backend. Only scores of the teams & clubs whom are followed by the user will appear on their news feed page. Only limited information to be displayed

What if a team is losing, why could they be motivated to update the scorecard.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Functionalities: PLAYER PROFILE

Ram plays for ABC club and scores alot of runs in various tournaments. But is not able to keep a regular update of the stats

Views his stats on the player profile section of the page. Now Ram has a constant update on the runs he scores.

Follows ABC club’s page in RunAdam platform

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

CHALLENGES

SOLUTION

(Some of the keys questions that raised while discussing this functionality.)

(Several websites such as IPLT20.com, Chennaisuperkings.com were referred to get a better understanding of how the process works.)

Which player’s stats to be displayed on the page?

Restrict the players to be displayed to the ones currently playing for the club.

Which stats to display on the page?

For ease of use, a form with to the point details was created.

Players validate a club, how to place the module within the page to increase importance? Adding players and their stats is a tedious job, how to make the page admin do the task with ease?

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

To create user engagement, a constant reminder to add players to be placed within the profile.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Views the leaderboard on the club’s page

Functionalities: LEADERBOARD

To select the players for the upcoming tournament, the coach of ABC club wants to know the best performing players in his club

Logs on to RunAdam and opens ABC club’s page

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Sorts through the different player types using the filter

Helps him make a better team selection with the stats present on the leaderboard

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

CHALLENGES

SOLUTION

(Some of the keys questions that raised while discussing this functionality.)

(Several websites such as IPLT20.com, Chennaisuperkings.com were referred to get a better understanding of how the process works.)

How does the whole concept of leaderboard work?

Can be clubbed with Player Profile as both the functions are inter-dependent

Can it be combined with another module in the page, to reduce excess of information?

Leaderboard updation will be taken care in the back-end.

Who collects the data and who will update the leaderboard?

To sort information, a player type filter was proposed.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

101

100

TEAMS & CLUBS FIRST PERSON VIEW

FLOW OF THE MODULE Once we had a rough idea about the module and how it works, it put together the flow of the module. The flow of the module decides the flow in which the user will access each page. It is divided into First person view and Third person view so that it is easy for the client to get an idea of the module and the elements that go in it.

THIRD PERSON VIEW

01 News feed Page

18 Third Person View

02 Create Page

19 TPV - View Jobs

03 Add About & Contact Information 04 Social Media information 05 User Engagement Screens (Pop Ups- 1,2,3) 06 Empty Profile View 07 Add Player form

20 TPV - Job Applied 21 TPV - View Player Profile 22 TPV - View Team Performance 23 TPV - View Leaderboard 24 News feed with Live Score

08 Add Jobs form 09 Add Tournament form 10 Add Sponsor form 11 Add Coach form 12 Add Ticket link 13 First Person View 14 View Jobs 15 View Player Profile 16 View Team Performance 17 View Leaderboard MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

103

102

INFORMATION ARCHITECTURE FOLLOW

REPORT/BLOCK

POSTS

LISTINGS

MEMBERS

VENUES

CAMPS

OVERVIEW

TEAMS & CLUB PAGE

EVENTS

ABOUT

ANNOUNCEMENTS

JOBS

FOLLOWERS

PLAYERS

TOURNAMENTS

COACH

LEADERBOARD

TEAM PERFORMANCE

SUPPORT STAFF

AWARDS

Sponsors

TEAMS & CLUBS - ADD TICKETS LINK FPV

Gallery

Announcements Junior SuperKings Tournament 2018 Chess

Webinar

15 - 30 December 2018 M. Chinnaswamy Stadium

Add Ticket link CSK School League 15 - 30 December 2018

Tournament name*

M. Chinnaswamy Stadium

Asia Cup

Go to listings

Players

Add Link *

View Leaderboard

https://www.chennaisuperkings.com/CSK_WEB/module/news/html/teampage.html

Back

Save

MS Dhoni

Suresh Raina

Francios Du..

Suresh Raina

Captain Wicket Keeper/Batsm..

Batsman

Vice Captain Batsman

Batsman

View All

Tournament West Zone Cricket Tournament

View Team Performance

2018 - 2019

Sacred Heart Cricket Tournament

View Team Performance

2018 - 2019 View All

Coach Stephen Fleming Head Coach

Eric Simons Assistant Cocah

View All

Support Staﬀ Stephen Fleming Nutritionist

Eric Simons Nutritionist

View All

Awards Rajiv Gandhi Khel Ratna Karnataka State Cricket Association 2013

Rajiv Gandhi Khel Ratna Karnataka State Cricket Association 2013 I Won This Prestigious Awards For Coaching The Winning Team Of The International Basketball Tournament. View All

Sponsor India Cements Title Sponsors 12 Dec 18 - 3 Mar 19

India Cements Digital Partner 12 Dec 18 - 3 Mar 19 View All

Gallery

+6 more

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

123

122 TEAMS & CLUBS - JOBS VIEW FPV

Search by athletes, coaches, institutions

TEAMS & CLUBS - TEAM PERFORMANCE VIEW FPV

Jobs Team performance 60% oﬀ for Pro athletes

Nutritionist Advanced cricket coaching

Rs. 5000

Bengaluru

6 months | 14 December, 2018

Indian Premier League

Enroll

Full Time | Minimum Experience- 2-3 years 3.2 (51 Ratings) Rs. 17,500 - 30,000

2019 - 2020

View All

60% oﬀ for Pro athletes

Nutritionist Advanced cricket coaching

230

135

34567

186

Matches

Highest Team Score

Wickets Taken

Matches Won

230

135

Matches Lost

Matches Tied

Rs. 5000

Bengaluru

6 months | 14 December, 2018

Enroll

Full Time | Minimum Experience- 2-3 years 3.2 (51 Ratings)

Rs. 17,500 - 30,000

Karan Singh is primarily a cricketer, but have an inclination towards athletics as well, particularly in 100m. I have participated in National level tournaments. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Last date to apply: 6th July 2019

Back

Add Jobs

TEAMS & CLUBS - PLAYERS PROFILE VIEW FPV

TEAMS & CLUBS - LEADERBOARD VIEW FPV

Player Profile

Leaderboard

Chennai Super Kings Cricket | U - 18

Player Role Batsman

Name of certificate

MS Dhoni

Runs scored

Eric Simon

345

Eric Simon

345

Eric Simon

345

Eric Simon

345

Captain | Wicket Keeper/Batsman Born: July 7th, 1981 | Debut year: 2004

Matches

Innings

Runs Scored

230

34567

Highest Score

Strike Rate

Man of the Matches

128*

23.70

Man of the Tournamnet

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

125

124 TEAMS & CLUBS - TPV

Search by athletes, coaches, institutions

Page

Notifications

Settings

Wireframes 07 - Teams & Clubs (Jobs_TPV Screens)

IPL 2019 tickets available here. Book now!

Wireframes 06 Teams & Clubs Third Person View

Go to

Overview

Announcements 03 posts

Chennai Super Kings

TEAMS & CLUBS - JOBS VIEW TPV

Jobs

10 listings

Owned by Chennai Super Kings Cricket ltd.

2000 members

Players

2009 | Chennai | Cricket | U-18

08 followers Asia's largest sports academy located in Chennai, Tamilnadu; functions as the academic wing of Sports Authority of India (SAI); oﬀers in more

Search by athletes, coaches, institutions

Tournaments

Contact Info

refresher courses to coaches, and training on scientific lines, &

Support Staﬀ

academic courses to sportspersons Follow

Sponosors Apply for jobs here

View jobs

Connect & apply this team/club by viewing their jobs here.

Gallery

Jobs

Announcements 60% oﬀ for Pro athletes

Nutritionist Advanced cricket coaching

Junior SuperKings Tournament 2018 Chess

Apply Rs. 5000

Bengaluru

Webinar

6 months | 14 December, 2018

Enroll

Full Time | Minimum Experience- 2-3 years 3.2 (51 Ratings) Rs. 17,500 - 30,000

15 - 30 December 2018 M. Chinnaswamy Stadium

View All

CSK School League 15 - 30 December 2018 M. Chinnaswamy Stadium

60% oﬀ for Pro athletes

Go to listings

Nutritionist Advanced cricket coaching

Apply Rs. 5000

Bengaluru Players

View Leaderboard

6 months | 14 December, 2018 3.2 (51 Ratings)

Rs. 17,500 - 30,000

MS Dhoni

Suresh Raina

Francios Du..

Suresh Raina

Captain Wicket Keeper/Batsm..

Batsman

Vice Captain Batsman

Batsman

Enroll

Full Time | Minimum Experience- 2-3 years

View All

Tournament West Zone Cricket Tournament

View Team Performance

2018 - 2019

Sacred Heart Cricket Tournament

View Team Performance

2018 - 2019 View All

Coach Stephen Fleming Head Coach

Eric Simons Assistant Cocah

ATEAMS & CLUBS - JOBS VIEW TPV

View All

Support Staﬀ

Search by athletes, coaches, institutions

Stephen Fleming Nutritionist

Eric Simons Nutritionist View All

Jobs

Awards 60% oﬀ for Pro athletes

Rajiv Gandhi Khel Ratna

Nutritionist Advanced cricket coaching

Karnataka State Cricket Association 2013

Rs. 5000 Apply

Bengaluru

6 months | 14 December, 2018

Rajiv Gandhi Khel Ratna

Enroll

Rs. 17,500 - 30,000

Karnataka State Cricket Association

3.2 (51 Ratings)

2013

View All

I Won This Prestigious Awards For Coaching The Winning Team Of The International Basketball Tournament. View All

THANK YOU! You have successfully applied for the job. 6 months | 14 December, 2018

60% oﬀ for Pro athletes

Nutritionist Advanced cricket coaching

Sponsor India Cements

Rs. 5000 Apply

Bengaluru

Title Sponsors

Rs. 17,500 - 30,000

12 Dec 18 - 3 Mar 19

Enroll

3.2contact (51 have Ratings) Runadam will you, in case, of any modifications. Karan Singh is primarilyteam a cricketer, but an inclination towards athletics as well, particularly in 100m. I have participated in National level tournaments. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

India Cements Title Sponsors 12 Dec 18 - 3 Mar 19 View All

Last date to apply: 6th July 2019 Gallery

+6 more

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

126

127

Wireframes 08 - Teams & Clubs (TPV Screens) TEAMS & CLUBS - PLAYERS PROFILE VIEW TPV

Player Profile

TEAMS & CLUBS - NOTIFICATIONS

Search by athletes, coaches, institutions

Page

Notifications

Settings

MS Dhoni Captain | Wicket Keeper/Batsman All notifications

All page Notifications

Mark all as read

Born: July 7th, 1981 | Debut year: 2004

Likes

Aaakash Sharma has applied for job as Nutritionist Shares

Matches

Innings

Runs Scored

230

34567

Highest Score

Strike Rate

Man of the Matches

128*

23.70

26 minutes ago

Comments

Supriya Tondon, Rajeev Sharma and 200 others liked on your post 3 days ago

Sacred Heart Institute Posted 3 days ago

My team won the national Cricket championship. Extremely proud of the boys! Keep it up! :)

Man of the Tournamnet

34 Aditya Solanki was added as Moderator 15 days ago

Supriya Tondon commented on your post “ This is awesome guys. “ 3 days ago

Sacred Heart Institute Posted 3 days ago

TEAMS & CLUBS - TEAM PERFORMANCE VIEW TPV

My team won the national Cricket championship. Extremely proud of the boys! Keep it up! :)

Mithali Chandrasekhar is following the page

Team performance

30 days ago

Indian Premier League 2019 - 2020

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

230

135

34567

186

Matches

Highest Team Score

Wickets Taken

Matches Won

230

135

Matches Lost

Matches Tied

129

128

Wireframes 09 - Teams & Clubs (Live Score) TEAMS & CLUBS - LEADERBOARD VIEW TPV

NEWSFEED

Leaderboard 3

Search by athletes, coaches, institutions

Chennai Super Kings Cricket | U - 18 My Home

65% Profile Completed

Share an update or a photo with your network

Live Scores

Role

Name of certificate Eric Simon

Attach Photo

Karan Singh

Batsman

Views

Connections

Invitations

Runs scored

Attach Video

Post

My Posts

Sort By: Relevance

...

Karan Singh

V/S

Posted just now

345

Connections Our team won the national Cricket championship. Extremely proud of the boys! Keep it up! :)

Calendar Eric Simon

English Premier League 2019

345 My Home

Eric Simon

Indian Premier League 20..

Chelsea

345

Man Utd

70 mins

Events Eric Simon

345

Indian Premier League 2019

Venue

Create Page My Home

V/S

Sacred Heart Admin

Greenwood Hi

22 Likes . 1 Comment

Moderator

India

Sri Lanka

321/5 (50)

72/1 (7.1)

Sri Lanka need 50 runs from 60 balls to win Like

Comment

NEWSFEED

Search by athletes, coaches, institutions

Share an update or a photo with your network

My Home

Live Score

65% Profile Completed

Attach Photo

Karan Singh

Views

Connections

Invitations

Attach Video

Post

Indian Premier League 2019

V/S

My Posts

Sort By: Relevance

...

My Home Karan Singh Posted just now

India

Sri Lanka

321/5 (50)

72/1 (7.1)

Sri Lanka need 50 runs from 60 balls to win

Connections Calendar

Our team won the national Cricket championship. Extremely proud of the boys! Keep it up! :)

English Premier League 2019

Events V/S

Venue Chelsea

Create Page My Home

Man Utd 70 mins

Sacred Heart Admin

Greenwood Hi

22 Likes . 1 Comment

Get your athletes on Runadam

Moderator

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

131

130

ITERATIONS Functionalities: PLAYER PROFILE Player Profile

Player Profile

MS Dhoni Wicket Keeper/Batsman Born: July 7th, 1981 Debut year: 2004

230 Matches

128

230 Innings

MS Dhoni

Wicket Keeper/Batsman

Born: July 7th, 1981 | Debut year: 2004

34567 Runs Scored Matches

230

Innings

230

Man of the Matches

Innings

Runs Scored

230

34567

Highest Score

Strike Rate

Man of the Matches

128*

23.70

23.70 Runs Scored

Highest Score

Matches

34567

Strike Rate Highest Score

Strike Rate

34 Man of the Tournament

128* 23.70

Man of the Matches

Man of the Tournament

This is an another variation of the design. The player’s image is give importance here and also the each stat is given a individual space for the user to go through them with ease.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

This design is inspired from the playing cards in the 90’s.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

133

132

Functionalities: PLAYER PROFILE Player Profile

Player Profile

MS Dhoni Wicket Keeper/Batsman Born: July 7th, 1981 Debut year: 2004

230

135

34567

186

Matches

Innings

Runs Scored

Highest Score

MS Dhoni (C) 230

135

34567

Strike Rate

Man of the Matches

Man of the Tournament

Another design variation with wider pop up.

Captain | Wicket Keeper/Batsman Born: July 7th, 1981 | Debut year: 2004

Matches

Innings

Runs Scored

230

34567

Highest Score

Strike Rate

Man of the Matches

128*

23.70

Man of the Tournament

This is was the approved design by the client. The player image is the dominant feature in this design.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

135

134 Team performance

Indian Premier League 2019 - 2020

Functionalities: TEAM PERFORMANCE

230

135

34567

186

Matches

Highest Team Score

Wickets Taken

Matches Won

230

135

Matches Lost

Matches Tied

Team performance

Indian Premier League

Another design variation with wider pop up.

2019 - 2020

Team performance

Matche s

230

Highest Team Score

230

Wickets Taken

Indian Premier League 2019 - 2020

34567

Matches Won

128*

Matches Lost

23.70

Matches Tied

230

34567

Matches

Highest Team Score

Wickets Taken

128

23.70

Matches Won

Matches Lost

Matches Tied

This design is inspired from the playing cards in the 90’s. This is was the approved design by the client. The player image is the dominant feature in this design. MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

137

136

Functionalities: LIVE SCORE

Live Score

Indian Premier League 2019 Live Score

India

Indian Premier League 2019

V/S

321/5 (50)

(Sri Lanka need 50 runs from 60 balls to win) Sri Lanka

V/S

India

Sri Lanka

321/5 (50)

72/1 (7.1)

English Premier League 2019

Sri Lanka need 50 runs from 60 balls to win Chelsea

English Premier League 2019 V/S

V/S

Chelsea

70 mins

Man Utd

Man Utd 70 mins

A simple representation of the live score with only the important information presented. MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

139

138

HIGH FIDELITY WIREFRAMESMOBILE Wireframes 01 - Teams & Clubs (Create a page)

Hamburger

My News feed MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Create page

141

140

Wireframes 02 - Teams & Clubs (Onboarding)

Add players Contact Details About Teams & Clubs

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Create Jobs

143

142

Wireframes 03 - Teams & Clubs EPV

Create Jobs

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Teams & Clubs EPV

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

145

144

Wireframes 04 - Teams & Clubs (Adding Pages)

Add Tournament Link

Add Jobs

Add Tournament

Add Team Player

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

147

146

Add Coach

Add Support Staff

Add Sponsor

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

149

148

Wireframes 05 Teams & Clubs FPV

Teams & Clubs EPV_Part 01 MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Teams & Clubs EPV_Part 02 MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

151

150

Wireframes 06 - Teams & Clubs FPV (Screens)

Jobs FPV

Notifications Page

Teams & Clubs EPV

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

153

152

Wireframes 07 - Teams & Clubs FPV (Screens)

Leaderboard FPV Ticket Link Filter

Player Profile FPV

Teams & Clubs EPV

Team Performances FPV

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

155

154

Wireframes 08 Teams & Clubs TPV

Teams & Clubs TPV_Part 01 MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Teams & Clubs TPV_Part 02 MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

157

156

Wireframes 09 - Teams & Clubs (TPV Screens)

Leaderboard TPV

Jobs TPV Job Application confirmation

Player Profile TPV

Team Performance TPV MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

159

158

Wireframes 09 - Teams & Clubs (Live score)

News feed page

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Live Score Page

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

161

05|

VISUALIZATION

160

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

163

162

USER INTERFACE DESIGN (UI) UI or User Interface design is the process of designing visual interfaces for machines and softwares such as computers, mobile devices and other electronic devices. UI designer’s aim is to create designs that the users find easy and simple to use, in terms of accomplishing user goals. User interface design is a craft that involves building an essential part of the user experience. Understanding the contexts of the users helps the designers make better design decisions. Graphic design and typography are utilized to support its usability, influencing how the user performs certain interactions within the applications and also improving the aesthetic appeal of the design. UI designers create an illusion that users aren’t interacting with a device so much as they’re trying to attain goals directly and as effortlessly as possible.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

165

164

Icons created for Webapp

ICONS There are various types of icons in the platform some filled with gradient colors, some line icons, some solid filled icons. Each type of icon serves specific purpose. All the icons fall into a 16px by 16px grid and they are exported in SVG format, so that they could be scaled for various purposes without losing it vector quality.

Players

Sponosrs

I was tasked with creating icons for the Teams & Clubs Module and also the Create page in the mobile application. I had studied the previously created icons and taken the same visual language forward for the new icons. I tried to keep them simple , so that they are easily understood by the various users.

Coach

Support Staff

Various types of Icons on the platform

Icons created for Mobile

Solid icons used on the Web

Educational Institute

Academy

Association

Corporate

Teams & Clubs

General Fitness

Outline icons used on the Mobile

Present Icon Grid

16 px H

16 px W MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

167

166

Icons in the Mobile application

9:41 AM

Icons in the Webapp application

100%

Create a page Educational Institution Showcase achievements, reach out to sponsors, add athletes/coaches and connect with other sports enthusiasts

Academy Showcase achievements, reach out to sponsors, add athletes/coaches and connect with other sports enthusiasts

Corporate Channelize CSR funds in an eﬃcient manner, organize corporate sports events and navigate the world of sports

Team/Club Connect with fans, promote events, sell event tickets, share updates, ﬁnd coaches and other sports stakeholders all under on platform on Run Adam

Association Share updates, add athletes/coaches, display accomplishments and connect with other sports enthusiasts

General Fitness Trains athletes at a professional level in organized sports and having certiﬁcation to show for it.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

169

168

UI DESIGNWEBAPP

Visual Design 01 - Teams & Clubs (Create a page)

While creating the UI design for the Teams & Clubs module, I had to comply with the existing visual language and framework of design present in the platform. Working on the UI for several modules before come in handy as I was well versed with the nuances of the design. If there came a chance to create something new on the platform, I had to refer the designs in previous modules and use those references to create new designs, so that the users is not introduced to something new altogether whereas he is already used to seeing things in a certain way in the platform.

Newsfeed page

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

171

170

Create a page

About Team/Club

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

173

172

Visual Design 02 - Teams & Clubs (Onboarding)

Add Players Pop-Up

Add Contact Information Page Add Jobs Pop-Up

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

175

174

Visual Design 03 - Teams & Clubs (Empty Profile View)

Add Photos Pop Up

Empty Profile View

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

177

176

Visual Design 04 - Teams & Clubs (Add Screens)

Add Jobs Page Add Players Page

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

179

178

Add Tournment

Add Players Page_Football

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

181

180

Add Coach Page

Add Sponsor Page

Add Support Staff Page

Add Ticket link Page

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

182

183

Visual Design 05 - Teams & Clubs First Person View

First Person View (FPV) Part 01

First Person View (FPV) Part 02 MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

185

184

Visual Design 06 - Teams & Clubs (FPV Screens)

View Jobs Page (FPV) Job Notification Page

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

187

186

Player Profile View

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Player Profile View_Football

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

189

188

Team Performance Page Leaderboard View page

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

190

191

Visual Design 07 - Teams & Clubs Third Person View

Third Person View (TPV) Part 02 Third Person View (TPV) Part 01

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

193

192

Visual Design 08 - Teams & Clubs (Screens TPV)

Job View TPV

Player Profile TPV

Job apply TPV MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Team Performance TPV MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

195

194

Visual Design 09 - Teams & Clubs (Live Score)

Newsfeed Page with Live Score

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Newsfeed Page with Live Score

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

197

196

9:41 AM 9:41 AM

100%

About Team/Club

Create a page Educational Institution Showcase achievements, reach out to sponsors, add athletes/coaches and connect with other sports enthusiasts

Add Image

Academy Showcase achievements, reach out to sponsors, add athletes/coaches and connect with other sports enthusiasts

UI DESIGNMOBILE

Team/Club Name

Chennai Super Kings Owned by

Corporate

Chennai Super Kings Cricket Ltd.

Channelize CSR funds in an eﬃcient manner, organize corporate sports events and navigate the world of sports

Established year *

1996 Team/Club

City based on *

Connect with fans, promote events, sell event tickets, share updates, ﬁnd coaches and other sports stakeholders all under on platform on Run Adam

Chennai Sport type *

Cricket Association

Play Level *

Share updates, add athletes/coaches, display accomplishments and connect with other sports enthusiasts

U - 18 Description

Asia’s largest sports institute located in Chennai, Tamilnadu; functions as the academic wing of Sports Authority of India (SAI); offers in more refresher courses to coaches, and training on scientiﬁc lines, & academic courses to sportspersons

General Fitness

Visual Design 01 - Teams & Clubs (Create a page)

Trains athletes at a professional level in organized sports and having certiﬁcation to show for it.

Create page 9:41 AM

100%

9:41 AM

About Teams/Clubs

100%

Share an Krishnan update or P a photo with your network… Basketball Coach at Seventh Wonder Ac..

Share an update or a photo with your network…

9:41 AM

Run Adam

14 May at 10:00 am

14 May at 10:00 am Connections

Unfaltering focus until the ﬁnish line because just about anything can change in a matter of few seconds when you are on the ﬁeld. Photo - A shot of an athlete on track at the Federation Cup 2018

Unfaltering focus until the ﬁnish line because just about anything can change in a matter of few seconds Invitations when you are on the ﬁeld. Photo - A shot of an athlete on track at the Federation Cup 2018

100%

Add contact information

Head of Club *

Mr. Ravi Kumar

Manage Post Address

Chennai Sports Institution, MG Road...

My bookings

Phone

Create Page

9884104191 Email ID

Settings & Privacy 7 Likes

1 Comment

8 Shares Comment

Liked

7 Likes Share

Run Adam

1 Comment

Liked

Sign Out

contact@stjoseph.com

8 Shares Comment

Run Adam

Website

http://www.stjosephs.college.in/ Social Media Handles Facebook

http://www.facebook.com/MSDian/ Twitter

http://twitter.com/msdhoni?lang=en Linkedln

http://www.linkedin.com/in/mahendInstagram

My News feed

Hamburger

http://www.instagram.con/in/mahe-

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

About Contact Information

198

199

Visual Design 02 - Teams & Clubs (Onboarding)

9:41 AM

100%

Visual Design 03 - Teams & Clubs Empty Profile View 9:41 AM

100%

9:41 AM

Congratulations!

You’re page has been successfully made.

You’re page has been successfully made. Add link to sell your team/club match tickets here.

Page

Notiﬁcations

Settings

Add Players

Create Jobs

Runadam provides opportunity for you to add team players and their details to promote your page and helps in building your network.

Runadam provides opportunity for you to create events to promote your page and helps in building your network.

Add Players

Create

Write a personal statement that deﬁnes your sporting spirit

Skip

+ Add description

Chennai Super Kings Owned by Chennai Super Kings Cricket ltd. 2009 | Chennai | Cricket | U-18

100

Post

Listings

Members

Followers

Build your network & ﬁnd the right job proﬁles for your page here.

Add Players

Add Jobs

Contact info

Add team players to promote your page. Adding team players will bring more visitors to your page.

9:41 AM

100%

Add Players

Add tournaments

Congratulations!

Contributing talent helps you build your network & promote your page on Runadam.

You’re page has been successfully made.

Add Tournamnets

Coach Support Staff Awards Sponsors

Gallery Upload photos of your corporate achievements and important events to accentuate your page on Runadam.

Gallery

Add Photos Skip

First Person View

Add Photos

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

201

200

Visual Design 04 - Teams & Clubs (Adding Pages)

9:41 AM

100%

9:41 AM

Add tournament link

Tournament name *

Nutritionist

Add link *

https://www.chennaisuperkings.co..

Add Tournament

Player Name *

Name of Tournamnet *

Karan Singh

Karan Singh Upload tournament logo *

Invite to Runadam

Job Location *

Chennai

Make sure the File Size is less than 3 MB.

Upload athlete image *

Upload

Make sure the File Size is less than 3 MB.

Select Job Type

Full time

Part time

Jobs

Upload

Location *

Chennai

Minimum Experience *

Team Role *

2 years

Save

9:41 AM

100%

Add Team Player

Add Job

Job Title *

IPL 2019

9:41 AM

100%

Captain

Salary Range *

Player Role *

Rs. 10,000 - Rs. 15,000

Batsman

Description

Date of Birth

Karan Singh is primarily a cricketer, but have an inclination towards athletics as well, particularly in 100m. I have participated in National level tournaments.

20 - 4 -1992

Last date to apply

No. of Matches

2 - 5 - 2019

123

I agree to publish this as a post

Vice-Captain

Date

20 - 4 -1992 Matches Played

2016 Highest Team Score

123

Debut year

2016

Wickets Taken

34 Matches Won

456

No. of Innings

Save

None

Matches Lost

134

Runs Scored

456

Matches Tied

456

Highest Score

134

Add Ticket Link

Add Jobs

Save

Strike Rate

456 Man of the Matches

134 Man of the Tournament

Add Tournament

Save

Add Team Players

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

100%

203

202

9:41 AM

100%

9:41 AM

100%

Add Sponsor

Add Support Staff

Book IPL 2019 tickets here now!

Support Staff name *

Sponsor name *

Karanjith Anand Singh

India Cements

Page

Notiﬁcations

Settings

Wireframes 05 -

Invite to Runadam

Invite to Runadam Upload support staff logo *

Upload sponsor logo *

Make sure the File Size is less than 3 MB.

Teams & Clubs First

Upload

Upload Support Staff Role *

Type of Sponsor *

Nutritionist

Title Sponsor

Person View Chennai Super Kings

Duration

Owned by Chennai Super Kings Cricket ltd. 2009 | Chennai | Cricket | U-18

From

20 - 4 -1992 Asia’s largest sports institute located in Chennai, Tamilnadu; functions as the…Read more

20 - 4 -1992

Save

100

Post

Listings

Members

Followers

Build your network & ﬁnd the right job proﬁles for your page here.

View Jobs

Contact info Announcements T20 Bangalore Annual Cricket Tournament 2018

Add Support Staff

15 - 20 December 2018

Add Sponsor

#24, Street No. 87, Main Perungudi Road, Perungudi, Chennai Cricket

Handball

T20 Bangalore Annual Cricket Tournament 2018 15 - 20 December 2018 9:41 AM

100%

#24, Street No. 87, Main Perungudi Road, Perungudi, Chennai

Add Coach

Coach name *

Cricket

Handball

Go to Listings

Stephen Fleming

Players

Invite to Runadam

MS Dhoni

Upload coach logo *

Captain

Make sure the File Size is less than 3 MB.

Wicket Keeper/Batsman

Upload

Suresh Raina Batsman

Support Staff Role *

Francios Du Plessis

Head Coach

Batsman

View Leaderboard View All

Tournaments West Zone Cricket Tournament 2018 - 2019

Save

Cricket One Day 2018 - 2019

View All

Coach

First Person View (FPV) Part 01 Stephen Fleming Head Coach

Add Coach

Eric Simons Assistant Coach

View All

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Batsman

View Leaderboard

204

205

View All

Visual Design 06 - Teams & Clubs FPV (Screens)

Tournaments West Zone Cricket Tournament 2018 - 2019

Cricket One Day 2018 - 2019 100%

9:41 AM

View All

Player proﬁle

Coach Stephen Fleming Head Coach

Eric Simons Assistant Coach

View All

MS Dhoni

Support Staff

Captain | Wicket Keeper/Batsman

Born : July 7th, 1981 | Debut year : 2004

Stephen Fleming Nutritionist

Eric Simons

Matches

230

Innings

230

Nutritionist

View All

34567

Runs Scored

Awards

128

Highest Score

Padma Bhushan Award

23.70

Strike Rate

2018 President of India

Padma Shree Award 2015 Government of India

Man of the Matches

Rajiv Gandhi Khel Ratna Award 2007 Government of India

View All

Ticket Link Filter

Sponsor

Player Profile FPV

India Cements Title Sponsors 12 Dec 18 - 3 Mar 19

India Cements

9:41 AM

Digital Sponsors

100%

9:41 AM

12 Dec 18 - 3 Mar 19

100%

Team Performance

Leaderboard

View All

Indian Premier League 14 July - 14 December 2018

Chennai Super Kings

Gallery

Cricket | Under 18

+10 Images

Matches

230

Highest Team Score

230

Player Role

Batsman

Name of Athlete

Runs Scored

Wickets Taken

MS Dhoni Captain

Suresh Raina

345

Francios Du Plessis

345

Vice-Captain

First Person View (FPV) Part 02

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Suresh Raina

230

Francios Du Plessis

230

Suresh Raina

230

Leaderboard FPV

34567

427 Matches Won

128

Matches Lost

23.70

Matches Tied

Team Performance FPV

207

206

100%

9:41 AM

Book IPL 2019 tickets here now!

Visual Design 07 - Teams & Clubs FPV (Screens)

Visual Design 08 Teams & Clubs Third Chennai Super Kings Owned by Chennai Super Kings Cricket ltd. 2009 | Chennai | Cricket | U-18

Person View

9:41 AM

100%

9:41 AM

Jobs

Nutritionist

Page

Chennai, India Full Time | Minimum experience - 2 years I am a person with multiple set of goals. I am a self taught painter and writer by my passion. Design, Human minds, View more..

Notiﬁcations

Asia’s largest sports institute located in Chennai, Tamilnadu; functions as the…Read more

100%

Setting s

100

Post

Listings

Members

Followers

Build your network & ﬁnd the right job proﬁles for your page here.

Rohit Raj has applied for job as a Nutritionist 27 minutes ago

Contact info Announcements T20 Bangalore Annual Cricket Tournament 2018

Supriya Tandon, Rajiv Sharma and 200 others liked your poste : “We won the Soccer Champion..”

Nutritionist Chennai, India Full Time | Minimum experience - 2 years I am a person with multiple set of goals. I am a self taught painter and writer by my passion. Design, Human minds, with 2 years of experience minimum. 14 July - 14 December 2018 View Less

View Jobs

Filters

15 - 20 December 2018 #24, Street No. 87, Main Perungudi Road, Perungudi, Chennai

27 minutes ago

Aditya Solanki was added as Moderator

Cricket

27 minutes ago

T20 Bangalore Annual Cricket Tournament 2018

Supriya Tandon commented on your post : “ This is awesome guys"

15 - 20 December 2018 #24, Street No. 87, Main Perungudi Road, Perungudi, Chennai

27 minutes ago

Cricket

Mithali Chandrasekhar is following the page 27 minutes ago

Handball

Go to Listings

Players MS Dhoni

Add Jobs

Captain Wicket Keeper/Batsman

Suresh Raina Batsman

Francios Du Plessis

Job Notifications

Batsman

View Job FPV

View Leaderboard View All

Tournaments West Zone Cricket Tournament 2018 - 2019

Cricket One Day 2018 - 2019

View All

Coach

Third Person View (TPV) Part 01 Stephen Fleming Head Coach

Eric Simons

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Assistant Coach

View All

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

View All

208

209

Tournaments

Visual Design 09 - Teams & Clubs TPV (Screens)

West Zone Cricket Tournament 2018 - 2019

Cricket One Day 2018 - 2019

View All

Coach

9:41 AM

100%

9:41 AM

Player proﬁle

Stephen Fleming

100%

Team Performance

Head Coach

Eric Simons Assistant Coach

Chennai Super Kings 14 July - 14 December 2018

View All

Support Staff Matches

230

Highest Team Score

230

Stephen Fleming Nutritionist

MS Dhoni

Eric Simons

Captain | Wicket Keeper/Batsman

Nutritionist

Born : July 7th, 1981 | Debut year : 2004

Wickets Taken

View All

Awards Padma Bhushan Award

Matches

230

Innings

230

Runs Scored

2018

34567

President of India

Highest Score

Padma Shree Award 2015

Strike Rate

Government of India

Rajiv Gandhi Khel Ratna Award 2007

34567

Matches Won

128

Matches Lost

23.70

Matches Tied

128 23.70

Man of the Matches

Government of India

View All

Sponsor India Cements Title Sponsors 12 Dec 18 - 3 Mar 19

Player Profile TPV

India Cements

Team Performance TPV

Digital Sponsors 12 Dec 18 - 3 Mar 19

View All

Gallery

100%

9:41 AM

Leaderboard

+10 Images

Chennai Super Kings Cricket | Under 18

Player Role

Batsman

Name of Athlete

Runs Scored

MS Dhoni

Third Person View (TPV) Part 02

Captain

Suresh Raina

345

Francios Du Plessis

345

Vice-Captain

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

427

Suresh Raina

230

Francios Du Plessis

230

Suresh Raina

230

Leaderboard TPV

211

210

Visual Design 10 - Teams & Clubs (TPV Screens)

9:41 AM

Visual Design 11- Teams & Clubs (Live scores)

100%

9:41 AM

100%

9:41 AM

100%

Live Score

Nutritionist

Nutritionist Full Time | Minimum experience - 2 years

Full Time | Minimum experience - 2 years

I am a person with multiple set of goals. I am a self taught painter and writer by my passion. Design, Human minds, View more..

Indian Premier League 2019

Share an update or a photo with your network…

Chennai, India

100%

9:41 AM

Jobs

View Live score v/s Run Adam

Apply

14 May at 10:00 am

Unfaltering focus until the ﬁnish line because just about anything can change in a matter of few seconds when you are on the ﬁeld. Photo - A shot of an athlete on track at the Federation Cup 2018

Nutritionist

Chennai Super Kings

Kolkata Knight Riders

321/5 (50)

72/1 (7.1)

KKR need 50 runs from 60 balls to win

Chennai, India

Chennai, India Full Time | Minimum experience - 2 years I am a person with multiple set of goals. I am a self taught painter and writer by my passion. Design, Human minds, with 2 years of experience minimum. 14 July - 14 December 2018

Congratulations

Full Time | Minimum experience - 2 years You have successfully applied I am a person with multiple for this set job.of goals. I am a self taught painter and writer by my passion. Design, Human minds, with 2 years of experience minimum.

Apply

v/s

14 July - 14 December 2018 View Less

View Less

English Premier League 2019

7 Likes

Apply

1 Comment

Liked

8 Shares Comment

Man Utd

Chelsea Share

70 mins

Run Adam

English Premier League 2019

Job TPV

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

Jobs TPV

Live Score

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

213

212

FRONT END DEVELOPMENT (FED) Once the UI designs are completed and approved by the client, the files move to the Front End Development(FED) team. Lollypop has a in-house FED team who handle most of the application development. The UI designers along with the UX designers sit together with the FED designers to help them get a overview the flow of the application. The FED team comprises of Coders & Testers. Once they get the designs from the UI team, the testers begin to check the flow of the modules, the placement of elements on each page. Then files are transferred to coders, who begin to create style guides and common components which could later be used while coding. Once all the pages are coded, testers are bought on to do the checking of the pages and report the bugs if any. The FED team uses HTML 5, CSS 3, Java Script and Jquery for their processes. The backend development is handled by a partner company called Codebele. They take care of Search Engine Optimization (SEO), Content Management System (CMS), hosting and Wordpress.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

215

06|

GRAPHIC EXERCISE

214

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

217

216

READABILITY AND LEGIBILITY I have considered the following aspects of typography while refining the screens. The majority of content on the web consists of words. If they are to be read and the reading experience to be good, the small details count. That’ what typography is all about, the little details adding up to something greater than the sum of the parts. Since the visual language of the platform was already set, the first phase of the website was already up live. I was left with little room to no room to innovate or come with redefined design. But being a graphic designer, I was obliged to do this graphic exercise. I have taken four random screens on the platform and considered the details of typography, to refine the screens to make them more readable and legible.

Kerning Kerning is the adjustment of space between two characters to increase the readablitiy. Leading Leading is the vertical spacing between two lines of text. Adjusting the leading will help the give breathing space between lines of text and make reading a ease for the user read Weights By using different weights of the same font, we are able to retain the visual consistency and create hierarchy among on the text why bringing out the most important information up front for the user. Contrast Contrast in typography can be created by varying in color values of the text. They also help create hierarchy of information.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

219

218

Add announcement

You’re 10% Complete

Add announcement

Completing your profile will increase your chances of becoming a verified

Name of tournament*

Overview

West Zone C Tournament

Tournaments

Upload image of the Tournament* Attach Document

Awards

Asiacup_Copy.jpg

03 Posts 03 Posts

Sports365 Cricket

Add Description

Education

20 Listing 20 Listing

Sport Type* 1986 | Bengaluru | Sports sector 500-600 EMPLOYEES | 2Cricket BRANCHES

Gallery

2000 members 2000 members

08 Following 08 Following

Write a personal statement that deﬁnes your sporting spirit

Event Duration Event Duration

CONTACT INFO Ending at CONTACT INFO

Starting from

20 Apr 2013

08 Apr 2018

Location*

Sponsor athletes to promote your page. M. Chinnaswamy Stadium Contributing talent helps you build your network & promote your page on Runadam.

GIVE SUPPORT

Description

St. Joseph’s Cricket Team is primarily a cricketer, but have an inclination Add your exisiting sponsorships to promote your page. towards athletics a particularly in 100m. I have participated in National ADD SPONSEE Adding your exisiting sponsee’s list will bring more visitors to your page.

level tournaments.

Speciality Athletics 100m High Jump

Delete Cricket

Javelin Throw

Football

Handball

Long Jump

Athletics 100m

Cricket

Athletics 200m

Trekking

SAVE

Chess

Marathaon

View All

Old Screen

Refined screen

1. The width of the whole pop up is reduced to make it more concise and reduce wastage of space on the screen. 2. The importance of the page heading is reduced, because the user already knows which page is they are on the platform, thus giving it more of importance doesn’t make sense. 3. The input given by user is of more importance, hence the text is made older and maker in size. The heading of the input field is also made bigger in size to maintain consistence. 4. The spacing between two inputs are adjusted to make the form concise and easy for the user to fill.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

221

220

Perungudi

Page

Notifications

Search by athletes, coaches, institutions

Settings

Sponsee details

You’re 70% Complete Completing your profile will increase your chances of becoming a verified

Overview

Announcements

Contributions 03 Posts

Sports365

Sponsees

500-600 EMPLOYEES | 2 BRANCHES

2000 members

Karan Singh

functions as the academic wing of Sports Authority of India Cricket | International | Under 18 (SAI); offers in more...

CONTACT INFO

30,000

12 Dec 18 - 3 Mar 19

Teams

08 Following

Asia's largest sports academy located in Chennai, AthleteTamilnadu;

Announcements

05 Athletes

20 Listing

1986 | Bengaluru | Sports sector

Karan Singh is primarily a cricketer, but have an inclination towards athletics as well, particularly in 100m. I have participated in National level tournaments. Lorem

Tournaments

Gallery

Specialities

ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Sacred Heart’s Football Tournament 2018 Chess

Delete

SAVE

Webinar

Wednesday, 15 December at 4 PM St Josephs High school

Old Screen

Refined screen

1. The width of the whole pop up reduced to make it more concise and reduced wastage of space on the screen. 2. The importance of the page heading is reduced, because the user already knows which page is they are on the platform, thus giving it more of importance doesn’t make sense. 3. The name of the sports person is the most important information the page, hence that is made more predominant. 4. By varying the weights and also adjusting the space, the information more legibility. 5. Leading of the paragraph is adjusted to make the text more readable.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

223

222

FEATURED EVENTS Royal Challenge Tournament St Josephs High school 04:00 p.m | 246 people going Enroll Now

Royal Challenge Tournament

St Josephs High school 04:00 p.m | 246 people going

CBF FITNNESS Gym

Enroll Now

Edit

Yoga

Delete

Royal Challenge Tournament

4 (51 Ratings)

St Josephs High school 04:00 p.m | 246 people going

Contact Info

Operating Hours

Mon - Sat : 6 am - 11 am

Enroll Now

Sun : 7 AM - 1 AM

Locker Rooms

View All

Parking

Physiotherapist

On site coaching

Spa

ALL EVENTS Football

HSR Layout, Bengaluru

Show Map Royal Challenge Tournament

St Josephs High school

60% off for Pro Athletes! Enroll yourself for the package to help us contact you more efciently.

04:00 p.m | 246 people going Enroll Now

Gym Plans

Royal Challenge Tournament St Josephs High school

Classic Membership

04:00 p.m | 246 people going

All operating days

Enroll Now

1 workout session - Rs. 350 | 3 months - Rs. 12,000 | 6 months - Rs. 17,500

Royal Challenge Tournament St Josephs High school 04:00 p.m | 246 people going

Prime Membership

Enroll Now

Mon, Wed, Fri

View All

6 months - Rs. 12,500 | 12 months - Rs. 17,500

View All

Old Screen

Refined screen

1. The name of the academy is the important information on the page, hence that is highlighted. 2. Having white text on lighter background make it less legibility, thus the weight of the font is changed and also more breathing space is given around the text. 3. Readablitiy is increased varying the weights and the color of the text. 4. Spacing between the elements are adjusted to make consistence with the other elements on the page.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

225

224

JOBS 1

Nutritionist

APPLY

Bengaluru Full Time | Minimum Experience - 2 years

17,500 - 30,000 View more

Nutritionist

APPLY

Bengaluru Full Time | Minimum Experience - 2 years

17,500 - 30,000

View less

Old Screen

Refined screen

1. By varying the weights, adjusting the spacing and also using different color codes makes the information more legibility. 2. Leading of the paragraph is adjusted to increase the readability. 3. By giving importance to these small changes helps the reduce the weight of the page.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

227

226

EMAILERS During the course of my internship, the client had the requirement to revamp their existing emailers. The brief from the client was fairly a simple one, they wanted a new design which would go along with the website design and since there are alot of different emailers sent to various stakeholders, they wanted a easy identification system in place to give a consistence look throughout all of the emailers. I had started by studying the existing emailers and drawing out a reference board to help me come up new design ideas. There were several design options suggested to the client of which one was approved and carried forward to all the other set of emailers.

Required List of Emailers 01.1 - Booking confirmation for the User (Events, venues can be booked through the platform) 01.2 - Booking confirmation for the Admin (Admin is the person responsible for creating the event, venue on the platform) 02.1 - Package booking confirmation for the User. (Details packages vary from one and another) 02.2 - Package booking confirmation for the Admin. 03 - Awards successfully verified (When an athlete or coach or a team adds awards to their profile, RunAdam runs a background check before making it visible on the platform) 04 - Sponsorship approved for a Product (An pro athlete can ask for sponsorship on the platform, sponsorship could be classified into six categories, one being product) 05- Password Reset (When a user wants to reset or changes their password)

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

229

228

Existing Emailers

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

231

230

REFERENCE BOARD The reference board helped me gain new ideas and perspectives. I drew for inspirations on colors, layout, icon style and also typography for the moodboard that I had put together.

MANORAJ SG • M. DES GRAPHIC DESIGN • GRAD PROJECT 2019

233

232

ICONS & COLOR PALETTE Rounded outline icons were predominantly used in the platform, hence we chose to use the same style for the emailers so that the visual language is carried forward. The icons were created in 16px by 16px grid as followed elsewhere in the platform.

Calender

Location

Profile

Cost