What is it?
Social Golf is a social betting app concept by Metric Gaming, where prediction markets combine historical data, real-time info and the wisdom of the crowds to produce live odds of real-world events occurring in real-time.
My Role
During my time as UX/UI Designer for Metric Gaming from July 2015 to November 2017, I was asked to conduct user research and testing, and create wireframes and UI mockups for several new applications. One of the projects was to design a "Social Golf" app to showcase the idea to stakeholders. I was asked to focus on adding fun, social elements to the sports-betting experience.
Brainstorming Session with Initial Questions
We began with a brainstorming session to ensure we were all on the same page in terms of expectations, the concrete core features the product needed to have, and to collectively define the single reason why someone would open up this potential app and stick with it. Questions asked during the brainstorming session included:
- What would we like our application experience to be?
- What is it meant to do?
- Who is the intended audience? Who are we targeting?
Next Steps
The next steps I completed were competitive analysis, target audience research, and interviews. With the results from these steps driving me, I created personas and journey maps.
Due to Metric Gaming’s request, I will be sharing limited data and design mockups.
Due to Metric Gaming’s request, I will be sharing limited data and design mockups.
Wireframes
I started with pen and paper to define which actions the user would need to take, and began coming up with ideas for overall navigation, information architecture, possible mobile patterns to utilize, informational cues, and visual feedback. I defined how I wanted to guide users to clickable actions with rough sketches. I then created grayscale digital wireframes in Sketch based on these sketches. I kept the wireframes gray in order to keep the emphasis on the information flow and placement of UI. I compiled all the wireframes into a PDF document, with each screen annotated with design reasoning and information.
Example of two of the wireframes:
Example of two of the wireframes:
High-Fidelity Designs and Usability Testing
After conducting a small number of user tests using the wireframes, I created high-fidelity UI designs using Sketch and made design changes based on the feedback. I then turned the high-fidelity designs into an interactive prototype using Marvel, and conducted usability testing. This produced quantitative and qualitative user insights that drove design revisions.
Example of some of the UI design:
Example of some of the UI design: