Design / Iterations
TeeStack is a response to a horrible experience with almost every golf-related interface by every golfer, ever. For the most part UI for golf related apps is just subpar - no pun...anyway here is the breakdown of how we conducted our initial research to a working prototype.
Understanding that space is a limiting factor in usability was at the forefront of my design process. More importantly it was at the forefront of my user research. The majority (77%) of people we spoke to said their biggest hangup was spacial usability - deciding not to use the app because they would have to zoom out or pan around or miss a button.
I would have to find a way to fit everything necessary in the provided interface size without too much moving or scrolling.
The users eye generally moves top to bottom of the page looking for the content - especially in an app of this sort where there are actions and subsequent actions. Using grouping I organized the UI to accommodate logical thought flow.
Instead of using a greyed-out cancel style UI, I decided to implement a z-index rich environment that indicated where your attention should be directed without use of words or symbols.
The idea breaks away from the standard linear movement of landing pages, inner pages and modules that scroll horizontally. When the action is selected, the following intended action rises away in z-space indicating activation of options.
A simple bottom navigation provides a sufficient number of options and paired along with the simple help and thank you screens, creates a design that stays out of the user's way and allows them to quickly get the information they need.
Simplistic designs will help our users, regardless of generation, navigate the different features of the app without requiring a large learning curve. I designed a system that will intuitively guide the user to their destination.
Clear wording for what is happening, reminders and calendar links, all distractions removed from the UI in order to give off a clean unencumbered feel. We also addressed the issue of a cluttered thank you screen causing you to miss an "add to calendar" button.
The movement of the user in TeeStack begins at the user profile or "my stack" for a reason. When dealing with a normal mobile user I can rely on a willingness to use the interface. This is true for the younger gold generation, but not as much for a new group of users that limit their apps to espn and some form of news, if that.
With that in mind I made the initial panel of the App a landing page for getting things done they will want to do: scroll their favorite courses & book tee times.
I'm Aaron, a UX/UI designer working at Constant Contact. I help companies improve the usability, accessibility and overall experience of their app or website.