Gift-Giving Experience Design Thinking

• 

• 

• 

• 

If you know me well enough you’d know that I am a very creative being and like to think of cool, different and interesting ways to portray something. As you may know from my previous posts, Design Thinking is a human-centered idea for processing creative problem-solving. 

My class was introduced to an insightful crash course video on Design Thinking where we were to spend about an hour and a half with a partner. We were to go through the whole process of Design Thinking including empathy, define, ideate, prototype, and test. The crash course was centered around the gift-giving experience and how we as humans can ultimately think deeper about gift-giving. 

My partner Ashley and I decided to try this crash course over Facetime where we both told each other what our last gift was to others. My gift is a Dunkin’s gift card to a friend and Ashely’s a wedding band to her husband on her wedding day. As we were telling each other about the gifts we gave we had to dig deeper which brought up questions like why we gave the gift and my question to Ashley, what made her get married. The dig deeper section of this crash course was very insightful because you got to understand the other partner’s reasons as to why they gave the gift and much more. 

As we moved along in the crash course we needed to define a problem statement which is the “challenge” or problem we need to address which is gift-giving. Ashely’s problem statement was “Ashley needs a way to show love because she’s getting married”. This part of the Design Thinking process can be a bit tricky and difficult to do as I learned this when I first heard about Design Thinking. The question that you pose is a question that may change later on in the process of your project which ultimately makes Design Thinking a non-linear process. Because I posed this question for Ashley I can now get better ideas into how she can show her love, which showing love was her reason for the wedding band to her husband because she is getting married. 

There are many ways people can show their love to their significant other. In the ideate phase of this process, I thought of five different and out-of-the-box ideas on how she can show her love to her husband, another form of gift-giving. In the image above, you can see the five different ideas I thought of. I shared my idea with her and she loved the idea of traveling around with her husband to different places. Going off of her excellent response I made a prototype of the what I came up with. 

In the end, I came up with designing a pocket map designed for both her husband and herself to take along with them on their travel destinations. The map can be unfolded from the inside to show a big map where I explained that they can both pin it up on a wall and throw a dart and travel to wherever it landed. They can also both write their favorite places, etc, on the map. Getting constructive feedback from her was great in the process as well to get me thinking of things to change. 

Overall, this helped me better understand and remind me of the process of Design Thinking. I think many people, not just UX Designers, can learn from this process!

Here is a link to the PDF of the exercise: PDF

Design Thinking!

• 

  My Babybook App

• 

  My Babybook App

In a previous class of mine, I have learned about Design Thinking. Design Thinking is based on the human-center core and best for creative problem-solving. The process of Design Thinking focuses on people, will result in better products and services.

The first step in the design process is empathizing with the people or customers you are trying to reach. Without this, you will ultimately fail this design process due to the lack of understanding and empathy. I like the example from a TedX video by Tim Brown showed. He states that it is finding what humans need and want where Design Thinking can come into play. But, first, you need to understand different cultures and people in order to begin.

Imagine your community needed more stores in your area and the next closet shopping center was 30 minutes away from where you lived. This is a need in the community and developers understood what the community was upset about in which they empathized with the community. Later on, these developers went to the drawing board and thought of where they would place the stores in the community. But, they had to go through many other steps in the Design Process to obtain success in building new stores.

In an article by SAP, the author describes Design Thinking as a design methodology and a problem-solving method. You can get very creative in the process as I did in a course related to this subject. What I have learned about the Design Thinking process is that it is non-linear. This means that you can come back to any point of the design process when something may not go right or is not as successful as you thought it would be. In the image I provided for this post, this was an assignment I did during my undergrad making my Babybook app. I got creative with the idea of having a social media platform for babies. Though this is pretend the creative process allowed me to come up with something different and funny.

The non-linear steps in Design Thinking are Empathy, Define, Ideate, Prototype, and Test. The process can be used in practical problems like the example I gave above about the grocery stores. The third phase of the Design Thinking process, Ideate, is a step that I enjoyed most when learning about it in my previous course. This step is where you are thinking of many different ideas that you can think of. There was a video I watched about a creative Bootcamp that individuals can learn about creativity and get better at. Creativity comes in handy in this design step. It is important to have a creative mind in this field and come up with outside of the box ideas for a project. I will consider watching this video as it will help you think about creativity and get better at it.

Without Design Thinking, many new inventions wouldn’t be as successful as they are. Humans are the main focus of the Design Thinking process and with that great things can happen. As Fast Company states “Design Thinking describes a repeatable process employing unique and creative techniques which yield guaranteed results – usually results that exceed initial expectation” (FC).

Course Reflection

In the Web Technology course I have taken, I wanted to reflect on what I learned and where this information will possibly take me. I picked this class to get an understanding of basic HTML and CSS. Another reason I was interested in this course was that knowing this topic at hand with the field of UX Design could come in handy when I am at the job place. But, I think building your very own website and designing it yourself is an excellent idea to learn about with HTML. 

There are many fascinating things I have learned in this course. One of the modules I enjoyed was the web development process. This included making mood boards, color palettes, site maps, and wireframes. I enjoyed this a lot because it is a creative part of making a website and developing it. Making a wireframe was one of the topics I was interested in diving into. I think this is the part where I can get very creative and make a site look better than it existed before. These different creative aspects will help me a lot in the future within my field. 

Another part of the course I think that will be helpful to me is learning to customize my website. This is important because content and presentation are important I believe, especially in this field. When your audience or users look at your website they want to come to one that is presented very well and most importantly it works. Visuals are also key to getting your audience to come back to your posts and want to look at your blog posts. 

Image optimization is a term I have heard of before but I never really fully understood its importance and what it can do. Taking an image that is very big and bringing it down to size so it can load much faster in a browser was very eye-opening to me. I didn’t believe that making a file smaller was going to make the image look relatively the same but it did. In the class, we were tasked to optimize every photo we used which was great practice. This will be helpful for me when I want to upload an image that’s too big and I know what to do to bring it down to size.

Learning HTML and CSS in this class has taught me a lot about websites and how to code. Though I only know the basics of HTML this class taught me a lot about how to customize a website myself. I have always wanted to understand the back-end of a website and I finally got to understand a bit about it. Using Dreamweaver was helpful to use when coding and see the live code while working as well. In this course, I thought uploading the codes to MyWebSpace was great to see the live HTML code I had done myself. 

I learned a lot from this course that I didn’t know before. The professor was very helpful and was always there when I had a question or needed to better understand something in the course.

Coding Portfolio Page

Template Page

Making my portfolio page was a pretty impressive process. I used the site W3schools to help me out in this process. Using a template that I thought worked best, in my opinion, was neat to manipulate in Dreamweaver. Some of the elements in the template that I was given didn’t fit what I wanted my page to look like so I opted to remove them. Copying the code from one of the W3schools templates the manipulation of the code began.

The way I figured out what code goes to a certain element was by opening the split-screen and double-tapping an element code to see what part of the website was highlighted. Though I don’t know what the codes were I got a pretty good idea what they do due to the element appearance.

Code from W3schools

One issue I had with this code was trying to manipulate the color of the text in separate parts of the template. As you can see in the picture above this code came with all texts in one color already. I tried to take h3 out of this style code and create a different color code, but for some reason, it didn’t work. If you can see on my website page in this link the words are fairly visible and hard to read. I tried changing the color to one that would look suitable on the page but it changes all of the text colors including the bar graph text color.

Making this mock portfolio page was interesting. Looking at more complex code elements in Dreamweaver showed me how much more complex coding is.

First Time Using CSS

CSS is a program that controls the appearance and layout of webpages. There is a lot you can do with CSS and many tags you can incorporate into your code to make your site look much better.

I have never used CSS before so this was my first time using it. Surprisingly, it wasn’t as hard as I thought. I used a previous HTML page on my page and inserted some CSS tags into the page. As you can see in the picture above I set up three different colors for the different texts on the page. I changed three different things on this page. One of those was the h2 section of the text. In h2 I changed the color of the text to the color red, changed the font to Times New Roman and managed to increase the size of the text to 200%.

In h1 I only changed the color of the text. For the paragraph, p, I decided to change the whole color of the text to hot pink to see what it would look like. I also changed the text font to Palatino and the font size. Overall, CSS was easy to use in my opinion and I figured out quickly how to use it. What I think is interesting is that you can use the CSS and put every tag in that you wanted instead of plugging the tags in after each paragraph as I did in the HTML code. CSS is interesting to use the possibilities are endless of what you can do with it.