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

UXD User Research and Persona

User research

I know I have a big problem: replacing the act of seeking others’ opinion on whatever I am working on—never a good idea. Which is why I actually started to listen to the user from ideation. But in order to identify a more concrete and specific end user this exercise was very useful, and turned out to have some surprising data.

First, I considered the following questions:

  1. Objectives. What are the knowledge gaps I need to fill?
  2. Hypotheses. What do I think I understand about my users?
  3. Methods. Based on time and manpower, what methods should I select?

1. Objectives – I was curious what would be the most ideal medium: website, app, web app or maybe a mobile web app? I needed more information regarding internet, computer and phone usage to be able to answer that. I also specifically asked what steps do they take when planning a meeting. In addition to this, I needed to know more about expectations, what would make a meet-up planner good, usable, what features would they look for? I also needed some information about similar existing sites such as Yelp and SmartShanghai, what makes them good or what they are lacking.

2. Hypothesis – I presumed people would be more open for a website, since apps take up too much memory on the phone and SUS would not be an app users would use every day. I derived the general plan-making routine from my own experience. I usually come up with the type of meetup at first, meaning if it is for studying, just catching up, treat day, date etc, then I would choose to do something that I am familiar with so there is not a lot of variety in my selection. After that, I would look up the specific place such as a restaurant or bar, and book a table. This takes a lot of time and as the number of people involved increases, it get more complicated and frustrating because noone ever knows what they want.

3. Method – For the survey, I compiled a list of questions, most of them multiple-choice because that is the  easiest way to collect quantitative data. There is one open-ended, which I would analyze later. In order to fast and effectively get around the strength and weaknesses of the competition (Yelp and SmartShanghai), I conducted a 45min Focus Group Discussion with 5people. And finally, I conducted 2 one-on-one interviews just to get to know better other people’s attitude towards the topic.

Here is the link for the data analyses from the survey: https://docs.google.com/document/d/1_TBpphQ8CffJql1ELVxySoPcG9u8HJ39AIAIjBUMo2s/edit?usp=sharing

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.

Additional interesting finding was how participants found the word meeting confusing, they all associated to something more formal. I realized I have to play close attention to the wording as it may be deceiving for others.

Persona

Both my personas are based on real people. While Olivia is a mixture of NYU Shanghai girls, Marianna is actually my own mother. I interview her specifically for making a persona.

The persona clarifies who is in my target audience by answering the following questions:

  1. Who is my ideal customer?
  2. What are the current behavior patterns of my users?
  3. What are the needs and goals of my users?

I tried to keep them brief, specific yet realistic.

Link to the personas: https://app.xtensio.com/somgzeg7

Final Post

  1. BOM and Suppliers: https://docs.google.com/spreadsheets/d/1AU0EJTxprGNujfqmUCn6Tm59NYAtDdlqL7acJ9QhqD8/edit?usp=sharing
  2. Suppliers: We bumped into hardships finding manufacturers who would adjust the cane/crutch according to our needs. We feel that  If we had more time we could have kept looking for partners, but by the end of the semester we needed to focus on the product so we resorted to using finished products from Taobao and putting them together ourselves.
  3. Mission statement: To bring color to the lives of people with mobility issues by improving the aesthetic of medical crutches.
  4. Product description: CandyCrutch© is a line of crutches designed to be more interesting and fun to look at.  Sporting bright colors in minimalist patterns, these crutches empower users to feel confident and proud while using them.  There is even a glow-in-the-dark version of CandyCrutch©! The crutches are medically-tested aluminum crutches that can hold up to 100kg each, coated in acrylic paint and vinyl stickers.  Regardless of their reason for using crutches, everyone will feel better using CandyCrutch©.
  5. Paragraph on journey: Over the course of this project, we went from ideation and market research to design and prototyping. Our initial idea was to innovate on cane design to help the elderly, but eventually looked at children’s crutches instead. All of the crutches we saw were very bland and boring to look at, and we thought it would be simple to add some colors and design to these crutches. After researching materials and designs to customize the crutches with, we were not able to find a manufacturer willing to work with us. In the end we decided to get the component parts and assemble the crutches in-house. The results may not have the professional finish we were hoping for, but they are just a few steps away from fully realized products and we learnt a lot throughout the journey.
    What we take away from these 4 months is a thorough understanding about the manufacturing process, especially in China.  We learned how to identify and research market opportunities, come up with products to fit those opportunities, and how to bring those products from idea to reality.  Part of this process involves balancing ideation and production, and it’s usually best to do both at the same time. It is important to revise the product you’re working on, but you also need to time deal with factories and other aspects of the supply chain.  Another critical facet of this process is talking to real people who could be using your product. If we had moved from ideation to production sooner we might have been able to adjust to the obstacles that came up, and would have had a more finished product in the end.  In the end, we realized we are probably too charity-minded to be good business people. 😛
  6. Next step:
    1. Our next step would be to look for a manufacturer who would not just produce the crutches for us, but also paint professionally.
    2. Additionally to the paint, we would try and modify the height adjustment system of the crutches as well.
    3. Once we found a manufacturer for the crutches, we could consider applying the same concept on canes, so we could extend our market.  

Our Process in pictures:

Individual part:

I think it’s safe to say that I knew basically nothing about business before, now I have a general understanding of it at least. I realized how overpriced everything is, especially bags and clothing; even though I’m not a shopaholic, after this class, I will not become one probably. What really helped me was the beer game, experiencing “doing business” through playing definitely helped me understand the process and the dangers. Furthermore, I realized that the market need is not random or connected to seasons, and that major events such as a world cup or Eurovision can majorly effect business. The other part from which I learnt the most was the individual talks – mostly with Rudi – about the market, how to contact manufacturers, and what aspects to consider while putting together a more complicated piece. I am still not an expert on engineering but at least I bought a voltage converter, that’s an achievement. 🙂

Working with Tristan was surprisingly smooth, we were always on the same page (maybe I couldn’t express myself correctly and that led to some major confusions).Actually, maybe we were too much on the same page, none of us could get into the right mindset to see this project from the point-of-view of a business person. I think I picked up some practical skills/way of thinking from him, he definitely found the simplest solutions for everything. What he possibly gained from working with me is to care about aesthetics and the creative side a bit more, at the end the product we wanted to create was meant to be used around people, not in a dark basement where only the cockroaches see it. But at least we had fun while working on the cane/crutch together.

Class feedback:

  • I think that this class was a great sort of hands-on experience or introduction to doing business in China, but I feel we spent a bit too much time on the ideation and didn’t have enough time on the production.
  • Maybe a bit less freedom would have taken us further. We were definitely overthinking everything and you let us do it, because it is part of the creative process. But I think this class is about learning about the Chinese market and the different stages of starting a business, from ideation to production. Probably would have been better if we are limited in terms of what we can do or cannot change our idea.
  • I think it would be very effective to have a general prototyping session, when you put simple things on the table like carton, double sided tape, velcro, etc and we can’t use anything else. Also maybe a directed case study would help(such as what Marianne is using for Assistive Technology, with a short description of the situation that needs to be solved and with some information on the target user), to help to imagine ourselves more in someone else’s shoes and learn that cardboard and velcro can go a long way.
  • But you were super-duper helpful and I am very grateful for every bit of extra help we received! 🙂

Final Project

Idea:

It is a toy for people older than 10. For the younger age groups, it can serve as an educational toys, recognizing different body parts and it can also help to form a healthy body image in their heads. Apart from these, it could also help to teach languages in case of body related vocab, or help to learn anatomy with a further developed toy. For older age groups, it can be entertaining or bizarre, switching up the body parts is not equally enjoyable for everyone (my roommate freaks out of feet for example). I guess that is the uncanny factor in it!

I tried to design it as realistic as possible and detailed as possible, to make it as uncanny as possible.


Process:

I started designing a normal body, starting with the head and continue down from the neck to the toes. I used some things from my previous models, such as the ears to facilitate the modelling speed, but it still took a lot of time to finish (I left it bold for a couple of reasons: 1, I really don’t like modelling hair, 2, I am not that good at it, 3, thought the boldness makes my doll a tidy bit creepy, 4, less material while 3d printing). I used Maya 2018 and Mudbox 2018, first created the basic shape low poly mesh of her, which I then took to Mudbox to give those subtle body features such as the back or the neck bone.

After all these, I tried to outsource the 3d printing on Taobao, but it didn’t work as planned. The price was too expensive and I wasted a whole day talking to the printer, while I could have started printing it with you. So then ( I ) we 3d printed, or more like You and I watched closely while you were doing it. It was painful, but I feel I learnt a lot about the nature of 3D printers. I learnt that I should use a different 3d modelling software (Cinema 4D), because Maya is not very compatible with them. I should take it into consideration what kind of 3D printer I will use, as not all of them require thickness, and this can mess up my model. I should also export everything with a baked pivot in good scale to make the process faster.

So after modelling and 3d printing came the glueing part. I glued magnets at the ends of the limbs, seemed like a good idea at the time. I realized too late the point of the project was interchangeability, magnets instead of connecting everything created the barrier.


All in all

I don’t feel I failed with this project, I really enjoyed modelling the body and it posed a challenge as well, because I only modeled faces before, not a full body. I also learnt a lot about 3d printing, which is definitely a plus. The one thing I regret is using magnets.


Further improvement and development:

body image by creating a diverse set of body types (fat, skinny, old, young, etc)

adding organs or make different features switchable as well would be my next step if I were to continue working on this project

I would use velcro instead of magnets, as the polarity doesn’t make every body part matching, and also would have made the whole modeling and printing process easier, since they could have been simple, closed, hollow meshes instead of these weirdos I have now.