Flink12
An Evolving Journey Begins
The Dawn of Flink
In 2011 I started a new job working on a product called Flink12. The product began as a private social network which offered a safe and secure way for users to share privately amongst groups of 12 (hence the name Flink12). By the time I joined the team it had expanded to include a public side which was gaining more of the focus. Over time the product pivoted and evolved through many stages – both the design and the business model – and eventually split into multiple apps targeted at fans of Movies, TV and Music.
Working on the various web and mobile apps over the years has provided me with greater insight into usability and has improved my ability to adapt to change. This is the beginning of my Flink experience.
The Flink12 logo before and after we revamped the web app.
My Introduction to UI & UX Design
I’ll be honest, when I first started at Flink I didn’t have a solid understanding of what UI and UX design were or that they were actually two different things. My background was in graphic design so my method was more of a tell-me-what-you-need-and-I’ll-make-it-look-good kind of approach. I was also the only designer at the office so I would have to figure out this whole UI/UX stuff as I went.
My first step was to understand the actual product and all the features and functionality. The web app was the core product so that is where I began. The original UI was very confusing with multiple blocks of content and navigation elements scattered all over the screen. As a new user it was overwhelming and difficult to know what to do next or what was even possible so I broke down every page and every interaction into crude looking content inventory maps.
The original web app was confusing and took a lot of “getting used to” for the user. Not ideal.
Inventory maps helped me to wrap my head around the various sections, features, and functionality.
Getting Some Ideas Down
Once I wrapped my head around all the functionality and features of the app I had countless ideas that I needed to get down on paper. Sure, I might have been missing a step or two in the design process but I was excited and realized that this whole UI/UX thing might be right up my alley. I made notes for possible improvements, composed questions to ask the team and drew sketches of the various UI components. These served as the basis for further discussion with the team.
Just a handful of the numerous pages of sketches, notes, ideas, and questions.
Solidifying the Ideas
I organized my ideas and presented them to the team. We weighed the pros and cons of overhauling the entire UI (mostly pros), discussed how it would affect current users and how it would fit into our current schedule. Everyone was on board so with input from various team members I continued to refine the overall UI.
Some of the wireframes that I put together as I refined various UI elements.
User flows helped illustrate how the new UI would drastically improve usability.
The Finishing Touch
Visual design is where I had the most experience and felt most comfortable. We had a pretty good idea of how we wanted the new design to look and the previous wireframes helped speed up this stage. I must admit, looking back I probably spent too much time fiddling with shadows and various textures but at least the product was far less confusing than when I started.
These designs marked the first stage of the many design changes Flink would undergo.
The Flink Journey Continues
This was just the start of the many phases Flink went through. Continue on the Flink journey.
