Racelink. Racing tablet app

Transcription

1 Racelink Racing tablet app 2015

2 Title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

3 This is a freelance project and the main purpose is to create a new brand integrated into a beautiful app to engage new users.

4 Content 01 Research Purpose 6 Workshop 7 User scenario 8 Personas 9 Title Competitive review 11 Information architecture 12 Lorem Ipsum is simply dummy text of the printing and 02 typesetting Strategy industry. Lorem Ipsum has been the industry s Specific goals standard dummy text ever 15 since the 1500s, when Key concepts an unknown printer took a galley 16 of type and scrambled Design guidelines it to make a type specimen 17 book. 03 Design Sketches (paper prototyping) 22 Interactive wireframes 23 Logo 24 Icon set and graphics 25 Detail design (UI) 26

5 1 Research User is the center of focus in any design decisions and this information can be used as inputs to the specifications of the project.

6 Why What When Where To visually communicate Data visualization. For When there is need for: Trade show graphics, info information of a technical nature. Almost 50% of your brain is involved in visual processing. 70% of all your sensory centuries, people have depended on visual representations such as charts and maps to understand information more easily and quickly. Explanation. Summary of content. Support understand. Lighten up content. boards. Video and animations. Web graphics. Multi-Screen Success Stories. receptors are in your eyes. Well-crafted data visualization We can get the sense of a visual scene in less than 1/10 of a second. helps uncover trends, realize insights, explore sources, and tell stories. 6 Racelink Research Purpose

7 Research Workshop The purpose of the workshop was to gain insights from potential users. In preparation for the workshop participants were asked to find 2-3 good and 2-3 bad examples of racing tablet apps and explain what they felt made them effective or ineffective. As summary of the key questions is displayed below: 1. What makes a racing app clear and effective? Topics: Content: the message and information structure. Visual elements and readability. 2. Additional: videos and interaction (mixed media). 3. What makes a racing app unclear and ineffective? Topics: Content: the message and information structure. Visual elements and readability. This phase was also supported by interviews and brainstorming sessions. 7 Racelink Research Workshop

8 Research User scenario A car racer who has just competed in an event like the Porsche GT3 Cup or equivalent and uses this app to evaluate the race, review the performance, and get very concrete insights on how and where to improve. 8 Racelink Research User scenario

9 Research Personas (primary) Professional race car driver. Richard Petty Race-car driver, 64, Level Cross, North Carolina. If you re 100 percent confident, go, but if you re 95 percent confident, don t. Joey Logano Stock car racing driver, 25. Middletown, Connecticut, U.S. You need to win. It s that simple. You need to win to get into the Chase, and you need to win to advance in it. 9 Racelink Research Personas

10 Research Personas (secondary) Car lovers, race fans & automobile enthusiasts. Those who love speed. And timing, of course: professional timers, event organizers, track and club owners. Dani Gulliver Stakeholder, 21. Ontario, Canada. I think I might be a bit of an adrenaline junkie. Rob Kauffman Racing team owner, 51. Sharon, Connecticut, U.S. The idea is to work together to increase revenue, spend more efficiently, and deliver more value to our partners. 10 Racelink Research Personas

11 Research Competitive review. This is a selection of the leading racing apps oriented to professional race car drivers as well as race fans. These examples provide detailed information about the event and can be taken as inspiration in UI Design. 1. Official app. Favorite drivers with news, video and live race features. 2. Racing series, programmes and the history of Porsche Motor Sports. 1. NASCAR Raceview Mobile 2. Porsche Motorsport 3. Official Site of IMSA 3. International Motor Sports Association. 4. FIA World Endurance Championship. 5. Official app. One of the two oldest circuit races in the world. 6. Independent motorsports magazine. 4. FIA WEC Hours of Le Mans 6. l endurance 11 Racelink Research Competitive review

12 Research Landing page Information architecture For the purpose of interaction design, the sorting process provides: 1. Terminology (what people call things). 2. Relationships (proximity, similarity). 3. Categories (groups and their names). We can use this information to decide which items should be grouped together in displays, how menu contents should be organized and labelled and, perhaps most fundamentally, what words we should employ to describe the objects of our users attention. Timing system Menu Lap times Sector split times Position in the field Lap number, laps to go / time to go Gaps to competitors in front / behind Racer Menu Revs / sec min, max, avg per lap Temperatures of cooling water, oil, tires Throttle indicator, brake indicator Steering wheel indicator G-forces longitudinal & lateral Braking point analysis Steering balance analysis Environmental circumstances Biometric performance 12 Racelink Research Information architecture

13 IA / User journey Title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 13

14 2 Strategy According to the research findings, it s time now to create a series of ideation activities in order to achieve the specific goals. This implementation refers not only to the visual style but also the story behind Racelink.

15 Strategy Specific goals 1 2 The main goal is to communicate information clearly and efficiently to users. A tablet app that is intuitive, easy to use and comes up with practical improvement suggestions. (instead of a lot of detailed data which is difficult to draw conclusions on). 15 Racelink Strategy Specific goals

16 Strategy Key concepts Clean & professional visual style Visually engaging Well organized information Easy to use and understand Fully measurable Tablet optimized 16 Racelink Strategy Key concepts

17 Strategy Design guidelines Photography usage It s about telling stories through personalities, interactions, and experiences, according to the following characteristics: 1. Natural and relaxed. 2. Real, honest and straightforward. 3. Capturing emotions and intimacy. 17 Racelink Strategy Design guidelines

18 Strategy Design guidelines Color palette #cccccc R204 / G204 / B204 #ed1c24 R237 / G28 / B36 # R0 / G0 / B0 # R153 / G153 / B153 #0066cc R0 / G102 / B204 #ffffff R255 / G255 / B255 # R102 / G102 / B102 # R51 / G51 / B51 18 Racelink Strategy Design guidelines

19 Strategy Design guidelines Data visualization Some examples are displayed on the right. 1. Line weights: The thinnest line for minimal details: 0,5 px A thinner half weight line to provide additional infomation: 1 px A thicker line to draw the whole graph: 2 px 2. Visual style: no gradients / shadows. 19 Racelink Strategy Design guidelines

20 Strategy Design guidelines Claim User wants to dig deeper and see what s behind the brand as a trusted friend. The first step, a clear message with a strong claim: You re gonna go far. (or equivalent). The main idea is to represent the passion for speed and safety. You re gonna go far. 20 Racelink Strategy Design guidelines

21 3 Design The solution.

22 Sketches (paper prototyping) 22

23 Interactive wireframes / live example Title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 23

24 Logo Title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 24

25 Icon set and graphics BRAKING LEFT TURN RIGHT TURN ACCELERATION 25

26 Landing page Title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 26

27 Main menu Title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 27

28 Data from the timing system is used to evaluate the performance and it is available for all competitors, so the racer can compare himself to other racers on laptime, but also section specific split times, things like trend in the laptime (up/down as the race evolves) and the race development in terms of position (moving up/down in the field).

29 Lap times Title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 29

30 Data from the racer himself is used to analyze the strong points and development points like the car performance (avg revs, temps, fuel usage, tire condition, steering balance, etc.). Also the driver performance (drivelines, braking points and g-forces). Possible other data points like circumstances (weather, track condition, temps, humidity, etc.) and biometric data from the driver.

31 Environmental circumstances Title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 31

32 Telemetry Title Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 32

33 The design proposal is not exhaustive in terms of all the points mentioned. What I was looking for is to get an impression of how develop this project into a vision for the UX, a concept of how the UI could work and a glance at a visually attractive and convincing appearance of the product.

34 oriolcamacho.com