Media Network | Web App UX / UI

Research / Wireframe / Interaction Design / Visual Design

Due to legal reasons and NDA requirements, some details have been omitted from this case study.

1. Feature Research

The initial stage of the project. I performed extensive research on feature set, to try and understand the niche of the product, and what it really was that made it unique. I looked to find unique ways of solving the problems of people I met.

This stage allowed me to see what other companies were creating and what their main strengths were, as a starting comparison point, and to ensure I knew as much about the competition and the type of app I was working on before I started creating anything

2 User Research

I created User Personas to help me set out the criteria and feature set that would be needed by all users. I developed an analysis of the data I gathered to ensure that features that would be used most often by most users would be easy to access.

I gathered my data using anonymous online tools, face to face interviews and questionnaires, depending on what I wished to find out and how I wished to use the data. The data findings showed that the product that we were developing was actually a fair margin off a target we should be aiming for. The research led to a re-direction and a complete re-focus of the app and its tools, and led to some of the clunkier features being axed completely to keep the user experience tight.

3. Wireframes & Low Fidelity Mockups

This stage was the first stage were the rest of the team could see in a visual manner exactly how I intend the project to go. Of course, at this moment, the point of rapid prototyping is so that changes can be made quickly the Low Fidelity mockups are created for users who are less visually inclined.

4. UI & High Fidelity Mockups

A massive focus was pushed on the look and feel of the app. Every care was made to ensure it would be high quality, predictable and stable on any platform or device. The ability to serve media heavy items in a feed friendly manner and highly visible manner to ensure that content across the network had high interaction rates.

The app was designed to be mobile first in every way. This means it comprises lots of nicely draggable elements, hidden interactive menus, and panels which pop out at opportune moments to allow users to fine tune details on mobile optimised layouts.

When it comes to any design element, I never create an element that is superficial. Superficial elements miss opportunities to communicate with the user. In the case of the web app, the UI patterns and elements are used to communicate:

  • The relationship between objects
  • A visual navigational hierarchy
  • The source and destination of information
  • The ability to interact with objects