Reactive User Interfaces: Final Project Proposal // Konrad Krawczyk

The original idea I had for the final project was to create a complex app for On Century Avenue. In fact, the idea was to create a sort of Century Media app, as i got several rumours about OCA and Feast (the NYUSH art zine) being merged. However, the project for the organisational/logistic reasons would most likely remain unused. Firstly, the decision turned out to be that OCA and Feast will become separate media outlets, but on the same server. Secondly, the current pages are not using WordPress and rely heavily on editorial/graphic work of people who have no experience with coding whatsoever, so even despite the fact it’s fairly simple to implement a Reactive front end to WordPress API, it will definitely have an extra cost in terms of having the entire editorial team go through all changes in content creation settings.

Therefore, I decided to go for the idea that was second on my priority list, but might be interesting to explore.

My idea is to create a database and search engine for future flights within the United States, with the functionality of flight prediction.

The main question the app would answer would be: is there a reasonable possibility that my flight will be delayed at a given time, day, place and airline?

Last semester in Amsterdam, I studied machine learning. Together with Dorian Buijse, my fellow classmate from the Amsterdam Uni College campus, we developed a prediction model of flight delays within major airlines and airports in the US. Our dataset consisted of all US domestic flights from year 2015, but we filtered it very thoroughly due to a lack of computing power and time.

The features we used for prediction were:

–  Month (numeric)
–  Day of the week (numeric)
–  Departure time (numeric, converted to full hours)
–  Airline (converted to dummy variables)
–  Departure Airport (converted to dummy variables)
–  Arrival Airport (converted to dummy variables)

Using a multi-layer perceptron neural network, we achieved an accuracy of 65%. Given the complexity and difficulty of extracting relevant features from the set, it was a relatively decent score, but I’m sure it can be improved if extra features are added. This gives a possibility for an app that would predict whether or not a flight delay is likely.

Competitor analysis

Google Flights

A very well-designed, clean (Material-designed of course) and distraction-free way to find information about current flights and find bookings for the future.

At first, user is able to choose a country where they reside/are flying from.

Then, user is presented with a flight search screen. Looks very familiar, works basically the same way as SkyScanner, Kayak or most airline pages. You are able to choose between roundtrip and one-way options, you have two calendar pickers.

Below the search component, user can find popular destinations from a list, or click them from a Google map.

Once user makes a search, they can see the flight combinations, price-ascendingly.

But there is another Flights feature within the Google search engine itself. If a user searches a flight number, they are able to see all of the info about flight departures, gates and officially announced delays. But a feature that’s even more interesting is the delay prediction notice. Apparently, when a flight is likely to be delayed by at least 30 minutes, a notification about a potential delay shows up.

My app is not going to be an all-in-one app for flights, unlike Google’s.

Instead, my main focus will be the flight delay prediction. I want the user to be able to predict a potential delay given the data available about a future flight, as well as to compare the airlines across the punctuality criterion.

The sample user stories will be:

User, after entering the app, can type in a location of the departure airport using the city name or airport code.

User, after picking a departure city, can choose the date and time of departure.

User, after picking the departure city, date and time, can compare different airlines in terms of their likelihood of delay on that day.

User, after picking city, date, time and airline, can see whether or not a flight is likely to be delayed.

Schedule:

week 1. Wireframing. Tweaking the ML algorithm, getting the Python-based API to output data

week 2. Connecting the API with a React app. Writing the code

week 3. Writing the code, final tweaks, user testing

Final Project Competitor Research & User Stories (Renewed)

My thinking

For my final project, the new idea is to make a productivity app that can track habits and goals. I would always like to keep healthy and beneficial habits in busy college life, but I often fail to do so. I think a simple and organized app could help people like me. I’ve tried existing habit/goal tracker apps before, and I think there are three main problems with them:

  • The lack of simplicity. Many habit tracker apps contain unnecessary elements such as icons and complex statistics, which rather than improve users’ productivity.
  • The lack of consideration for different kinds of habits. Habits differ in many ways: some of them can be categorized to “daily checkers”, for example, sleep and wake up early, clean up the room, only eat vegetables. Some habits need to be counted in times or in minutes, for example, reading, working out, drink 8 cups of water. Existing apps often mix up these types and makes it hard to keep track of habits.
  • The lack of stimulation system. The existing apps often use statistics to show the user’s performance in carrying out the planned habits. However, statistics take time to understand, and it’s easy to be frustrated by one’s bad performance. The data is cold and doesn’t offer enough stimulation.

Corresponding, I decided that my app should have these features:

  • Clean and organized in layout,  simple and useful functionalities.
  • Design specially for different types of habits.
  • Offer a stimulation system that visualizes the user’s progress and gives them the motive to go on.

Competitor Research

  • iHabit

      

      

  1. Only two main entries in the navigation bar: Habit and Settings. Every other page (the detail page of a habit, the statistics of a habit, add a habit) has to be reached by more than one clicks.
  2. When setting up a habit, no detail information is provided. In other words, all habits are considered as one kind: the “daily checker” habit that I mentioned above. The user’s input is limited: only check/uncheck a habit one time a day, not considering whether the habit has to be a daily habit or whether the time spent on this habit matters. (2nd pic)
  3. The statistics page offers unnecessary and not specific information. It only shows the statistic of the year. Why does the user have to see future months with blank progress?  (4th pic)
  4. Every time the user check on one habit, there will be a pop-up window saying “Well done”. This stimulation method is too straightforward and sometimes distractive and annoying (The user has to click “ok” to close the pop-up).
  • Tiny Routines

             

  1. The habits are organized in the order of time (wake up, morning, noon, etc). (the 1st pic). And the way to check a habit is easy: simply clicking on the icon.
  2. Interesting stimulation method: Today’s card. The user has to complete every habit in order to collect the card of today. (the 2nd pic)
  3. When setting up a new habit, the user can choose the repeat time, which considers the difference between habits a bit. However, the user still only can check/uncheck a habit, there’s no quantitative data collected.
  4. The general style is simple and clear, but there’s one problem: too many icons. Also, the way the system use icon to represent habits can cause some problems: The user has to spend time looking for a suitable icon when customizing a habit. If there are no suitable ones, the icon loses its meaning.
  5. The “Habit Records” contains too much information that is unnecessary to be placed on the main page of a habit. It would only distract the user. (the 4th pic)
  • Habitify

    

  1. Too many blocks on the main page, it would take quite some time for the user to understand every functionality. Some of them are not necessary.
  2. This might be the feature of this app: many many statistics. The user may get interested and study it closely when first downloading the app. However, since the progress is not straightforward enough, it’s easy to give up using it.
  • Continuous

  

Interesting feature: Opposite to all the apps above, this app only cares about the habit where count matters.

User Stories:

  1. As a user, when I enter the app, I am on the “Today” page. I can see a list of daily habits waiting for me to complete.
  2. As a user, when I click on the habit, if it only needs to be done one time, it will be completed. If it needs to be done for several times, the count will decrease accordingly.
  3. As a user, when I click on the add button below the daily habits, I can see options that include all my long-term habits. When I select one, I can type in the time I spend on it and save it.
  4. As a user, when I enter the “Habits” page through the navigation bar, I can see the listing of all my daily habits and long-term habits.
  5. As a user, when I click on the add button in the “Habits” page, I can add a habit, and specify its type and other information.
  6. As a user, when I click on one habit in the “Habits” page, I can see the progress I made, visualized by the growth of a flower, a tree or something else (still considering). I can also see quantitive information below.

React User Interfaces | Final Project Competitive Research & User Story

Competitive Research

I have always followed several lifestyle blogs that I find inspiring and are able to represent the bloggers’ aesthetic in an authentic manner. They are highly relevant to what I am trying to achieve in my final project, so here goes:

That’s Chic (http://thatschic.net/)

As I have mentioned a million times in this class, this blog is my ultimate dream. It represents its owner’s aesthetic, style, inspiration and mood in an interactive and authentic manner.

Brigitte Crisp (https://brigittecrisp.com/)

A personal blog that represents the artist/stylist’s visual style. Very cool visuals featuring glitches, collages, and other hyper-wave style elements. Love the way she presents her editorials and would be a great reference for how I should layout our editorial photos.

Dtales (http://www.danahourani.com/)

A personal lifestyle blog that integrates her fashion, travel and music all in one. Clean layout for the posts but has a great aesthetic throughout the entire blog.

vanellimelli (https://vanellimelli.com/)

Love the way how she makes her blog posts in scrapbook style while keeping the simplistic format of the blog.

Yan Yan Chan (http://www.yanyanchan.com/)

Simple blog format as well but turns the whole site alive using colorful contents, handwritings and beautiful collages.

 

User Stories

  1. A follower from our weibo account sees our new post about a new collage that I make. She clicks on the click I put in the post and enters our blog to see the collage in its preferred layout.
  2. A follower from our instagram account sees a new instagram photo that we post and wants to check out more of our content. She finds the link to our blog in our profile and gets redirected to our blog. She wants to see the mood board section and understands where our aesthetic comes from.
  3. A PR assistant tries to reach out to us through our weibo and sees a link to our blog. She wants to make sure that our style aligns with the company that she represents and send us a message for possible collaboration. After taking a quick look on our contents, she wants to find the contact page in our blog and get in touch.

RUI – Final Competitor Research & User Story by Bruce

The portfolio is a personal thing. When you are showing your portfolio to others, it should be talking just like you, not like anyone else. IMA students are highly diverse in skill sets, which makes it harder to design.

  1. R/GA: https://www.rga.com/work
    R/GA is a full-service advertising company. Like us, they provide services in many different fields. Having to face different kinds of clients, their works page has comprehensive features to help viewers choose and filter for their needs. Each project case study has a short write-up, a slideshow of images or videos, tools to share on social media and related works.
    For my own need, it’s good to provide filtering, but it’s way too complicated.
  2. Shirley Huang: http://shirleyhuang.me/
    Shirley is a former IMA student who’s portfolio website has been recommended by professors as a good example. As someone with a strong visual design background, her website has her strong personal styles. The works are categorized by their types, and then further tagged. Since her works are usually interactive, hovering the mouse above will reveal a preview footage.
    The issue is there is no priority and control over what to show for a specific group of viewers.

User Story:

  1. As a user, I can see a few featured projects.
  2. As a user, I can see a list of projects in an order of importance.
  3. As a user, I can see the title of the project and a big thumbnail.
  4. As a user, I can get an URL made specifically for me so the results are tailored to my need. (academic, job search, client)
  5. As a user, I can see details of a project by clicking in, seeing images, videos, descriptions, and even demos.
  6. As a user, I can go to relative projects by clicking on the category or specific tag.
  7. As a user, I can view the website with no issues on my phone.

Final Project Competitor Research & User Stories

My Thinking

For my final project, I had the idea of building a PC wordbook. However, during the prototyping workshop, I didn’t feel sure about this idea and doubted whether there’s need to make another PC wordbook application besides all the existing ones. After class, I dug into the reason why I came up with this idea. Here’s the retrospect process to answer the why question:

  1. Why do I want to build another PC wordbook? I didn’t have a good experience with the wordbook app during my freshman year. As someone that first entered a foreign language environment with many online readings, I often found it hard to get access to meanings of words and remember them.
  2. Why did I find it hard to get access to meanings of words and remember them? Several reasons. First, the dictionary app I used only offers simple Chinese translation of a word in the obvious place. Though it concludes more detailed explanations and example sentences below, they are less readable and are often ignored. Second, sometimes the explanations of a word offered by the word book don’t suit the context I see it. When I understand a word well given the context in a reading, I would like to keep it but I can’t. Third, many wordbooks have the “favorite” and “collection” functionality that intends helping the user remember the words. However, due to some design problems, it’s often not convenient to customize word collections. Therefore this functionality is not utilized well as it should be. Fourth, the word collection functionality often requires too much user input rather than serving the user. To be more specific, a simple “check” functionality can help the user keep track of their familiarity with words better. Flashcard, which is often seen on mobile dictionary apps, also serves the user better.
  3. Why did I feel that there are possible improvements that should be carried out in existing PC wordbook apps? I had better experience learning new words with mobile wordbook apps and CASIO electronic dictionary. However, there are problems with these two devices: Mobile is not suitable for working environment, using mobile apps bring distractions. CASIO electronic dictionary is not that portable and it’s impossible to always carry it when working. An application on the computer is the ideal workspace for language learning while working.

Competitor Research

The common dictionaries on the PC port:

  • mac os’ default dictionary app

Points:

  • search: on the top right
  • clicking on any word can jump to the corresponding detailed page
  • click to go forward/backward
  • offers a table of related words and phrases on the left.
  • offers detailed explanations and example sentences.
  • offers options to adjust the font size.

Analysis:

  • Benefits the user’s learning of a word by offering a lot of information and examples, just like old paper-made dictionaries.
  • Benefits and extends the user’s learning by making it easy to jump other words’ meanings.
  • Limited functionalities: The one and only thing the user can do is looking up words.

 

  • YoudaoDict

Points:

  • Multi-functionalities: Dictionary, Wiki, example sentences, translate, and wordbook.
  • Navigation Bar: top. Seach: top.
  • Predictive word list.
  • Word Explanation: simple Chinese translation on the top, details in smaller size below.
  • Collect a word: one click, no categorizing.
  • Needs several clicks to customize word collections.

Analysis:

  • The predictive word list disappears when the user clicks Enter to see the detail page for one word, preventing the user from viewing related words.
  • It actually offers a lot, but the user can get quick access to only a few functionalities. It requires too much work to discover detailed meanings and external example sentences for words and too much thinking to arrange one’s own word collections.

The mobile wordbook app:

  • BingDictionary

    

     

Points:

  • Predictive word list (works better on mobile)
  • Offers options to select or create new collections (word lists) when collecting a word.
  • Offers various sorting methods in word collections.
  • Offers options to show/hide definitions in word collections.
  • Can test user’s learning situation with the collections

Analysis:

  • Obviously, the functionality of this mobile wordbook app is more complex and organized than the PC ones.
  • The user can conveniently create, keep, adjust and organize their own word collections.
  • The user can test their familiarity with words in collections easily by scanning through them and see if he or she knows the definitions.
  • The user can actively learn and review words by using the testing system shown in the last pic.

The CASIO electronic dictionary (by memory…):

Points:

  • Jumps to the detail page of any word on the current page.
  • Allows the user to create their own word collections.
  • Allows the user to take notes on any page!!!

Analysis:

  • The note-taking functionality is very valuable to me. However, the operating system on CASIO makes it not that convenient.

User Stories

Taking all those factors into account, I would like my PC wordbook app to offer an all-in-one word learning workspace for second language learners. It could offer:

  1. Convenient word search and clear and understandable explanations.
  2. Customized explanations, example sentences, and notes for word collectors like me.
  3. Customized word collections and checking systems.
  4. Flashcards that help the user remember words.
  5. The progress visualization to motivate the user.
  • As a second language learner, when I open this wordbook app, I can see a navigation bar on the left side of the app that shows these functionalities: progress, flashcards, search, all words, collections.
  • As a second language learner, when I click on the search button, I can see a bar of word cards just next to the navigation bar in A-Z order. I can type in words in the search bar which is on the top of the word cards to search for a word.
  • As a second language learner, when I click on the word card that I want to see, I can see the detail page on the right of the word card bar that shows the explanations of the word.
  • As a second language learner, when I click on the add button next to the explanations/example sentences/notes on the detail page of a word, I can add my own things to them.
  • As a second language learner, when I click on the collect button on the detail page of a word, I can choose to put it in any collections I created, or create a new collection to put it into.
  • As a second language learner, when I click on the all words button, I can see all the words that I collected on the word card bar with various sorting and viewing methods.
  • As a second language learner, when I click on the collections button, I can see all my customized collections.
  • TBC.

 

 

Final Project Design Research

For my competitor research I did a combination of searching for existing portfolios and looking around on gamedev.reddit.com to see what people have said about portfolios. On reddit, the most commonly given advice about portfolios is that you need to clearly communicate if a project was a team effort, and if so, explain exactly what your contribution was. People in the industry also commented that they want to see some of your process. They want evidence of how your project evolved over time, not just the final result. Another piece of advice was to have your portfolio show only the type of work you want to do, but I am still considering whether or not I want to only have games or include stuff I’ve made as well.

When looking at examples of portfolios, both game and non-game ones, they seem to always put the work first. I originally thought I should introduce myself, but I now think that it is more important to show my skills. Another aspect that seems to determine how successful a portfolio is how quickly it loads. Hiring managers are often in a rush, and waiting for a site to load is a waste of their time. I would still like to include a demo of my games, but if this comprises the loading time too much, I will scrap the idea.

User Stories:

  • As a user, when I land on the website, I can tell that this is a portfolio and know whose portfolio it is.
  • As a user, when I land on the website, I see a header bar with navigation buttons, a photo of the portfolio owner, a description of them and their work, and preview images of their best work.
  • As a user, when I hover over a preview image, the name and some information about the project is displayed
  • As a user, when I click on a preview image, I am brought to a detailed project page
  • As a user, when I view a project page, I can see detailed information about the project and additional photos or videos
  • As a user, when I click on the navigation buttons, I am brought to a grid view of preview images for all projects in that button’s category.
  • As a user, when I navigate to the project page of a game project, I will be able to play a short demo of the game in the browser without having to download any files.

Amber//Final Project Design Research and User Stories

Project: Polaroid Picture Organizing Flatform, a website interface to store, organize and display Polaroid imagery customized by the user.

Concept & Initiative and Competitor Research:

Ever since Polaroid was invented in 1949, it has its period now trend seems to look back in the out-of-date technology, the revival of Polaroid pictures speaks to that. A bolo post Why Polaroid Picture survives in the Digital Age mentioned, “A Polaroid print offers a physical souvenir of your experience and there’s an undeniable, old-school charm to that.”

As an amateur Polaroid photographer, I enjoy the joy to hold the instant film of Polaroid and share them with my friends, my family and people who I love. I attach more emotional weight to a Polaroid photography than a digital copy of it, because the digital one is much easier and more convenient. Therefore, we consider, choose and decide when to use the Polaroid camera before clicking the shutter, since we generally don’t want to waste the film. The moment and memory are what we want to include in Polaroid pics.

On the other hand, displaying them is a real issue in arranging pictures. it is personal and often arranged by preference. Not like iPhone, all the photos are arranged by parameters of time, location, or created applications……which is systematic, clean and clear, but seemingly does not match the art of Polaroid.

I hang the Polaroid pictures on the wall to remind myself of the cherished moments:

 

I see the intersections to bringing together the physical Polaroid pictures to its digital copy for better organization and prevent the loss of the original one. For example,  my friend Maya has an Ins account dedicated to her Polaroid photography:

 

I think Instagram is an outstanding platform for imagery display, but still lack a sense of freedom in deciding the way to present the pictures which speaks the heart of ourselves as an individual in the picture, and as a photographer observing and documenting the world around us.

It is not able to generate works like this:

Screen Shot from https://www.wallpaper.com/art/the-polaroid-project-photography-book

Nor this:

Art by David Hockney from: http://www.davidhockney.co/works/photos/composite-polaroids

So what I hope for is to create an interface that allows both artistic creation and clear organization of the digital photo album system.

I really enjoy the interface by Polaroid Original which gives life to Polaroid pictures in web environment. Here, the picture suits with whole page, including the typography, the layout, the color,,,,so on and so forth.

 

User Story:

1, As a user, you are able to upload and store your digital copy of your Polaroid pictures.

2, As a user, you are able to label the pictures with information of time, location, people, event, and description

3, As a user, you can decide what to show of the labels

4, As a user, you can view the pictures uploaded by uploaded time in a database

5, As a user, you can drag and drop any of the pictures from your database and create your preferred way to present your Polaroid pictures.

 

 

 

Reactive User Interfaces | Final Project Design Research | Zeerak Fayiz

Checking the weather has been an activity that has drastically changed with advancements in technology. In the olden days, people used to either (depending on the time in history):

  1. Look out the window and make a judgment of what the weather is like;
  2. Find the weather forecast in the newspaper;
  3. Watch the weather forecast on television;

Today, with the advent of the smartphone, one can check the weather forecast with the click of a few buttons. That said, there are still a few things have always remained consistent in terms of weather forecasting. These include the temperature, wind, and precipitation information.

At present, there are numerous weather apps available on the various app stores, many of which are either generic, or cater to specific needs of the user. Additionally, new and creative ways of creating user interfaces are also constantly paving the way for better ways to display weather data. Given all that, I believe that the following apps will be competitors to my app:

  1. Clotim is an app that gives the user clothing recommendations depending on the weather in their area. It is an app with a very focused objective, and it does a good job at it. However, when it comes to weather data, there are better apps on the market (if the user is more focused on or wants more weather-related data).
  2. Google’s Weather App is one of the most commonly used weather applications on Android devices. It does a great job at giving the user a good amount of detail in terms of the current and forecasted weather, however, where I think it lacks is the organization of information on the interface; for things like wind speed, the user has to scroll down on the interface, which consumes extra time (at least when you’re in a hurry to get ready in the morning).
  3. DarkSky is a very popular ‘hyperlocal’ weather application and is considered to be accurate to the minute. It has been featured in the New York Times, Wall Street Journal, Wired, and many other media outlets. Apart from the accuracy, the application is widely popular for it’s beautiful and clear interface, as well as good visual maps, in spite of the overwhelming amount of weather data that it features. Moreover, the app is also known to be very good at predicting when it will start or stop raining and will send users a notification of these changes and predictions.

User Stories:

  1. As a daily morning user, I can check important things like temperature, humidity, wind, precipitation, and UV index, without having to scroll down on the interface.
  2. As daily morning user, I can check the predicted changes in weather throughout the day without scrolling down on the interface.
  3. As a daily morning user, I can see clothing recommendations in accordance with the day’s predicted weather.
  4. As a daily user, I can see the predicted weather for the next 10 days by switching to another tab/page in the app.
  5. As a daily user, I can search for weather data for a different location.
  6. As a daily user, I can choose the data to display on the main interface, and its order (to some extent).

Reactive User Interfaces: Final Project Competitor Research and User Stories

Given the nature of my final project, competitor research is somewhat difficult to do, as most personal websites are very focused on the actual person they represent. Nevertheless, I have done a fair amount of research into the personal websites of other software engineers, as well as some artists, and I noticed some very strong trends.

First, most of these websites tend to be one-page. I don’t personally believe that this adds anything to the quality or value of a website (with very few exception where interesting transitions are used), so I am planning to not follow this trend. Secondly, almost every website I have seen has some form of menu bar, and 90% of the time it is horizontal, at the top of the page. Unfortunately, I have not been able to come up with a much better idea that can provide the same functionality, so I believe I will have a top bar as well, but I will try to make sure that its design is modern and appealing.

It is also particularly common for personal websites to provide one dedicated portfolio section, where all projects are listed together with photos/videos/descriptions/links/etc. However, this is another trend that I would like to avoid, as on my current website I only plan to have one project initially, which will have its own brief presentation page, but the goal is to do the same with every new project I add, so that the projects are the core of the website, not just an addition to my profile page. Based on this decision, I thought it would best to look more closely into the websites of large companies which have a software portfolio, as these are more likely to fit my expectations.

Atlassian is a perfect example of this concept. It has a simple, but well organized top bar, a welcome “hero” image which represents the company’s personality, and more essential information below. Each of their products has its own individual page, which is personalized based on the product. There is also a very subtle, but creative animation on the first page, which also appears to be a recent trend, and one that I particularly appreciate and hope to include.

Jetbrains has a very similar layout, though a markedly different design. Apart from the beautiful use of dark colors and the interesting animation, I also appreciated the clarity of the information displayed, and the slightly unconventional aspect of their top bar menu, which I hope to base my design off a little, although it is clearly designed for much more content than I will be having on my website.

Another beautiful, through very different website is Paypal. Their homepage has the unique feature of a tilted separator, which separates two key components of their interface that also react gracefully to the mouse hover. Their top bar menu is also interesting, and definitely an improvement over most of the ones I have seen. After looking into how they achieved the tilted separator effect, I also discovered a related, but somewhat different trend, of non-rectangular headers, described really well in this Medium post. Many of the websites on this page will also serve as inspiration for me, as they make some very bold and creative choices.

As far as my user story is concerned:

  • As a visitor to my website,
    • I can see the logo an description of the website as soon as I land on the page.
    • I can scroll down for more information about the website.
    • I can easily notice and discover the primary featured project on the website.
    • I can see the categories of content on the website listed in the top bar.
    • I can use the top bar to navigate to any of the pages that exist on the website.
    • I can learn more about each project by going to their specific page.