Hackathon

Mobile App Development
Collaborate in cross-functional teams between Designers and Developers to create an HTML app with a theme Robot Apocalypse
Role: Interaction Design, Information Architech, Project Manager
Team: Adrian Freuen, Visual Designer Elmira Cheraghi, Visual Designer, Researcher

Overview

Given 1.5 days, partnered with developers and designers to delivered a mobile application that focus on humans survival in year 2076 during a Robot Apocalypse. Mobile design included features to assist humans in the future to accurately find safe houses and get alerts when a safe house has been compromised by a robot.

Discovery

Initial Meeting

For our Hackathon Challenge, UX Designers were partnered up with Developers to work together and deliver a HTML mobile app following this year’s theme: Robot Apocalypse. Once the teams were announced, we met with our team and started brainstorming ideas.

As a Project Manager, it was important for me to understand the developers constraints and strategically allocate task efficiently for the designers given our short deadline.

Our team threw out a handful of ideas and we finalized the app idea to build an app for user’s to find safe houses and view inventory of the house and determine if house is safe. The assumption is that robots are evil and user’s are currently in a robot apocalypse

Design

Design Studio

I conducted two iterations: two minute to sketch, pitch ideas, critique, and iterate with primary focus on Home screen and Inventory Results screen.

Once the UX Designers have finalized the two main screen, as the Project Manager, I looped the Developers back in to get their approval on our sketch ideas and bring up any road blocks that might occur before we dive into the wireframes and the developers finalized on a few features and signed off our designs.

As an Information Architect, I identified these items that would be crucial for human survival based on our persona and features to prioritize as our major focus

Humans Needs: Food, Water, First Aid, Protection, Power
Features Prioritization: View Good or Bad Safe Homes, View House Inventory, Message Individual House

Develop

WireFrames

As Interaction Designer, I needed to make sure our design suggestions were appropriate and approved by our developers so they can completed their task within our deadline.

I drafted up wireframes in Sketch for the home screen, message screen, and safe house inventory list and synced with the development team to go over functionality and interaction of the features & screens.

Mid-Fi Wireframe

I consolidated the visual icons by our Visual Designer into my wireframes and synced with team members and helped allocate task as needed .

Challenges I Faced

iOS Platform

As a Project Manager, my regular check-in’s with the developer help me catch errors early which helped me reallocate task and prioritize the teams needs to meet our deadlines.

Mid-point, our team realized that we have run into a problem with the sizing of our wireframes.

This did push back my productivity, but I quickly check the dimensions and communicated to the Developers that I can work with iOS 8 platform because it’s the same width as the iOS XS, just a little shorter.

1. The developers were building the mobile app on React which only supported up to iOS 8 plus platform.

2. Platform detail was missed

Outcomes

Results

I presented the Hackathon Challenge to the judges and the developers showcased their development.

After all the teams have presented their Hackathon presentation, winners were announced. Our team GAvengers placed 3rd place.

Next Steps

Develop profile page for humans to identify difference between humans and robots. Adding real time navigation humans safe routes This will help guide our humans to safety navigate to safe homes. Check-in safe house feature that will show humans how many are already staying at the safe house.

What I Learned

Learning to work with developers was the most educational take-away for this project. I learned that there are constraints and limitations to what a developer can do. It was also a key important thing for me as a UX Designer to whiteboard our ideas, Our initial meeting to decide what idea to pitch struggled at first.

I took the initiative and started white boarding out everyone’s ideas, surprisingly the entire team were in agreement within minutes after I drew out our ideas for our pitch because it was easier to understand and communicate an idea over a sketch versus talking. Regular check-in as a Project Manager helped identify any errors early enough fix and meet our deadlines and quickly reallocate task and priorities.