UI Design Case Study: Creating a clickable prototype for a desktop version of Instagram
Instagram, a fairly new platform for capturing and sharing photos and videos, has quickly grown since its launch in 2010. While Instagram has always maintained that the app has been designed with a focus on mobile-only use, a desktop version was released in 2013 to make the app more accessible to its rapidly growing community. Although the desktop feed functions exactly as the mobile version, allowing users to follow profiles and like pictures, a key feature missing from the current desktop version is the ability to upload photos from a desktop. The reason behind the omission of this crucial feature is that Instagram is designed for capturing and sharing photos in the real world, in real time.
“You’re almost always wrong about your users. “
-Manik Rathee, Former UX Engineer for President Obama
While the app may have initially been designed for ‘on-the-go’ use, it is of critical importance to consider the actual use of the app in the current context of social media use. Instagram boasts of over 700 million users, however, key user personas on Instagram can be filtered down to a handful such as fashion, travel, food, art etc. Editing images on Photoshop before posting on Instagram is a trend among celebrities and has opened doors to a ‘copycat effect’ among social media users. The pressure to be conventionally beautiful and showcase the best version of self only increases the use of photo editing software for Instagram posts. While a large number of mobile photo-editing apps are available for amateur users, a simple tap of filters cannot create the professional, editorial-like images posted by some of the most followed Instagram influencers. On the other hand, the unique visual charm of the platform has pulled a growing number of artists to engage with the platform. Freelance artists and small businesses are using Instagram to engage consumers with their products and ideas. Instagram has become an important element of social media marketing strategies and can no longer be identified simply as an ‘on-the-go’ platform.
The problem
A short survey was distributed via Facebook to build an understanding of the issues, if any, faced by Instagram users in using the existing mobile app to engage with their followers. It was hypothesised that users, especially those who created their posts on a desktop, would find the absence of a fully functional desktop version to be an inconvenience as the final artwork needed to be moved from a desktop to a mobile device to post on Instagram.
The survey was completed by 11 current Instagram users, out of which over 45% identified themselves as artists, illustrators or designers. The remaining respondents were identified as small business owners, social media managers and/or hobby photographers. Out of the responses received, 90% of users admitted to editing or creating their images on a desktop or laptop device, with over 44% of the users admitting to creating or editing all of their Instagram images on a desktop. These users used cloud sharing apps such as Dropbox and Apple Photo Stream or Facebook Messenger to transfer the finished post images from their desktop to their mobile devices. Over 66% of respondents found this to be an inconvenient process and remaining respondents, who did not find this to be inconvenient, preferred to have an easier method. 100% of the respondents agreed that Instagram should have a fully functional desktop version that allows users to post images from a desktop or laptop device. Additionally, respondents repeatedly suggested the inclusion of a ‘scheduling’ feature that would allow users to plan their posts in advance. The survey results confirmed the hypothesis and highlighted that Instagram is not longer an app for real time posting and there is a need for the platform to adapt to its changing consumer base.
The Task
- To design a desktop user interface for Instagram that caters to the needs of users who create their final images on desktop software such as Photoshop. The solution for this task focuses on UI design and does not include documentation of UX design such as user research and user journey mapping.
- To create a UI library complete with visual language and style guides in line with the existing Instagram app and provide users a well-designed visual experience.
- To create a clickable prototype of the final interface design and collect feedback from real users and identify future direction.
- To use this process as an exercise to understand and evaluate the principles and tools for effective UI design.
Defining User Interface Design
User interface is like a joke. If you have to explain it, it’s not that good.
A subset of the human-computer interaction field of study, user interface design can be explained as a set of visual design components that allow users to understand and direct computer hardware and software. Good UI design provides users with a combination of well-designed input methods to voice their needs and output methods that allow the computer to effectively convey results to the user. The most common output device, the display screen, is also one of the most critical components of effective UI design. A poorly designed screen and interface can confuse the user and decrease efficiency. Inefficient interface design also risks loss of valuable users permanently.
What makes good UI design?
“Design can be art. Design can be aesthetics. Design is so simple. That’s why it is so complicated.”
Good UI design is not simply a viewpoint. Breaking down the principles of effective design and establishing a process is far from an abstract idea and understanding how design works is critical in communicating and evaluating design decisions.
An accepted model of breaking down the design process is Steven Bradley’s Design Hierarchy of Needs based on Maslow’s Hierarchy of Needs. Bradley’s design hierarchy is founded on the Maslow concept that a successful design needs to fulfill basic needs before moving on to satisfy needs at a higher level.
“Satisfying needs of one level without having fulfilled the needs of the previous level creates an unstable, inefficient design.” — Maslow (1943)
Applying Bradley’s Design Hierarchy to the Task
Functionality
Before anything, effective UI design needs to be functional. While fulfilling essential functionality needs is of absolute necessity, simply fulfilling basic functionality cannot provide the design with high value. This is reflected in the task at hand. Although Instagram has a desktop version as discussed above, this version is of limited or no value to users as it lacks basic functionality: the ability to upload. Looking back at the responses from the survey, an additional key functionality to consider while designing basic functionality features would be the ability to schedule posts on a desktop device.
Reliability
Once basic functionality needs have been satisfied, the focus shifts to the reliability and consistency of the design. Although reliability needs are dominantly satisfied by UX design, it is important to maintain the visual consistency of any new additions as this adds to the reliability factor of the interface. Style guides need to be strictly followed to ensure the development of a consistent interface.
Usability
Like reliability need satisfaction, usability needs are mostly satisfied through implementing usability testing and good UX design. Although this task focuses on UI design, usability needs cannot be completely ignored. Usability need satisfaction is dependent on creating new features that are simple and straightforward. The features identified under basic functionalities (uploading and scheduling) need to be designed and implemented in a way that is easy to understand and use.
Proficiency
Satisfying proficiency needs is dependent on offering users the means to accomplish more by expanding on basic functionalities. In this case, in addition to allowing users to upload and schedule posts via desktop devices, the inclusion of features such as accessing and analysing insights via desktops and laptops need to be considered. Additionally, adding enhanced photo editing tools within the desktop version may provide users with added value.
Creativity
Creative need satisfaction is the highest level need that needs to be satisfied to create a high level and successful user interface. Fulfilling creative needs generates a dedicated consumer base. In the context of this task, the interface designed will confine to Instagram’s existing visual language and style guide. This is simply because this project focuses on designing a desktop version of the app as opposed to designing a new look for the app.
Psychological Principles of UI Design
“UI is the saddle, the stirrups and the reigns. UX is the feeling you get being able to ride the horse and rope your cattle.”
-Dain Miller, Former Presidential Innovation Fellow at The White House
Human vision is programmed to see structure and the human brain handles visuals in a unique way, which makes UI design an influential cog in the design process. In a way, UI is subset of UX design, and psychology plays an important role in user experience. Therefore, it is necessary to consider the psychological implications of UI design to create effective interfaces.
Keeping in mind that this project focuses on UI design, three most relevant (to this task)psychological principles of UI design have been reviewed to gain a better understanding of creating effective user interfaces.
Von Restorff Effect
Popularly referred to as ‘the isolation effect’ , the Von Restroff effect predicts that users tend to remember the most visually different object from a set of multiple similar objects. This visual distinction can be implemented by altering the physical nature of the object by changing shape, colour, size etc.
Hick’s Law
One of the most accepted principles of UI design is the Hick’s Law which states that a user makes quicker decisions when a smaller number of choices are available. As the number of choices increases, so does the time taken to make a decision.
Gestalt Principles of Visual Perception
The Gestalt Principles of Visual Perception, although established in the early twentieth century, are still valid and provide designers basic guidance for effective UI design. For this task, only Gestalt’s Law of Proximity is considered.
The Law of Proximity states that objects that are close to each other tend to be grouped together as it is the natural tendency of the human brain to cluster objects that are in close proximity.
Applying the Psychological Principles of UI Design to the Task
In order to design an effective user interface for a desktop version of Instagram, the three above defined psychological principles have been reviewed in relation to the task applications of Bradley’s Design Hierarchy identified in the earlier sections.
Von Restorff Effect: The current Instagram desktop menu bar is minimally designed. New features that are added to the interface need to visually stand out for 2 reasons: to place an emphasis on the improved functionalities of the desktop site and to encourage more users to spot these features and give it a try.
Hick’s Law: Currently the desktop menu bar holds three menu options. While modifying the desktop design, it is important to maintain a small number of menu choices to increase response time.Therefore, any new added features on the main menu need to be limited to aid user responsiveness. Including the upload icon within the main menu would bring consistency between the mobile and desktop versions.
Gestalt’s Law of Proximity: Extra features have been suggested to improve proficiency need to be visually grouped into relevant sections to avoid clutter and confusion.
Tools Used
One of underlying purposes of this project was to develop an understanding of the current digital design practices and industry standard tools. Although Photoshop is capable of handling most of the design requirements of this project, a range of industry standard tools were identified and experimented with to choose tools that best fit the purpose. Some of the prototyping tools identified attested to the availability of enhanced tools that focused on providing better solutions tailored to the current task.
For this task, the following tools have been used through different stages of the design process:
Low-Fi Wireframes: Pen & Paper
Mid-Fi Wireframes & Prototype: Adobe XD
Icons & Style Guide: Adobe Illustrator, Adobe Photoshop
Final Clickable Prototype: Adobe Photoshop & InVision
Although similar final results could have been achieved on Marvel App or Sketch, choosing InVision over Marvel was a personal choice and Sketch was avoided as this program was limited to Apple Macs.
Design Process & Time Management
Prototyping Process
Although prototyping is recognised as an efficient method for developing user interfaces, there is an ongoing debate on how ‘complete’ a prototype needs to be for effective testing. This project is in many ways a learning exercise in UI design development. Therefore, in order to truly understand the advantages and disadvantages of the different stages of prototyping, the process has been completed in three phases:
- Low fidelity hand-drawn wireframes with no interaction abilities, thus limiting navigation and flow testing. These were primarily used for the illustration of ideas, concepts and screen layouts. This method was extremely useful in the beginning stage of the task to identify problems in screen layout and establish proof of concept.
- Mid fidelity wireframes and a clickable prototype to identify and match user requirements and to test navigation and flow. This method was useful in identifying errors in the interface design that could not be spotted in a low-fidelity prototype.
- High fidelity wireframes and a clickable prototype with a clearly defined navigation scheme. At this stage, the prototype was created according to specifications outlined in the UI style guide to give the look and feel of the final product.
Specifications
Based on the suggestions mentioned in the survey and the analysis of the task requirements in relations to the Design Hierarchy of Needs, a list of features to be included within the desktop UI design were identified:
- Ability to upload photos and videos
- Provide users with a wider range of editing tools
- Ability to schedule posts for a later time or date
- Ability to access insights on a desktop/laptop device
Low-Fidelity Wireframes
“Give me six hours to chop a tree and I will spend the first four sharpening the axe.”
Wireframing plays a critical role in the design process. Sketching out initial ideas on paper is the quickest and most efficient way to get a sense of the user interface and identify potential problems.
Mid-Fidelity Wireframes & Round 1 Prototyping
Potential problems spotted in the low-fi wireframes were modified and mid-fidelity wireframe prototypes were created to test flow. This clickable prototype was presented to a real user for feedback and comments were taken into consideration for creation of the final prototype.
Key feedback points:
- Ability to “go back and forth” between editing tools and filters
- Indication of a post being successfully scheduled
- Ability to view and edit scheduled posts
- Ability to save posts as drafts
Visual Language & UI Style Guide
The visual language for this project has been adapted from the existing Instagram brand resources, with a focus on maintaining the mood of the brand. A UI style guide for this project has been inspired by and developed from the current Instagram website.
The typeface used is Proxima Nova. Icon design has been adapted from existing Instagram icons and new tool icons have been created in the same style on Adobe Illustrator.
Final Screens & Prototype
Feedback from Round 1 testing was applied during creation of the final prototype screens. Fitt’s laws were implemented while designing the high fidelity prototype to ensure a smooth user experience. Additionally, micro copies were added to the prototype to facilitate user interaction. Screens were created in Adobe Photoshop and a clickable prototype was created on InVision.
User Feedback
“Asking users to adopt new behaviors or even modify their existing behaviors is very, very hard.”
Khoi Vinh, Principal Designer at Adobe
The final clickable Invision prototype was shared with current Instagram users to test product effectiveness. The prototype was tested on three users, who were artists and/or small business owners. Overall, the prototype was considered an effective desktop version for Instagram with users appreciating the ability to view scheduled posts within a dedicated space and the ability to edit images before upload. Users found it helpful that the layout and flow of the desktop version resembled the flow of the mobile app, hence allowing the user to adapt easily to the new interface. At this stage, no negative feedback was received, however, there was some constructive feedback to include clickable screens for the ‘insights’ feature and the ‘view scheduled posts’ feature in order to get a fuller experience of the desktop version.
Future Direction
This project was an exercise in exploring the fundamentals of UI design to solve existing problems in human-computer interaction. Creating a desktop version of Instagram was chosen as a case study as it was understood that the current mobile-only version of the app imposes limitations on a large portion of its users. Feedback received during both rounds show that the prototypes are a good starting point for a bigger and more effective platform that caters to the needs of a niche target audience of artists and small business owners. However, this project focuses on the UI design with little importance given to UX design. The future of this project would be to follow a iterative process of version testing to create an effective and useful product.
