Toolkit: Figma

Type: Consumer Products

Duration: 48 hours (Apr. 12th, 2019 to Apr. 14th, 2019)

Challenges Submitted For:

Best Use of Magic Leap One

Best Use of IBM Watson or IBM Cloud

Best Use of Intel Technology

SHAPE Up Your Accessibility Challenge

Best IOT or Interactive Toy Solution

MY ROLE

I was part of a full-stack team responsible for leading the UX and UI, producing all major deliverables for tablet, mobile, and Magic Leap One assets. I worked alongside seasoned developers in the tech industry with guidance from AT&T employees.

 
 

TEAM & ROLES

 

Full Team

From Left to Right:
Shawn Walker (Inventory Manager)

Tu Duong (Full-Stack Developer)

Kien Pham (Full-Stack Developer)

Me (Product Designer)

Robert Points (Lawyer)

Tulani Watkins (Product Manager)

Randolph Aarseth (Back- End Developer)

Intel Representatives x3

 

challenge

HOW TO MAKE AN I.O.T./INTERACTIVE APP THAT WILL BENEFIT THE SPEED OF 5G?

Resources from IBM Watson, Intel, and Magic Leap One were present during the hackathon for all participants to use for guidance on their projects. Randolph initially came up with the concept as an emergency application, but after consulting with the team for the first hour, we quickly realized our pool of users were extremely limited with this use. The concept was interesting for all of us to tackle, but we questioned ourselves how this would work as a consumer-based product.

 

 

USER RESEARCH

WHO ARE WE DESIGNING FOR?

I led the team to start sharing their ideas through an affinity mapping exercise to explore keywords and features with 5G’s power, which we solidified to safety, education, and community. We evolved our map and identified our core users in this scenario:

Hikers: Open accessibility features in the events if they’re color-blind or deal with mobility issues.

Tourists: Access of knowledge and education around the public spaces they encounter.

Researchers/Rangers: Data collection of hazardous roads/objects/wildlife they discover.

HOW MIGHT WE GIVE THIS ACCESSIBILITY TO OUR USERS?

Having the survival feature through GPS navigation was a feature to add in, but we later discovered how education was the key to consumer accessibility. We came up with two features that users can use through IBM Watson and Intel’s A.I. platform as they are out on the field thanks to the speed of 5G:

Return: Guide users through GPS tracking to return to a safe destination as rescuers meet users halfway at a destination.

Discover: Allow users to interaction with objects and nature around them through photo-snapping, which generates info about the picture they snapped.

We translated our ideas by identifying the user flow and our wireframes sketches to see how these features would work.

 
 
 

HOW TO DESIGN FOR ACCESSIBILITY IN MAGIC LEAP ONE AND iOS DEVICES?

AT&T & Magic Leap One hosted workshops during the hackathon and I attended to speculate what to keep in mind during the design process. Both companies guided all of the participants on what their products do and how they keep accessibility in check for their consumers. These were my takeaways:

AT&T Workshop: Voice UX is the next tool for all users (esp. visually impaired)

Magic Leap One: Limited dimensions and possibilities for UI design is endless and creative, but users must be able to see within their peripherals while wearing the device.

 
IMG_9539.JPG
IMG_9552.JPG
 
 

UNDERSTANDING THE JOURNEY.

After the workshops, I summed up our information to give the team a clearer version of the user flow to ensure how the interactions would be if IBM Watson and Intel would occur as they were developing the code for their features.

 
MacBook Pro (2).png

 

DESIGN PRINCIPLES & moodboard

CREATING AN EXPERIENCE THAT PROVIDES TRUST AND EDUCATION

Due to the short time span, I approached the design principles for this prototype based on the following:

Support & Control:

  • Users should be able to access features regarding information around them.

  • GPS from Google must guide users to a safe destination in the events of emergency.

Visual Consistency:

  • Information in the UI should be clear for anyone to access information.

Calm Nature:

  • Colors should reflect curiosity, education, and emergency accessed with ease, not urgency.

 
Screen Shot 2019-04-28 at 2.22.54 PM.png

 

IDEATION

WIREFRAMES

The key theme for this hackathon was accessibility. From the quick design challenge we identified, I drafted a simple UI for both mobile and tablet products to match the accessibility features.

 
Sketch to explore the functions and features in a visual matter.

Sketch to explore the functions and features in a visual matter.

 

After wireframing, I relayed my ideas to the team and an AT&T representative. I received positive feedback on the simplicity executed within our time constraint, especially in scenarios of urgencies.

 

 

VISUAL DESIGN & Developer handoff

REVEALING MULTIPLE PLATFORMS FOR THE PRODUCT

I created the visual designs by adding color to multiple platforms (iPhone, iPad, and Magic Leap One) I relayed the information through showing the team a prototype of how it should function before they added in their back-end code. Thanks to Figma, the team was able to grab my designs quickly without needing me to export.

 
Magic Leap One UI Designs

Magic Leap One UI Designs

IMG_9548.JPG
IMG_9550.JPG
 

 

Style Guides & Logo exploration

A TRUSTING SENSE OF GREEN

Green was the tone and mood that was transparent to the whole team that weekend. I drafted the style guides and logo exploration according to it, which would be used for our mobile and tablet versions.

For the logos, I presented the three brand identities to the team and all believed that the second one best matched the lively experience they were achieving for.

 
iMac (1).jpg
Screen Shot 2019-04-29 at 9.15.42 AM.png

 

presentation & conclusion

CHANGING THE PARADIGM OF PUBLIC SAFETY

Unfortunately my UI design wasn’t implemented in time, however our team was able to present the functionality in a different prototype; highlighting how users can interact with the world and educate themselves while in the public space, revealing the safety feature to guide users to a mid-point destination for rescuers to meet halfway.

Judges from IBM, Intel, and AT&T were thoroughly impressed with our concept and saw the potential need for consumers when 5G expands in the next few years.

 
IMG_9590.JPG
IMG_9587.JPG
IMG_9584.JPG
 
 

TAKEAWAYS

I was blessed to meet and work with a team of seasoned developers at my first hackathon. I enjoyed putting myself in an extreme agile environment as being the only the designer in a sprint type session, which trained me on when to experiment and when to cater to the time constraints. If I were to start this project over again, I would’ve wanted to explore another scenario of how this would work with AT&T’s default programs on the mobile device to see how our ideas could come into play in a full immersive consumer product.

The team enjoyed my insights and knowledge about design/brand identity and judges were thoroughly impressed with our size acting as a functioning developing department.