Categories
Design Foundations

Design Foundations: Color Zines

Our final magazine cover.

Selecting a color palette

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.

From Adobe Color

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.

Categories
Design Foundations

Design Foundations: Hi…Cool!

The first page of our final product.

View the final Adobe XD document

The Brutally Honest Short Project Summary

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.

Categories
Design Foundations

Design Foundations: Where’s Warhol?

The background image we were given

View the final Adobe XD Product here

Where’s what now?

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.

Getting started

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.

Categories
Design Foundations

Design Foundations: Space

My Final Product

Minimalist Design is why Apple Products are Sexy.

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.

Finishing up

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.

Categories
Design Foundations

Design Foundations: Space Jam

Our final product.

So this is not about the terrible sequel that came out this year?

No. In this project, we had to observe a space in our community and observe how people used it. After our observation we had to design a way to enhance that space.

The Observation

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.

Brainstorming

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:

Realistic:

 – Tv Trivia

 – Smoothie Pre-Orders

 – Gameified Tables/Competitive eating env.

Difficult:

 – Robo-Ralphie go-go gadget smoothie maker

 – Virtual walls with digital ordering

 – Conveyor serving

Interactive:

 – Virtual wall games and menus

 – Game tables & trivia

 – Robo-Ralphie silly “AI”

Passive:

 – Leaning bar/posts, lounge seats

 – Automated delivery bot

 – TV Trivia

Our solution

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.

View the full process documentation

Categories
Funny Technology

WristTalk: The Apple Watch app that helps you get the girl.*

The WristTalk app icon (Yes this is a real app I made)

Awkward Silence: A Nightmare.

Dates can be stressful. Not only do you have to make sure you are looking your nicest, but you have to figure out so many things. Where you are going? What are you wearing? What time you are going. Should you hold her hand? Would she find that poop joke funny? Now let’s say you figured all of that out. You are on a date having fancy dinner at Chuck E. Cheeses and everything is going great. Suddenly, out of nowhere you find yourself out of conversation. You begin to stress, looking around the room for something to force your creative juices to make some good conversation. You glance over at her, she begins to laugh uncomfortably as you turn bright red. But luckily for you, you have the perfect remedy up your sleeve (literally, unless you are wearing short sleeves).

Question on WristTalk

Introducing WristTalk. The app that removes the “silence” from awkward silence.

WristTalk to the rescue! WristTalk is a 100% free Apple Watch app for anyone who is desperate enough to search for an app to help them on dates (including me). Packed with over 100 different conversation starters available right on your wrist. Simply open the app on your watch and ask a question and boom, you will be chatting up a storm. With questions ranging from casual topics such as “Would you be a professional bank robber if you could never get caught?” to questions that can hint at something larger such as “Where was your first kiss?” There are conversation starters for every stage of a relationship whether you are stuck in the friend zone or going for your two week anniversary. Before you know it she will be bragging to her friends with how good of a conversation maker you are.

The menu page

Features to prepare for your next date

In addition to combating awkward silence, WristTalk has features to help you be ready for peak conversational performance on your upcoming date. With the favorite feature, you can hand pick questions prior to your date that you know she would love. Additionally, with the completed feature, you can prevent yourself from going into grandparent mode and accidently repeating a conversation starter. Best of all, after loading WristTalk once, all of the questions are automatically downloaded and will work online and offline, so even if you are having a romantic moment at the mile high club, you can be sure that you will always have great conversation.

*This statement has not been approved by the FDA, NSA, CIA, NCAA or any other person other than myself. Use at your own risk. Removes silence but not awkwardness.

Download WristTalk today for free on the App Store:

App Store (only available on Apple Watch)

Categories
Design Foundations

Design Foundations: Alone Time Process Documentation

Our final product starting screen.

Group Project process blog (written in Google Docs):

Final product link: https://xd.adobe.com/view/55e4ea6f-6065-49a8-b3e2-3bd648f90340-00b7/ 

Stage 1: Problem statement

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):

https://drive.google.com/file/d/1oJxENZpIAJzG48DDFoji3xnXYV2eA5Hu/view?usp=sharing

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. 

Final product: 

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. 

Categories
Design Foundations

Design Foundations: Learning Adobe XD

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.

The “Give a shit” button.

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

Video of demonstration

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.

Categories
Technology

Throwback Project: The EPXC App

One of my first apps developed for my High School Cross Country team alongside XC co-captain Zach Spears. One of the winners of the 2019 Congressional App Challenge.

Our 2019 Congressional App Challenge submission video.
Our Congressional App Challenge Certificates. Jake Derouin (left), Dean Phillips (center), Zach Spears (right)

Local Eden Prairie News Article on the app

Minnesota Rep. Dean Phillips post about the app

Special thanks to Zach Spears for working on this with me. Wish you went to CU Boulder too (sorry the Wisconsin Badgers are inferior).

Categories
Design Foundations

Design Foundations: Fail Whale

In today’s design challenge we were instructed to come up with an original version of Twitter’s famous Fail Whale error screen.

Twitter’s famous failwhale error screen. Credit: Twitter

Before we started brainstorming, groups were assigned a tone to use in our message. We were given “edgy” as our tone.

Brainstorming

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.