Profile Screen – UI Case Study

Task Overview

In this exercise, I’m trying to design a profile page for Travel Enthusiasts where a traveller can show off their travel experiences.

Research

I decided to research the wide range of social platforms we have such as Facebook, Twitter, Google Plus, Youtube and more… With a mix of web platforms like Medium, Creative Blog which primarily focus on rich user contents of stories and experiences to capture more engagement. These platforms concentrate on giving a seamless experience to the user providing information.

User Personas Considered

I wanted to begin with real human needs who try to look out for mediums such as this. Ideas was to write down snippets of my own reflections about what I’ve experienced from various digital travel channels. With this I started documenting the necessary user behaviours in my notebook for later use.

Design

In brief, I was aware of the task in hand and the define problem that I wanted to solve. Create a UX oriented UI which engages users by its Visual aesthetics. Using human-cantered design so the UI meets real human needs.

Information Architecture

I stated capturing the major sections of the flow on paper to make sure that my ideas resonate to what I’ve to design later on. These major sections were detailed out even more in the high fidelity IA stage which you can see below.

Wireframe

As an approach for the wires, I decided that I can start sketching out the layout of the design based on the IA I had designed early on and would render into a UI using Omnigraffle. Goal was to created the content in a minimal format with the context integrated to make my work easier in Visual Design format

This approach made me fasten my design process to present the design in one single view with highlights.

Visual Design Prototype

Once, I had a wider range of ideas while visual design, it gave me time to re-think the way we I wanted to showcase the widgets on the right to create more space for the content on left and to build curiosity for the users to check more about the profile being visited.

Once the wireframe sketch was ready, I started creating the layout and lay the early foundation to make it look beautiful. I started by selecting the type of color theme I’m going to use, type of fonts, Iconography style, Pixels depth in the design which gives it a grid aligned pixel perfect look. Image sourcing to make sure that everything goes in sync with each other.

After spending couple of hours over the foundation of the visual design, I was ready to start putting things together to start seeing a prototype, I’ve been thinking about.

The result was a simple interface that allowed users to search and checkout people’s profile to see the rich content which they look out for.

The layout is pretty straight forward. As you can see below, the UI caters to UX leading to core functions of the page to create more engagement. It’s amazing how much I’ve learned simply from working on this task, as it gave me insights to think of better way of creating engagement on social platforms for travellers.

Final thoughts

While working on the profile page, I realised I had a range of options and assumptions which I could consider to make even social apps like Facebook and Twitter have better UX. As this was not a data driven design and built solely on my assumptions, its hard to even consider.

I quickly realised that having more screens and layouts for screen like Photos, Wishlist, Traveller story page, Albums, Wishlist/Bookmark page would help me more in creating a design which covers all the UX loops. I took a infrastructure approach to a large problem and decided to create something that could potentially have a bigger more long-term impact than something that focused on immediate needs.