How I Met Your Mother
Visual Guide to the SitCom (Concept)
Mobile App Concepting and Development

ROLE:

PROJECT:

CHALLENGE:

SOLUTION:

UX Designer

Concept an app that prioritizes visual orientation versus text.

Developing navigation and content that is consistent with the scope, while keeping to simplicity of access logic.

Having a drag/swipe oriented navigation and adjustable content between text windows.

User Interview
 

For the context of this project, getting to know the target user helped identify their needs. Given that the user is visually oriented, having the mobile app emphasizing this detail benefitted the development of the product.

Research
 

Keeping the user interview in mind, I scoured the net to see what competing apps existed with "How I Met Your Mother". Fortunately much of what is on the market is simple in design and were mostly generic summaries. To contrast against the market, emphasizing the visual articulation would carry the design of the app.

Concept Mapping


The concepting phase allowed me to lay out what possible features would exist for the app. This also allowed me to visualize how I would organize each screen for the prototype and the approach I would take to create the navigation system for it. 

P1 - UXDI5 - Jaynesis Ong - How I Met Your Mother _ myBalsamiq.jpg
P1 - UXDI5 - Jaynesis Ong - How I Met Your Mother _ myBalsamiq.jpg

press to zoom
HIMYM-Load.png
HIMYM-Load.png

press to zoom
HIMYM-SeriesGuide.png
HIMYM-SeriesGuide.png

press to zoom
P1 - UXDI5 - Jaynesis Ong - How I Met Your Mother _ myBalsamiq.jpg
P1 - UXDI5 - Jaynesis Ong - How I Met Your Mother _ myBalsamiq.jpg

press to zoom
1/5
Prototype


Relying more on visual navigation, I would employ carousels, free-drag navigation, and image bars to travel through the app. While episode summaries are still available in the app, official screenshots and user-contributed media would also play a major part in the app.