Moodboard and Mockups

 

Wireframe

The hardest part of creating the wireframe was not to get lost in the details. While drawing, I had so many ideas how to make it, but then I realized I don’t have time to make a full website and I have to focus on the key elements for now. The above examples are only a few from the over 20 pages of wireframe.

Prototyping

The first interactive prototype created in Balsamiq:

Then I finalized my color scheme and moodboard:

Site Map + User Flow

I started planning for my website differently. Because there were too many features and I wasn’t sure what would be the most logical set-up, I used card sorting with a couple of my friends to build the website hierarchy. We labelled the different features, and tried to find the most intuitive name and place for every feature.

User Flow

IdeaBoard+UsageStory+StoryBoard

I started the scenerio making by first asking my friends: when would they use a site like this? After that I sketched a story, broke it down to elements and attached the general feeling I wanted the pictures to convey.

A group of friends want to catch up after the long break, but cannot decide where to go or what to do. They get frustrated and angry, but then one of them pulls out SUS, See You Soon, which helps her find suitable options for the occasion. In the end, they had a lovely time together and did not get disappointed.

Idea Board

Usage Story

Story Board

User testing

I used user testing multiple times during the design process, I thought it best to involve an objective outside opinion in almost every phase of the design. I will not list my testers for privacy reasons Some of the most important highlights of these tests:

  1. Always design for EVERYONE. Accessibility in web design is important, we need an inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with disabilities. When I asked my cousin to try the website, he pointed something very important: he had no clue when or with which parts he can interact with. Since he is color blind, the change in color was not sufficient as he pointed it out for me. I realized that there was no feedback when he interacted with a button and the initial color scheme was not suitable for color blind people.
  2. During the designing of the features, I got some useful feedback from the users. For example, I should make sure the symbols used are as straightforward as possible. To symbolize friends, I first used a black-white icon of two girls and some of my friends thought it was an option for gay dating. Another example is when they reminded me to pay attention to the wording: meeting conveys a more serious kind of meet-up, and people thought based on the short description it is a site to help plan work-related, official, business meetings.
  3. Pointed out this website is useful, people won’t come to read about the background story of SUS. So I took out the about page all together.
  4. People don’t like to pay for anything really, they want everything – for free. Because it is not something they would use everyday, they would not buy a subscription. So I put in ads to the final prototype, to see if people are bothered by them or accept them.
  5. Also, my first ideas felt too crowded, the circular shape did not work out for the aesthetics.
  6. On the options page, filters were not at an intuitive spot.

UX Portfolio

The Problem 

I have a curse, I am highly indecisive. But the thought comforts me that I am not alone: basically all my friends are “cursed” as well. You can only imagine the times we try to meet up, every suggestion is either too expensive, too cheap, too far, or too boring so most of the time we end up meeting in the school cafe. So not cool.

During the 7-week course of UX Design at NYU, I was curious to see whether people would be interested in a  website that makes plans for them. Nowadays there are so many options to choose from, and on top of that people are busy. They don’t have time to search on Google for hours for cute, little restaurants or coming up with a out-of-the-box date idea. So, to solve one problem, I designed a website that attempts to to solve planning for them.

User Research, Personas and Scenerio

User Research

After coming up with the idea, my next step was to identify the target users and do some market research. I used various methods to identify the target user and the main competition: online survey, focus group, and one-on-one interviews.

I used Google Forms to collect the data and later analyzed it in Excel. I asked general questions about the users such as gender and age, but I wanted to know more about their plan-making process, internet usage and what features to they value/miss from the competition.

From 21 participants, as Pic1 shows there was a wide range of age, which was surprising as I presumed mostly my fellow classmates would fill out the form.  After However, the gender distribution was not as balanced as the age (Pic2): man were outnumbered in this case. Although the numbers indicate that women should be priority targets, because the number of people completing the survey is so low, I would rather not generalize.

When asking about the planning habits I found a slight contradiction: even though, people usually use their phones more than their computers a day (Pic3), they actually prefer to use their computers while planning (Pic4). When I asked about this during the interviews, participants said they preferred a bigger screen as they are probably juggling with many sites at the same time, planning on a computer is faster, and simply planning is painful enough, they don’t want to suffer through the mini-screen of their phones.

Finally, I found that most apps/sites I connected with helped me solve a problem that also had an emotional effect on me. I was curious how people felt when planning. The results were pretty inconsistent apart from one part: as Pic5 shows, people who said they usually plan together with the other participants of the meeting in general felt more frustrated than the people who prefer planning alone or push the whole task altogether onto someone else.

As I found out later, some of my English speaking older family friends also filled out the survey and gave me an interesting insight to the current situation in Hungary. There are so many options, hundreds of thousands of restaurants are waiting for people to serve but there is not one good website that would sort them out. Moreover, there would be a demand for such a site that is capable of displaying a collection of activities from festivals, through theatrical performances, to bar openings. Upon completing the user research, I realized there is an existent market that does not meet it’s needs in Hungary.

From the Focus Group and the interviews I found out more about personal preferences.Everyone of them was a student at NYU Shanghai, between ages 20-23, girls. I asked similar questions to the survey but went into motivations more deeply. The most important part in these sessions was finding out what attracts visitors to the similar concept ideas like SmartShanghai, Yelp, Chop, Time Out etc. The most attractive feature they had was the location based search and the deals. Originally, I did not think about building a deals section into the project, but at the end I put it there. But most importantly they all reinforced me that they would use a website that would combine a location-based search with the best deals in town.

Personas

I came up with the personas based on the data collected, but I relied more on the interviews in this case to make the characters feels more real. Olivia Wang is based on the Focus Group members, while Marianna is based on my Mother and her group of friends.

Storyboard

I started the scenerio making by first asking my friends: when would they use a site like this? After that I sketched a story, broke it down to elements and attached the general feeling I wanted the pictures to convey.

A group of friends want to catch up after the long break, but cannot decide where to go or what to do. They get frustrated and angry, but then one of them pulls out SUS, See You Soon, which helps her find suitable options for the occasion. In the end, they had a lovely time together and did not get disappointed.

User Flow

I started planning for my website differently. Because there were too many features and I wasn’t sure what would be the most logical set-up, I used card sorting with a couple of my friends to build the website hierarchy. We labelled the different features, and tried to find the most intuitive name and place for every feature.

After this step, I created a User Flow chart:

Wireframe

The hardest part of creating the wireframe was not to get lost in the details. While drawing, I had so many ideas how to make it, but then I realized I don’t have time to make a full website and I have to focus on the key elements for now. The above examples are only a few from the over 20 pages of wireframe.

Usability Testing

I used user testing multiple times during the design process, I thought it best to involve an objective outside opinion in almost every phase of the design. Some of the most important highlights of these tests:

  1. Always design for EVERYONE. Accessibility in web design is important, we need an inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with disabilities. When I asked my cousin to try the website, he pointed something very important: he had no clue when or with which parts he can interact with. Since he is color blind, the change in color was not sufficient as he pointed it out for me. I realized that there was no feedback when he interacted with a button and the initial color scheme was not suitable for color blind people.
  2. During the designing of the features, I got some useful feedback from the users. For example, I should make sure the symbols used are as straightforward as possible. To symbolize friends, I first used a black-white icon of two girls and some of my friends thought it was an option for gay dating. Another example is when they reminded me to pay attention to the wording: meeting conveys a more serious kind of meet-up, and people thought based on the short description it is a site to help plan work-related, official, business meetings.
  3. Pointed out this website is useful, people won’t come to read about the background story of SUS. So I took out the about page all together.
  4. People don’t like to pay for anything really, they want everything – for free. Because it is not something they would use everyday, they would not buy a subscription. So I put in ads to the final prototype, to see if people are bothered by them or accept them.
  5. Also, my first ideas felt too crowded, the circular shape did not work out for the aesthetics.

Prototyping

The first interactive prototype created in Balsamiq:

Then I finalized my color scheme and moodboard:

Then I tried Adobe XD and Marvel, creating my high-fidelity frames in Photoshop.

Final Outcome 

You can try the prototype on Marvel: https://marvelapp.com/1djib766