top of page

BAA Boston Marathon Tablet App UI

Developing initial UI design concepts for an iPad-optimized Boston Marathon app


Persona


Racheal

Age: 40

Job: Interior designer in a small company

Marathon experience: Never

Location: Boston, MA


  • likes yoga and work out with friends

  • keeps a health diet

  • weekly exercise

  • wants event updates


She lives a healthy and active life. She takes yoga and cooking class every week. She loves to try something new and exciting. Her husband David has a high paying job in Finance. They usually go hiking or camping once a month. She wakes up at 6 am, start one day with vegetable smoothies and fruits. After dinner, she will go to the gym, sometimes with her husband, sometimes her best friends.


She has lots of sports cloth. She enjoys the refreshing feeling of doing sports.She noticed the Boston marathon event years ago but never had the chance to join. But she would love to try once in her life.




Jacob

Age: 23

Job: USC Graduate student in Computer Science

Marathon experience:Never

Location: Los Angeles , CA


  • likes gaming and have party with friends

  • just realize that he needs to get more exercise

  • wants event updates



He lives with other four students in a big house. As a graduate student, he is pretty busy during workdays. David wakes up at 9 am, only because he stays up until 3 am.


He found one of his friend's post the Boston marathon event and start to pay attention to it. After finds out his high school girlfriend will join Boston marathon, he begins to set up a detailed work out plan. So he might have a chance one day to run beside his girlfriend. However, David doesn't really have spare time to the gym. He would use the time to take a nap instead.


UI Requirements

Following guidelines or certain requirements from experts will likely lead the project towards creating a good user interface.





UI Structure Diagram

New features includes :

  • Multi runners tracking

  • Interactive map tracking

  • Event live and commentary

  • Support comments and chat

  • Marathon shop

  • Follow and support runners


Design Details

The functional capabilities mainly focus on tracking marathon process and encourage users to communicate during the marathon.


The live video provides communication during the marathon. Users could go to the shop before the race or support their runners during the race. Importantly, they could find different runners and follow them all on one screen.


The interactive map could show every individual you follow as well as the commentary. As a part of safety support, they are a pop-up notification bar on the right side of the screen. It would inform users new official announcement, communication message as well as the countdown.


Based on official Boston Marathon website, we decided to use color Maastricht Blue and Azure to share a professional feeling and enhance branding effect. In the meantime, Mint could give users a sense of comfort and energy.





Comments


bottom of page