For this design challenge we had to get a color pallet from the Adobe website by searching for a term and using the first result that comes up. Our given term was “sparkly” which yielded the following pallet.
Creating the magazine cover
Next, we opened up photoshop and started creating our cover. I suggested that we make stars using the pallet leaving a ton of negative (black space) for a simple yet eloquent design. We decided to make the stars form a the Big Dipper constellation (yes I know the Big Dipper is not a real constellation). With my partner’s expertise on text design, we were able to add a really cool looking magazine title “Sparkly” that broke in between the boarder line around the stars. I was really impressed with our final product given the short time and limited color pallet.
To be honest, this design challenge was during a week where I was a bit bogged down by other school work (I am looking at you Physics 1120). So for this challenge I found myself not very focused and it was my group mates who did most of the work. Essentially my group was given a theme to create something like a Haiku in Adobe XD. You can view the final product above.
For this project we were given a photo with a bunch of things going on (like a Where’s Waldo picture) with the goal of using Adobe XD to make text popup when we hovered our mouse over certain locations on the picture.
This assignment was surprisingly easy to do and quite fun. In XD we selected locations where we could put a speech bubble (such as on the tiger dude and SpongeBob balloon) and make it so the shapes that formed the bubble and text would appear only when the mouse was hovered over the location. Honestly we got this assignment done quickly so there isn’t too much to log about this process other than the fact we got to be a bit creative with what each character said on the photo. Feel free to take a look at the final product link above.
Leading up to this project, we learned about using negative space or white space for eloquent and beautiful design. I like to think about how Apple (a company that I am obsessed with) has beautiful products that try to have as little as possible on their designs. The Mac computer for example has a single apple logo on the outside and a single label with the words “MacBook” on the inside. Apple doesn’t even let Intel stick the “Intel inside” sticker on their device. For our project, we were given constraints of just using magazine clippings and words to design a movie poster leaving as much white space left over as well could.
Creating the poster
Unfortunately, I did not get a chance to write my documentation for this project for a while so I do not recall exactly my thought process for choosing the theme Connect 4. Essentially I decided I would do my poster about a fictional comedy called Connect 4 about 4 friends who have to learn to get along. For the clippings, I clipped pictures of chairs, heads, and a wireless icon. I added the movie title of Connect 4 in marker.
I learned a lot about minimal design in this project. I didn’t think such a task could be so difficult with the constraints we had. Conveying a big message with so little can be very tedious. I did like visually how my final product looked but I know I could have done better leaving more of the white (negative) space.
For our project, we decided to use my observation on the fueling station in the Colorado Athletic department. During my observation one of my biggest takeaways was that I noticed that athletes will usually look for a smoothie at the smoothie bar in the back only to find that there favorite flavor is not there. With my group we put together digital sticky notes of what I observed.
During our brainstorming phase, we took the observations looked at all of the ways we could enhance the experience for the student athletes in the fueling station. Some of the questions we asked ourselves were as follows:
How might we make the process to get food more efficiently?
How might we better access smoothies for everyone?
How might we utilize the televisions in the dining hall?
We categorized some of our ideas that answered these questions:
– Tv Trivia
– Smoothie Pre-Orders
– Gameified Tables/Competitive eating env.
– Robo-Ralphie go-go gadget smoothie maker
– Virtual walls with digital ordering
– Conveyor serving
– Virtual wall games and menus
– Game tables & trivia
– Robo-Ralphie silly “AI”
– Leaning bar/posts, lounge seats
– Automated delivery bot
– TV Trivia
We decided to find something that could answer the question How might we make the process to get food more efficiently? For this we narrowed it to “How might we make it easier for athletes to get access to smoothies?” We answered this question with a robot smoothie machine.
The robot smoothie machine
In our final product, we made a poster (shown above) of a robot arm that makes smoothies. Our color scheme was green because it was similar to green colored smoothies. Additionally, because this was in CU athletics, we gave the poster some CU branding as well.
What I learned
For this project, we learned how to use observations and analyze what we saw to generate solutions designed around the people we observed. We used different categorizing techniques to visually organize what we saw and generated ideas, some wacky and others more realistic so we could figure out what was possible.
If you want to learn more about what we did please read the full process documentation.
Problem Statement: How might we help people spend time off of their phones and take advantage of those “phoneless” moments to decompress.
POV: The highly connected nature of today’s society allows for people to stay better connected to the people in their life. However, this comes at the cost of not being able to take time for themselves. Our phones bring us constant pings, tweets, emails, messages, and other distractions. As the world becomes more connected, people find it harder to escape their digital life. Phone addiction has been proven to be a real issue in today’s society and we need to figure out how to encourage people to get off of their phones.
Audience Take away: “Cloud 9 offers a user friendly way to optimize your time away from your devices”
Stage 2 Ideation:
For our brainstorming session, we tried a similar method to what we did during the first week of class where we took the problem statement and came up with as many ideas as we could to address it.
-App that gives you points for not using your device.
-App that punishes you (through fines or embarrassment) for using your device too much. (Used for prototype)
-App that suggests activities to do without your device.
-App that simulates your grandmother’s voice criticizing your addiction to your device.
-App that causes your device to explode when using it beyond a set time (would not comply with TSA regulations unfortunately).
-App that guides you in meditation.
-App that helps detect addictive behaviors and reports its findings to you. (Used for prototyping).
-App that shows you all locations without cell service that you can go hang out.
-Real life mode: Status is posted to all social media apps that you are enjoying real life and are not available at this time.
-Robot that will watch youtube, tiktok, instagram, and snapchat for you and will save anything it finds LOL-ish for you to view later so you wont have any anxiety of missing something.
-Fake phone that feels like a phone but isn’t.
-Fake phone that looks like a smartphone but only has basic non addictive features like calling.
-Bluetooth shock bracelet: Causes physical pain every time the paired app detects addictive behaviors.
-The “No Phone Zone App”: Join groups of friends and compete to see who can use their phone the least each week.
-App that threatens to text your boss a stupid joke.
-App that helps you do Yoga.
-App that helps you find things to do during a Facebook Outage.
-App that helps you plan your time for a plane ride in the air when you are not on your phone because of a lack of cell service.
-Tracks other users and tries to distribute the mountain evenly so there’s the least wait times possible. Kind of like how maps work when it distributes traffic
-App that alerts you if you are just swiping. (Used for prototype)
-Live like your parents did app: App that teaches you how to survive a day without your device and has challenges to encourage going without your device.
-AARP alert bracelet: For emergencies when going without your device.
-App that sets your ringtone to a fart noise causing extreme embarrassment when using your phone in public.
Some takeaways from the brainstorm:
Many of the ideas we generated focused on an entirely in app experience to encourage users to not use their phones. We found this very ironic (an app to get you to not use your phone is experienced entirely on your phone).
Some ideas that our group found the most interesting were the ideas that tried to track phone addiction to show a user that they are addicted to their device and motivate them to find help. Some of the ideas that we thought were the most creative (and funny) were the ideas involving use of pain and unpleasant situations to force a user to change their phone usage habits. We also found the idea about how situations where cell service is not available such as airplane rides are inevitable and there could be ways to optimize those rare disconnected moments.
Additionally, we observed that many of our ideas focused on different parts of the Problem statement. Specifically some of our ideas addressed how to get people off their phones while other ideas gave insight into helping people spend their time away from their devices.
Stage 3: Paper Prototyping
For the next step of our prototyping phase, we took some of our favorite ideas and started making rough sketches of each. Depending on the idea the sketches were either very detailed or very simple. The more detail that we put into a sketch usually meant that that idea was one of our favorites. These were some of our top sketches. One of them was an app that would detect Doom Scrolling called Swiper No Swiping. Essentially swiper the fox would invade your phone and cause chaos until you got off social media.
Stage 4: Digital Prototyping
Moving forward, use Photoshop or XD to create 3-5 mid-to-high fidelity prototypes of your favorite product idea(s) and document the user-testing sessions. What about the idea is successful? What is less successful? What changes can you make in the future to be more effective? What did you learn about how your idea was perceived?
iBoom: (Screen time app that blows your phone up if you go over your allowed phone usage time):
Purpose of this idea: By having severe punishments for not listening to a set screen time, you are using a form of tough love to force changes in behavior faster.
What was successful: The idea got people’s attention when it was demoed. It successfully got people to laugh at the video demonstration.
What was less successful: The prototype wasn’t extremely flushed out as there is currently no UI to set your usage limit nor is there a way for it to be calculated for you. Additionally, it does not solve the problem of how to optimize time away from your devices.
In the future I would like to make this idea more figurative of it exploding rather than literal. The humor in the threat is valuable even if it is impossible for me to make a phone explode on command. I believe an app that punishes you for not adhering to your goals can be very effective.
(I did program a few lines of code in Swift to make the video count down)
Phone Addiction Score (app that looks for phone usage patterns that could be signs of an addiction):
(See next page for full layout).
Purpose of this idea: Essentially, this app would take a revolutionary approach to identifying signs of addiction to mobile devices. The app would track certain usage patterns throughout the week in a variety of apps such as Instagram and youtube to calculate an addiction score. The score would be based on factors such as time spent in each app, incidents of doom scrolling, number of times launched. This data would then be compared against other users and demographics to figure out if the user is showing signs of addiction. The app would also allow users to find resources to seek help and advice on fighting addiction.
What was successful: The app idea was very well received by my friends due to its data driven approach to fighting phone addiction. The easy to understand scoring system was praised as well.
What was not successful: Again, similar to the last problem this app only tries to encourage users to take time away from their mobile devices rather than helping them optimize that away time.
In the future I would love to do additional research on app usage patterns and if there is a correlation between those patterns and device addiction. The addiction score was inspired by the Whoop recovery score as it also takes complicated metrics (albeit health metrics) and converts it into one easy to understand score. This could be an interesting idea.
Our final product was an app called cloud nine.This app aims to optimize the time spent during a flight when cellular service is not available by allowing users to choose “relaxation packages” that offer unique offline off the phone experiences. Cloud 9 can be thought of as an airliner that offers an experience in the air worth remembering. Similar to how typical airlines offer first class and comfort plus packages, Cloud 9 offers packages designed to allow you to get things done that you normally would not be able to do due to the distractions of your phone. The Cloud 9 app in this project allows easy customer planning and purchasing of packages prior to their flight. Just like you plan for a vacation, Cloud 9 helps you plan for the journey there as well.
My personal reflection:
Personally, as someone who has published many different apps in the App Store over the past few years, brainstorming, designing, and getting feedback from peers for an app idea was not new to me. However, I did learn about the importance of group communication. Most of my projects have been done on my own where I was in charge of everything from the idea all the way down to the code. Getting to work with others definitely had some of its challenges for me especially when I couldn’t understand what was going on when the rest of my group had no issues grasping a concept.
Warning: The following post contains a poop joke. If you are allergic to poop jokes please leave and read The Onion or some other high quality humor site.
Some words of honesty.
To be entirely honest, I put off installing Adobe Creative Cloud for close to half of the semester. Despite many software companies moving towards the Software as a Service (SaaS) model, I still have a strong preference towards products that offer a non subscription option (RIP new Notability users). Because of this, I have previously used design software for my own mobile app development that had purchase once and own forever licenses such as Affinity Photo, and Sketch (a little bit). This, in addition to the fact that my Mac is ALWAYS out of storage, I thought I could get away with not installing the Creative Cloud suite.
Unfortunately, the day came when I needed to watch some tutorials on Adobe XD, Adobe’s product for designing user interfaces. After a bunch of SAD operations (my acronym for Search and Delete) I gave the creative monopolist my money and installed Adobe XD.
Building the Button
Opening Adobe XD to my surprise didn’t look too intimidating. It sort of reminded me of the Xcode Storyboard builder. For the first project in Adobe XD, we had to make a new animation for the “like button”. We were given a template to start so I only had to focus on the like button and its animation. For some reason, immature brain thought a poop joke would be a sufficient replacement for the like button. I decided I would create the “give a shit” button. Essentially rather than liking a post, you can choose to give a shit about it, or by not liking the post you are saying “I don’t give a shit about this”. Furthermore, I liked this idea because the only animation I would need to make for the “give a shit” button would for it to drop out of the image. Adding this animation was surprisingly simple and I was able to work on other aspects of my final product such as modifying the template so it fit my change to the button.
My Final Product
Through this short but fun project I was able to get myself more familiar with the Adobe XD interface as well as learn how to add images and create animations.
In today’s design challenge we were instructed to come up with an original version of Twitter’s famous Fail Whale error screen.
Before we started brainstorming, groups were assigned a tone to use in our message. We were given “edgy” as our tone.
When we were brainstorming we considered different scenarios that could be considered “edgy”. For me, I thought that “edgy” could mean something like someone is in a very dire situation such as being tied up. So we thought about the idea of a character tied up in a trap that someone like Perry the Platypus would find themselves. We decided to use the cliche of the hero tied up being lowered into a pit of sharks but instead of a hero it is the engineers that are tied up (though one could say they are heroes).
Creating the Piece
After brainstorming I fired up Affinity Photo on my Mac and we started working. My group mates gave me ideas for a good color scheme while I found license free images online on Pixabay.com to use for the shark and the person tied up. To our surprise we ended up finishing a little early since we were able to quickly find the images online without too many issues.
One of our recent challenges in design foundations was the design process crash course. For this challenge we practiced skills to effectively design for others.
At the beginning of this exercise, my partner and I were instructed to draw a line graph of our days. The X axis represented the current time of day and the Y axis represented how good our bad we felt during that time of day. As you can see from the (messy) example on the left, my day started off poorly due to having some foot pain. As the day went on, I started to feel better and the day ended with me happy (above Y=0). After we finished drawing our graphs, my partner and I took turns explaining our graphs to each other and we took notes on what we heard from their explanation.
The next step in our crash course activity was sketching ideas of potential solutions to problems that I identified based on the notes I took about my partners day. I identified that my partner has had problems falling asleep and staying asleep sometimes due to the room temperature. Because of this, my sketches consisted of multiple sleep related inventions including a smart bed that looks for sleep patterns to calibrate a smart room heater/cooler.
Constructing a model out of Arts and crafts materials.
Finally, we were given some arts and craft materials to try to construct a model of two of our ideas. Due to the limited amounts of materials we were given access to (I am vouching for using LEGOS in the future) the models were relatively simple. In the photo to the left I made a smart heater out of a cup and pipe cleaners and a smart bed out of construction paper and popsicle sticks.
What I got out of this
This activity allowed me to practice a technique for designing for others using empathy. The note taking of another person’s day as they explained their ups and downs allowed me to find potential problems that could be solved creatively without my partner necessarily knowing what the exact problem that they needed to solve was.