FNTSY: A Mobile Application

Selina
3 min readSep 24, 2020
  • Context: Final project for CIS 195: iOS Development, Spring 2020.
  • My role: UI Design, Product design, iOS Development.
  • Tools used: Figma, Swift.
A selection of wireframes for FNTSY, created in Figma

For our iOS Development final project, we were tasked to create a full application using real-time database (Firebase). Needless to say, as a designer and computer scientist, I was extremely excited to jump at the challenge. But I was stuck at what I could feasibly create, given my recent knowledge of Swift, and our relatively small time frame of two weeks to complete the task.

At the time, I was knee-deep in watching CBS Survivor’s 40th season, Winners at War, where twenty previous winners returned to go head-to-head for the ultimate crown. Naturally, as a die-hard Survivor Fan, I had corralled my friends and family into participating in some fantasy leagues, for glory and bragging rights, and the title of best shot-in-the dark. However, as popular as Survivor is these days, our unique set of rules didn’t exactly align with any software out there. Thus, I took it upon myself to create my own application — FNTSY (the de-vowelized version of FANTASY, for aesthetic purposes, of course), to be able to keep track of our league’s points.

My Previous Solution

Below are some screen shots of the two leagues I was in, solely book-kept in shared Google Sheets documents. While this was an easy way to share the status of the league and edit on a desktop, it is not exactly the most visually-appealing solution, nor it is easy to update points on a mobile device.

Thus, I set out to create a more aesthetically pleasing application, with some more fun capabilities, such as joining multiple leagues, updating points per player per week, and showing the highest-scoring players in 15 gradient-filled wireframes.

Full set of FNTSY Wires

(Full disclosure: I was limited slightly in my designs based on my pretty novice Swift skill — there would have absolutely been some more analytics, more complex point selection, and more!)

To see all wireframes, check out the Figma file here!
To see the full repository, check out the Github link here!

--

--