Week 5 — New Metaphors
Overview
Hi guys! For this week’s assignment, I have explored various tools, techniques, and games to generate ideas, including new metaphors and ways of framing or reframing things in the world.
I was tasked to identify a product, service, environment, or platform that I strongly felt about whether it was in a positive or negative way. By utilizing various brainstorming techniques that I have came across on, I decided to choose an incarnation or alternative approach on currently one of the world’s most favorite mobile apps : Instagram!
Why did I choose Instagram?
I am a huge advocate for Instagram as I often use this app as part of my daily dose of social media. The app offers lots of inspiration and enforces creativity through photos, videos, and live streaming from users all around the world. There are millions of users actively utilizing this app for many different reasons: from personal uses to marketing efforts to promote businesses. In my opinion, the app has always released many cutting-edge features throughout its time and has an overall attractive design outlook.
Though, there is currently also a desktop version of Instagram and it does not even compete with its mobile version. I felt like the desktop version lacks an impressive design outlook when being compared to its mobile version and could use a revamp on the design to make it more appealing and add in a few more features for great usability. So, I decided to do a rework of the desktop version. As for the sake of time, the rework is only limited to two webpages: the home page and the profile page.
Surprising fact: The desktop version of Instagram does not have a dark mode feature!
Design Tools
The tools that I have used for this assignment were:
- Figma
- Mural
- Good Notes app on iPad
- Dan Lockton’s Design With Intent Toolkit
It’s Brainstorming Time!
To start out on the project, I began to ask myself these series of questions about Instagram:
- What are the main characteristics of Instagram?
- What are the specific features does Instagram offer?
- How might we enhance the characteristics?
- How might we alternate the visual design?
- How might we make more user-friendly options to use?
- How might we allow for more customization?
- How might we attract more users to use the desktop version?
By utilizing Mural, I have utilized a mind map to clearly define the multitude of features that Instagram offers based on five subcategories that I have labeled: photography, messaging, advertising, features, and shopping.
To view the map, please click on the embed link below!
Dan Lockton’s Design with Intent Toolkit
Additionally, I have utilized Dan Lockton’s Design with Intent Toolkit as part of my brainstorming processes. This toolkit includes various questions and insights for designing things based on certain behaviors and environments. It was a great way to help me determine the main objectives upon my vision of the rework. For this attempt, I mainly focused on the visual design of Instagram’s desktop version.
Here are the five chosen flashcards out of the deck provided that I felt I could accomplish and achieve on by keeping these intentions in mind when initiating the redesigns.
Emotional engagement- Users can have the option to change the overall webpage outlook based on their adjusted time schedules or mood setting
Mood- Ability of having each webpage appear in different themes
Choice editing- Users can customize how much content is being displayed
Simplicity- Eliminating extra icons/texts on the webpages to simplify the overall design outlook, added QR codes to the profile page when viewing to enhance fast viewing on the mobile version
Conveyor belts- Adding options to display more content when viewing
Comparing and Contrasting
Upon brainstorming, I thought there was an importance to consider the differences and similarities between the desktop and mobile versions of Instagram. So, I made a simple Venn diagram to rule out these scenarios at initial thought. I have used the Good Notes app on my iPad to simply draw and take notes. :)
Wireframing
To view the full wireframes, please click on the embed link below!
Final Prototype
Self-Reflection Time!
Ultimately, I am very pleased on the processes and the results of this assignment! I had followed and applied the list of the design objectives that I initially began with. Going through the multiple steps of brainstorming played as a huge influence on determining my objectives and goals. They helped me define a clear and concise structure in efforts to keep me on track of the process.
I admit that it took some time to gather my thoughts and ideas and put them into action when creating these prototype designs for the desktop version of Instagram. Although I wanted to keep on adding more features and capabilities to the rework, I have simplified the elements according to these main points:
- Options to switch between theme layouts: light mode, dark mode, and color mode
- Included a toggle feature to display more content when viewing
- A brand new UI outlook for users to view the desktop edition
- Changed the positioning of how things should appear for a clean-cut look
- Removed a few icons that did seem reasonable to opt-out for the desktop version when compared to the original version
- Added the QR code functionality for viewing a profile quickly when switching to the mobile version
One thing I would like to also reflect on is that this was also the very first time that I have used design tools for digital prototyping. I thought it would be a great opportunity to utilize Figma for as my first design tooI had to learn the basics and figure out how to use a design tool like Figma. I had no prior experience as a UI/UX designer coming from a software engineer background. It was definitely a huge challenge for me to face as I had stressed about not having any progress or the ability to showcase my ideas. I felt defeated at the time being but yet I prevailed! I have to say that this assignment brought out the best practices for me as a starter as I aspire to become a UI/UX designer in the near future! :)
