Pick'Em

Design Process

David had a clear vision of what he wanted to create, but with a tight timeline and the challenge of creating an app that had never been done before, there was little opportunity for extensive user research or competitor analysis. As a European who doesn't have an excessive knowledge about American Football, Wikipedia was kind of a good start for me to get to collect some data about the schedule, the team and the game itself.

1. Defining user goals and user flows

Our initial step was to define the goals and user flows that we wanted to incorporate into the app. This allowed us to establish a clear understanding of the user's journey and ensured that our design decisions were focused and intentional.

User goals

User Stories

We defined several user stories for testing purposes and to ensure that we had the core concept designs ready for the developers.

2. Wireframes

Once we had established our goals and user flows, we quickly moved on to creating low-fidelity wireframes on a whiteboard the office. This allowed us to rapidly iterate on our design ideas, refining and evolving our concept as we went along. After our meeting, I began crafting the first drafts of our design concepts.

3. Prototyping, validating, iterating

Prototyping can be a challenging task, and choosing the right prototyping tool can add to the complexity. Each prototyping tool has its own set of limitations, and it's important to weigh them before making a decision. For this project, we needed a tool that could handle complex animations and interactions seamlessly. While Sketch and Figma couldn't handle animations correctly back then, After Effects lacked interactivity, Principle couldn't handle variables and developing the prototype in HTML, CSS, Js would have been time-consuming. Eventually, we settled on using FramerJS with TypeScript, which provided almost everything we needed and made the process smoother. By testing and iterating on the prototype, we were able to refine our design decisions and create an app that met the needs of users.

Final designs

With the understanding that our app would need to accommodate a variety of brand colors, we made a deliberate decision to keep our color palette minimal and restrained. This ensured that our design choices would be adaptable and complementary to the diverse range of branding that our users might encounter while using the app.

With our final designs, we aim to provide an immersive and thrilling live betting experience, where users can dive into the excitement of sporting events while making informed and responsible wagers.

The outcome

After spending nearly two years at a large corporation where decision-making is a time-consuming process, it was a refreshing change of pace to take on something entirely different in such a short amount of time and challenge myself with the interactions. I thoroughly enjoyed working on this project. Sadly, the app never got released to the market by IMG, but shortly afterwards a Chicago-based company called StreamLayer reached out to me after seeing a sneak peek of the project on my Dribbble account. Their project had similar needs, and I was delighted to work with them.

Takeaways

The power of small teams: It continues to amaze me how efficient and fast a small team can be. Despite the fact that IMG is a large company with many stakeholders, we were able to build an MVP in less than a month. Being part of a small team without managers or producers takes off the stress from you. If you find the project challenging and are able to find something in it that pushes you, the design process becomes fun and you want to work on it day and night without having somebody reminding you every day that the deadline is approaching. This was exactly the case with this particular project. Despite the short timeline and the fact that nobody had created an app like this before, I found the project exciting and was motivated to work on it.

The power of prototyping: I was thrilled when David trusted me to develop the prototype, as it enabled us to make design decisions with confidence. Installing Framer on his phone allowed him to see the prototype in action, and he loved how closely it matched his vision.

Software has a shelf life: Unfortunately, a few months later, the Framer team stopped supporting FramerJS in favor of React. While I was able finally to create classes, import JSON data, and customize fonts and videos, I was no longer able to access the original prototype. This underscores the importance of recording and documenting your work for future reference.

Believe it or not, but all videos were created in Figma.