INTERFACE AESTHETICS
12/7/20 - Book Library App
I tried something different with this interface and made it in dark mode. I feel like dark mode and books just make more sense.
In "My Library":
-
see the books in a large, list view (image, title, author)
-
Label to see if "lent out" or not (and a description of who it's lent out to)
-
little "i" button in the corner in order to see more information about the book, and also to change the status
​
In "Find Friends"
-
see all of your friends
-
search through all of your friend's books
-
tap on their profiles (Jimmy's profile is built out)
-
view his library (almost identical to "My Library")
-
search button in top corner to search for books
-
request button for each button that brings up a yes/no pop up
​
In "Add Book"
-
Add book image
-
add title
-
add author
12/2/20 - Design Sprint 2 Idea
I really like the personal book library idea, so I'm going to be doing that one. I've seen the Apple Books app (it's been a while since I've looked at it) and I used to use a kindle fire, so I sort of have an idea of how these apps are usually laid out. The biggest difference is that the app is about your own personal library, so there are other screens to account for. I think I'm going to have the different screens all navigable by the nav bar (except for the screen that shows which book is lent out to who; that could be shown in the library or when you click on a button in the library).
11/22/20 - Running Interface
I was inspired by the bar graphs that different IOS functions use, like Screen Time in settings. The idea is to be able to automatically see if the app thinks it's a good day to run or not, indicated by the three different colors. The bars also stretches across the chart for whatever the user would input as their availability to run. Then the user can tap on each of the bars to figure out more information, like the temperature, type of weather, and the timeframe that they put in. *I also did not use the data from the weather website, I kind of just made it up, sorry!
11/18/20 - Data
The reading by Tufte had mostly expected information, but some of it was a little surprising. Some of the obvious points were to show the data at all costs and to remove all non-data-ink. But one thing that did surprise me was that a simple bar with a number overhead had several (5 or 6) redundant qualities to it. Apparently all that was needed was a single element, and that would be considered enough, and maybe with more context that would be true. The revision section was informative, but I think in most situations it's going to be completely up to the designer to make those changes; there is no obvious rule of thumb with the revisions.
​
The video infographic had the perfect amount of data-ink, in my opinion. I think maybe Tufte would disagree and find some irrelevant ink, but since the data is being given in a much more creative way (using graphics and animation), I think there's bound to be some extra ink due to the aesthetic.
11/16/20 - Accessibility Project
Black and White: The first thing I noticed when putting my phone in B&W was that there were several different color options that could be used. Based off of the names that they were given, I'm assuming each of those different color modes was for a different type of color blindness (most likely to aid in the colors that are hard to distinguish/can be seen). I navigated through the settings app a little, and I started to realize how much I rely on the colors of the icons to distinguish the different options. I also swiped down to see the control panel, and I immediately noticed how I perceived the WiFi, bluetooth and cellular icons. I then looked through youtube for a little, but I personally get used to watched black and white TV shows/movies pretty easily, so that wasn't that weird. Also I use youtube in dark mode so there isn't much color as far as the interface goes to begin with. I scrolled through the slack app as well as the app store, and I found that everything starts to look the same and it's difficult to catch any patterns that could indicate that things actually are different. Overall, my whole phone felt way less dynamic.
​
VoiceOver was definitely cool, but also a pain to use. There's definitely a learning curve, as there is with all technology, but this is a little different since I was not able to use one of my senses. I think since I know how quickly I can use my phone right now, it was frustrating to have to learn the gestures as well as wait for Siri to tell me whatever my finger was hovering on. I mostly stayed within the settings app because I was scared that it would take me forever to navigate back. The audio feedback as well as the haptics do make the experience pretty immersive and detailed, which I think is a huge plus for those who have to use their phone in this mode.
11/11/20 - Accessibility
The reading about the need for accessibility for everyone is pretty valuable. I always think it's cool to see something that was universally designed, like that set of stairs with an integrated ramp. Designs like that make a set of stairs much more accessible for a ton of people with different needs. I think screenreaders are also like this, because they help those who might be visually impaired, but could also be used by those who would prefer to listen. The biggest takeaway from the second chapter was the difference between using the word "disabled" and the phrase "has a disability". Using one or the other is not unanimous, but there seems to be more preference towards the phrase and not the noun.
​
The video was awesome. I think it's important to see and realize that accessibility is necessary for everyone, not just some people. I also liked when he said that "for you it's convenience, but for me it's independence".
11/8/20 - Student Dashboard - Grids/Colors Updates
I felt like my app already had a grid in place, and that's mostly due to the fact that I used a lot of existing IOS components. As for the colors, I really tried to incorporate my main seafoam green color in a different way so that the readability wouldn't be affected. I made the background color the seafoam green for both the schedule tab and the message tab. I decided to leave the tab bar highlighted colors and the 'compose new message' as the default IOS blue because those feel like they are recognizable and intuitive to the user.
11/4/20 - Grids
The first reading/slideshow wasn't really anything new. I always associate grids to either swiss style or web design. I found it funny that we're supposed to "let tabs be tabs" and not follow the rules of the grid. I do think it's interesting how many columns the Yahoo website ended up having, because I thought that many would be overkill but it works.
​
The next grid article for mobile again shocked me at how many columns can fit in the screen. But I'm starting to understand that it's unlikely that there will be 12 different things across those 12 columns; it's to make sure that there's a good variety of ways to precisely fit elements in the grid.
​
The color reading definitely focused on color interaction and how it is always compared to itself. I liked how he said that we are able to single things out (and they can stand alone), but color always interacts with and can be compared to itself.
11/2/20 - Student Dashboard - Edited
Three Tabs: Home(Main Dashboard), Schedule, and Messages
Navigation controller: clicking on the 3 dots on the weather widget to view the settings
Modal Controller: Schedule -> tap "View" on the first module (to view the assignment information)
​
For these edits, I downloaded the IOS 14 GUI for Figma and was able to easily use different icons, components, and screens that emulate IOS 14. I tried to keep my own design for the dashboard, but I changed up the schedule and messages tabs to look more "IOS". I think the fonts and the icons make the biggest difference when it came to my design.
10/28/20 - IOS 13 Design Guidelines & UI Design Dos and Don'ts
Overall, the IOS 13 design guidelines article was very informative and useful. A couple things that stuck out to me:
​
-
it's a good idea to design for the narrow screen first, because it will almost always translate to a wider screen. But the reverse is not true. I feel like this is a good rule of thumb and something that I will definitely consider for future projects.
-
the different rows of a nav bar are something I've never thought about, but it does take up space on the screen.
-
the tab bar is called the tab bar and not the nav bar...
-
it seems like good practice to never use a drop down menu. I always thought drop down menus were ugly anyway.
-
have to consider dark mode when designing. I feel like this would drive me a little crazy.
This article is full of information that adheres to IOS guidelines, and I thought it was super helpful. I feel like it's very difficult to design an interface in a way that looks stereotypically "IOS", and this article proves that there is so much more to consider. I like that there's numerical standards, which could possibly make this type of design a lot easier to achieve.
​
The second article had some good tips, although I don't think many of those things were all that surprising. Most of the advice seems to be basic design knowledge, but the tip about the hit targets was new to me and definitely something to consider.
10/26/20 - Student Dashboard
I tried to make different modules and group everything according to what I thought was appropriate (i.e. grouping the messages from the professor and friend into one module). I also made all the very important info in red, which I think breaks up the screen a little so it's easier to look through. I also made the modules different sizes like rectangles and squares so that it wasn't so monotonous to look at. I feel like I put the important and quick information near the top, and the less important stuff (like the pictures and school menu at the bottom). I feel like I could've made the square modules into smaller rectangles to save some room (and have less scrolling), but I also like the aesthetic of it.
10/21/20 - Readings
Emotional Design: I enjoyed the author's little story about his teapots and how he described them within the terms of visceral, behavioral and reflective design. I think his explanation and proof of why emotion is important in design was extremely long winded; to the point that I started to skim the last couple pages of the prologue. I think that it makes perfect sense that emotion is a very important and integral part of design, because you always want someone to feel a certain way about your product.
​
As for the other articles, I felt as though they discussed pretty basic design principles that I'm already pretty familiar with. Part three of the "Improve Your Designs..." article gave some examples that I had never really heard of. The ideas seemed familiar, but I had never heard of terms like 'continuation' or 'common fate' before.
I think that the Google Maps app is organized really well. It has a lot of information and different tabs to navigate to, but it still leaves a ton of room to look at the map.
In contrast, I think the apple maps app is isn't that great to look at, and it seemingly has no information to organize. Maybe it's because I only use Google Maps, but this app doesn't feel as robust or detailed.
10/11/20 - First Prototype
10/7/20 - User Interviews and Interface
The five act interview video was very insightful and helpful. I specifically found the 'context questions' step surprising, because I really had never thought about asking those kinds of questions. Normally, I would have just skipped over that part, and assumed that whatever prototype I'm testing out would apply to them. This step seems very necessary to gauge each specific user and how they personally would use the app, because not every user is going to start from the same jumping point. I also like the debrief at the end just to get a quick overall consensus on how the prototype worked in the user's eyes.
​
A user interface that I really like is Spotify. I use it everyday, on mobile and the desktop app. It's the kind of app that feels decently intuitive, and is organized in a way that makes sense to me. I also like the playlists that Spotify makes specifically for each user and the overall song recommendations.
10/5/20 - Group Work
IDEA
An app that generates spontaneous, surprising trips including travel route, suggested food and scenic stops, gas stations, rest stops, and other necessities for a road trip, and the final destination with lodging options. The user can input their desired type of trip, travel radius, and duration of trip, and then select from randomly generated adventures. The app will then begin mapping the user and take them on a spontaneous adventure.
​
USER PERSONAS
Emily
-
22 years old
-
Recently graduated and works a 9-5 job in advertising
-
Lives in downtown Denver, Colorado
-
Enjoys traveling on weekends
-
Adventurous, spontaneous, and social
-
Wants to see new places, but doesn’t know where to start
​
Pam
-
34 years old
-
Married and mother of 4 young children
-
Works part-time as a lifestyle coach, with a spouse that works full-time
-
Leads a hectic, busy lifestyle
-
Enjoys spending time outdoors with her family
-
Values a healthy, active lifestyle
​
Jobs to be done
-
Plan a trip in minimal time
-
Know how to get to destination
-
Know about the destination
-
Plan activities on the way and at the destination
-
Budget?
-
Provide a spontaneous travel experience for adventurous travelers
9/28/20 - Figma Link
9/22/20 - Atomic Design Methodology & Design Systems
I found this reading on interface design to be surprisingly enlightening. The slight chemistry analogy makes sense all on its own, and same with the templates and pages. Interfaces are comprised of singular atoms in order to create bigger and more concrete ideas. I think that the transition between organisms and templates is choppy and doesn't make much sense, and I don't think the author had a valid reason for such a transition. I think templates and pages could still be seen as more complex organisms, but I understand that those concepts aren't as clear as templates and pages to an interested stakeholder. Overall the analogy makes so much sense and is a very useful way to think about interface design.
​
As for design systems, this practice seems much less straightforward. There's a lot more complex components that go into this design process, but to me it seems like it could result in a more comprehensive and well-done project. I think there's more appeal to a simple 5-step design process like the chemistry analogy, but the design systems technique states specific components and parts to an interface design. Being more specific in the starting processes, in my opinion, ends up being the better option.
9/21/20 - Figma
I actually had to use Figma to create a small prototype for my Human Centered Interaction class over the weekend, so I have this prototype for a Pet Adoption application. It's pretty simple, but Figma overall is extremely easy to use and very intuitive. It seems like it's very difficult to make things update, like a shopping cart or adding something to a list (without having to copy a whole new set of screens that cater to the new update). It's a little clunky design-wise, so creating anything more than basic is difficult. To me, prototyping in this way means that you can pick and choose the features that you want to show off, while leaving some other features untouched (and saving time).
I've used another prototyping tool called InVision quite a bit, however. To me, these two applications are extremely similar (I can't even thing of any differences). Below is an a simple app that I prototyped for a class last year with InVision. The idea of the app is to have all of your important information from specific apps on one scrolling screen. I personally designed all of my screens in Illustrator and then brought them into InVision just for the buttons/scrolling.
(Scroll through home screen, try to 'Add' Podcasts, then look at home screen again. Also can change the color scheme under settings (TT Commons)
9/16/20 - Interface Project
For this project I decided that I wished I had more interfaces for riding a bike. I'm not really an avid bike rider, but it's a fun activity from time to time. Below are some quick sketches for some interface ideas that I had that someone could find useful when riding a bike. (descriptions below)
Sketch Descriptions:
1) This helmet would have a screen attached to the visor of the bike helmet. It would be clear so that the cyclist could still see through it, but it would also display simple stats such as speed, directions/maps, and whatever music their phone is playing.
​
2) This helmet would have speakers in the ear area. This allows the rider to be able to listen to music and navigation while still being able to hear outside noise for safety.
​
3) This final helmet would have indicators/blinkers on the back of the helmet that can be controlled by a smartphone app or maybe by a small remote that can be attached to the handlebar of the bike.
​
4) This would be a bike that has a built in screen that would display the things that idea #1 would (speed, directions/maps, and music), but on the handlebars. This could also be an additional attachment or a phone app with the correct hardware to hook up to the bike.
​
5) Lastly this is an umbrella that can be attached to the bike to keep the cyclist dry during rainy weather. The aerodynamics might be less than ideal, but at least the cyclist stays a little bit dry.
​
My Final Pick:
I like idea #1 (helmet visor interface) the best. I think it seems somewhat realistic and kind of a cool piece of technology to get to use. It has the general idea of smart glasses but for a more specific audience.
9/14/20 - Creative Selection (CH6)
This account of an engineer almost quitting Apple to working on one of its most influential pieces of technology is extremely interesting. Around once a week, there would be a meeting/critique of everything that everyone worked on regarding the new smartphone. There would always be feedback to give, and it was expected of the engineers and designers to tweak their pieces of technology in terms of the feedback it received. This would ensure progress, and it was the one essential expectation. This makes me think of times when I worked on semester-long projects and was required to have something new to show, based off of what I had already done. Whenever I would show these new updates, I never really felt like I had made it anywhere far, but the main goal was to close the "prototype-to-product gap", as said in the reading.
I thought the different ways these engineers tried to make a touchscreen keyboard work was very interesting, and ridiculous. The "blob" keyboard seems like a nightmare, even though it did slightly solve a design flaw the team kept running into. It just goes to show that bad ideas need to happen in order for good ones to happen. The biggest takeaway from this reading is that whatever you are making, it helps a lot if the artifacts are "concrete and specific". This means that you must be able to show off your idea, not just talk about it. A strategy like this works so well for companies like Apple because it creates a cycle of demonstration, feedback, and further iterations.
​
9/10/20 - Design of Everyday Things (CH4)
In chapter 4 of "Design of Everyday Things", the author discusses certain constraints that a designer considers when designing a product. The first on is physical constraint, which means to make the product in such a way that there is only a few (ideally one) ways to use it. There are products such as Legos that make this physical constraint less of a problem. Cultural constraints are also something a designer has to think about, and this mostly has to do with things that we know to be acceptable within our own society (and are likely things that will change over time). Semantic constraints are described next, and I understood that as designing within boundaries that make sense (like the users knowledge of the situation and of the world), which just like culture, can also change over time. The last constraint is logical, which in one way or another could indicate if the user is using the design correctly or if they assembled it wrong. I thought the part about conventions was interesting because they are essentially cultural constraints. The thing is, conventions vary from culture to culture which can be hard to design around, although it is still some good information to collect.
​
The New York Times article essentially discussed what the first iPod was like during the time (in 2003; 2 years after the initial launch). Overall, the iPod was described as a super innovative and exciting piece of music technology. It perplexed seemingly everyone that THAT many songs could fit into such a minimal and sleek design. It was also said that the iPod had this "aura" about it, which could've been due to how innovative and exciting that technology was at the time. It feels like Apple continues to keep up that feeling and aura to this day.
9/1/20 - "Jobs to be Done" Project
My job to be done is a recent one, and that's finding some seating for my living room. I just moved into this apartment, and finding a seating option for a place I'm moving out of at the end of the school year has been tricky. I need something to sit on other than the floor, but I also want something practical (and inexpensive). I also am not sure if I want to order something online, or if I want to see it in person. This is important to me because I'm a homebody and spend a large amount of my time at home, so I want to have the option to change up my scenery when my room gets boring. It's also important for when I want to invite people over but don't quite want them in my disaster of a room.
​
Some possible options are:
-
just buy a simple couch from Ikea
-
order something inexpensive from a reliable online store
-
get some fun bean bags
-
install a hanging chair/swing (which would definitely cause me to lose my security deposit)
-
buy a singular chair and place it in the center of the room
-
buy patio furniture (not that it's any more affordable)
​
The solution that I would hire would be to find something online. This is the most ideal solution to my problem because I don't have a lot of free time to go furniture shopping, so doing it online is the best option. I also think I could find a good deal and a lot more variety by taking the risk of shopping online. This way, I could spend minimal time/effort/money to find an acceptable solution to my empty living room.
​
After hiring the solution, I would have to do the actual searching for the seating. I would need to decide on a couch, two armchairs, or anything in between. Then I would need to decide on the website I got the seating from as well as a budget that works for me. After all of that, all I would need to do is wait for it to arrive, and then my problem is solved.
​
Another unexpected solution to hire for this job could be to build a park-like bench by hand. Someone who is more crafty and skilled with power tools could definitely accomplish this. This also could still be cost effective as well as practical to sit on. This type of person would have much more free-time on their hands as well as the patience to build their own furniture. A homemade solution is much more likely to contain the character of the person living in the space in addition to more fitting measurements.
​
8/31/20 - "Jobs to be Done" & Personas
In the HBR article about "jobs to be done", the authors discuss how companies tend to focus too much on correlation (brought on by the use of big data) and fail to realize that the reasons a customer might buy/like a product might be undetectable. This leads to the "jobs to be done" theory. This theory or idea tries to identify exactly why customers will "hire" or "fire" a company's product depending on how much they like them. This was interesting to me because this theory understands the circumstances for why the customers would want to buy the product, and focuses less on the small details of each specific person and trying to find trends within that. It seems like the most successful businesses follow this type of model in some way, shape or form. Overall, it seems that finding out the particular needs and concerns of the customers and ability to turn inadequate solutions into adequate ones is how companies are able to be truly successful.
​
The article about personas was very familiar to me. Rather than do specific research about the needs of current or prospective customers (like the article above explains), companies create 'personas' in order to emulate real people that would use their product. Personas are a very concrete and specific design that describe individuals that would used a product, normally used by companies in the early stages of product design. Something I thought was interesting was that personas can use useful even after the product is created or launched because it could be helpful when trying to work with other companies in order to give an idea of who the ideal user would be.
8/26/20 - Design is a Job (CH1) by Mike Montiero
In the first chapter of Design is a Job, the author ultimately is describing the the real role of a "creative" (in this case, a designer) and how they aren't as "magical"as some people may think. They have to take in feedback, even if they think it's pointless and useless. The author also discusses how the designer chooses their specific area of interest based off of a problem that they want to fix, within a set of constraints. One major thing I took from this reading is that if a designer is trying new and innovative forms, those forms still must serve a purpose, or else they are just there for the sake of being there. The author also makes a point that anything a designer makes needs to be sellable. Also, respectfully insert yourself and don't wait to be asked.