ironhide

PROJECT INFORMATION

+ iOS Visual and UX Redesign
+ Summer 2015
+ Amazon Internship

 

A three month internship that focuses on an iOS visual and UX redesign of a video streaming application. After completing extensive research on other mainstream apps, looking into current design trends, analyzing visual aesthetics, and understanding important metrics, helped me produce three different design solutions. This project was both heavily focused on research and the design process.

Ironhide is the version I thought was the strongest solution for my problem space. This includes improving the UX and navigation in the current application, purposefully showcasing the content, and modernizing the app visuals. 

optimus_slanted.png

DESIGN CHALLENGE

Create three concepts for a visual and UX refresh of the existing app architecture


DESIGN PROCESS PART I:

RESEARCH:

I began with researching other mainstream competitors and investigating various design trends within popular apps. To keep a record of all my findings, I took screen shots and recorded interesting UX interactions to compare and contrast the visual display and placement of specific elements. After I collected all the information for a visual and UX redesign, I dove deep into looking at numbers and analytics between the different video streaming competitors to see what areas could use more activity and improvement. 

Final_Pres.v2.008.png
Final_Pres.v2.011.png

INSIGHTS FROM RESEARCH:

The first half of my research helped me find the scope to focus my visual and UX redesign. I found that the pain points I needed to tackle were:

 

Improving the UX and Navigation in the application
+ Showcasing content in a modern and appealing way
+ Establishing a visual brand to keep up with user behavior


DESIGN PROCESS PART II:

After concluding my research, I began creating wireframes and mockups for my final deliverable. My post research process was divided into four main parts:

 

+ Brainstorming various ideas for each concept
+ Receiving critical feedback from peers during studio sessions
+ Implementing peer feedback and smoothing out details
+ Creating animations to convey design concepts

Screen Shot 2016-01-25 at 10.46.35 AM.png

DESIGN CONCEPT 1

 

Tron -- focused on three main trends; animated elements, full screen imagery, and the use of cards. It is a more enhanced version of the current app.



DESIGN CONCEPT 2

 

Optimus -- focused on three main trends; on the micro interactions, parallax scrolling, and the use of typography. It focuses on list views and formats.



final design concept

 

Ironhide -- is the direction I thought was the strongest solution for my problem space. It is solely focused on micro interactions, animated elements, full screen imagery, and ghost buttons. 


 

HOME PAGE

+ the user is able to scroll vertically to see what categories they are interested in

+ they can opt into a category where it displays an endless scrolling carousel

+ to find out about a specific show or movie, they would tap the box art, and a card will slide out with more actions

+ showing this information earlier can help customers make quicker decisions and have more places to play or add content.

 
 
 

DETAIL PAGE BUTTON COLLAPSE

+ ghost buttons at the top of the screen as the focal point

micro interaction of collapsing buttons like version Tron

+ abstracting imagery in the background so content is the main attraction

+ adding scene stills to represent each episode can be beneficial by having a larger tap target and be used as a memory trigger

the episodes the customer has already watched are grayed out and expanded the information of the current episode they are on

+ incorporated a share feature on the left side of the detail page to publicly share content with others

 
 
 

SEARCH TRANSITION

+ focusing on the transition from being engaged in the app to engaging in search

+ it draws the attention away from the home screen and into the search feature

+ establishes a voice and a presence through the application

 
 
 

Home to detail page transition

+ a subtle animated transition from the home page to the detail page, a micro interaction that provides instant feedback

+ Micro interactions are important because they help users understand what they are doing and where they are in the app

 

To see the compiled research document, please click here.