
Labstraction

Labstraction
Nov 26th, 2018 - Dec 7th, 2018
University of Washington - B IMD 351
What’s labstraction?
Labstraction is a platform that encourages individuals to show how they think and feel. In the “Lab” players are challenged to dive into a series of constructs that can range from complex social dynamics to simple everyday occurrences; using only the basic elements of visual design. At its core, the experience will foster one’s ability to approach challenges and questions from new perspectives. The players will quickly find themselves asking, “How can I Labstract that?”
why labstraction?
As an introduction to app development amongst teams, the B IMD 351 class developed individual app pitches, presenting wireframes and mockups to their peers. Students voted on the most attractive projects and promptly split off into groups that would work to develop prototypes of the popular ideas. The projects were required to utilize code from the Hackathon projects provided as well as tackle a persuasive topic.
Mockup for children shape game (click to enlarge)
Wireframe for children shape game (click to enlarge)
The application I chose to pitch was a children’s puzzle game that used touch gestures to edit basic shapes to build other more complex shapes. These more complex shapes were gonna represent thing such as unity, connection and communication. Some examples of complex shapes could be a family or a state. The puzzles would have also been timed, which I believe would have added to the games replayability.
After hearing the initial pitches, the application that I ended up working on was Labstraction, where I took the role as lead developer for the app. My shape game and Labstraction had very similar functionality making for a smooth transition to the new project.
Initial mockup for Labstraction (click to enlarge)
Initial wireframe for Labstraction (click to enlarge)
labstraction, how?
Based on the initial pitch’s vision for Labstraction, our team set about defining the specific goals and functions of the app. Who would be an ideal target audience? Why would someone want to use Labstraction? What kind of visual theme should we focus on? How would a user go about finding a topic to “labstract”? Through coordinated discussion, our team decided that Labstraction would cater to young adults (18-20) currently in education and would serve as a self-improvement styled activity. We decided to emphasize on the minimalist and educational stylings of the mockups used in the app’s pitch. Our project leader listed off possible categories of concepts to “labstract”, delving into various Sociological terms. After this, each of our team members branched off into individual tasks.
On my end, creating Labstraction required a lot of new knowledge and experimentation with the Objective-C language and XCode software. I had to investigate means for implementing IOS touch functions, passing data through View Controllers, creating manipulatable image views, saving user created information, and develop an understanding for arrays. Initially, I created a personal wireframe to use for testing out some of the apps different functions. Conducting a multitude of individual research, I slowly began to implement new app functions into our team’s XCode project. Though the prototype eventually came to be riddled with bugs, my ever-increasing knowledge of Objective C allowed me to debug the project and get it running with relative ease. One of my bugs was tracking what shape the user selected with touch gestures. This video shows a screen recording of the application I made to test and create this functionality. The red square is the shape the user just selected, by clicking within the shapes dimensions.
I found that my work as a developer required a lot of coordination with the rest of the team. I consistently worked to keep the rest of the team informed on what I could accomplish programmatically and what might not be possible to accomplish within our time limit. Reflecting upon the mandates of the UX and UI designers, I prepared the XCode project and updated it continuously so that their custom made assets could be implemented painlessly.
labstraction Results?
Labstraction Mockup (click to enlarge)
Labstraction Wireframe (click to enlarge)
Gallery of Labstraction screens and video of Labstraction app
how was the project?

I felt like this Labstraction project was a great introduction to design and development of an app as a team. I believe that having team members choose roles taught me the different information that I needed to communicate between different roles. For example as a developer I was in consistent communication with our designer, updating them on different functionality and features I could incorporate into our app. This communication helped guarantee that our app wasn’t missing any assets near the end of development. This communication allowed for us to add extra features that we didn’t expect to have time to incorporate. This is why I believe our apps functionality to be a major strength. However, our group did struggle early in the project building on the Labstraction idea, due to one of our group members missing class. If our group had more time to improve on Labstraction, as a developer I would have wanted to add an undo button as well as get the publish button working. I believe if we were able to get the publish button working, it would have been cool to start to see peoples designs.