1. Mock MTA.info Homepage: S.T.A.R. Analysis
Concept & Design by Charles A. Walsh
Tools: Sketch 3, Pen & Paper
2. S.T.A.R. Analysis: Mock MTA Homepage
MTA.info needed a new homepage. The homepage had
an outdated design, too many links, and little information
structure.
To find out what visitors use most and deliver increased
usability, accessibility, and the overall user experience of
the overall homepage.
Situation:
Task:
3. S.T.A.R. Analysis: Mock MTA Homepage
I held a Q&A with 100 imaginary MTA.info users about
which features they used most frequently. The
consensus:
1. Trip Planner
2. Service Status
3. Future plans section
4. tourism
5. App Center
Action:
The Q&A results allowed to begin the information design and sketch
process.
1. Information Design
I placed each link on the homepage in categories: Blog, Future
Projects, Apps, etc. Then, ordered them by importance according to
the Q&A results. The categories mentioned in the would be featured
in the body of the homepage. Everything else would be placed in
the Directory footer. The header menu was simplified and ordered-
based on user value from the Q&A, including a language option. To
accommodate for the new fictional MTA App, I placed a “Buy a
Card” option for online payments in the menu to increase MTA
revenue.
Wireframes
Information Grouping
4. S.T.A.R. Analysis: Mock MTA Homepage
3. Interactive Design
All widgets labeled with a “+” on the homepage are retractable. This
creates better flow and fixes the link clutter found on the original
website.
2. Visual Design
The homepage follows a Z-Pattern. Widgets are placed on the page
according to user importance. I then redesigned the Trip Planner. I
kept the important options--transportation mode, To & From, Time,
and extra options--creating a more user-friendly widget.
5. S.T.A.R. Analysis: Mock MTA Homepage
Result: By organizing the MTA homepage according to the
highest User Value, The new homepage allows users to navigate
faster, make quick online payments, and is overall more visually
appealing.
By organizing the MTA homepage according to my
user research, The new model allows faster
navigation, quick online payments, and is visually
appealing, improving the overall UX of the MTA.info
homepage.
Result: