UX DESIGN JOURNAL RISHABH TIWARI

This is my Adobe UX course learning journal.

Little things about me

I am a freelance graphic designer , web developer. I also use to do UI designing for mobile app as well. I am exploring my way into now UX design .

MY UX PROBLEM

So the major problem of mine is that "I wanted to know the actual process UX as I never now how we use to implement the actual UX process". When I started to explore more about UX - I came to know how actual UX designer use to work but i had never implemented the same.

So here I will use that knowledge and make a website for a school and I would also like to say that this is my real project on which I have to work. Hence, I am trying to make the website which has a Good UI as well as Better experience.

ASSIGNMENT :1

CLASS 1 - PERSONAS

For the first class we were made to understand about developing empathy for the potential users of the UX problem we plan to solve. We were asked to create 2-3 personas and presenting them with appropriate information.

CREATING PERSONAS

As I said before I'm making the website for school so it is common to understand that any person or user will are not just limited to any specific industry. It could be people from vast backgrounds.So here I had choose to make two persons on the medium to high grade users who know how to access the computer. These users have their own pain-points and their own type of needs which will help me to create a good experience for my website.

I've created two personas to design a website for school: Jhon Snow and William Johnson. I created them with characteristic from people I know, the general routine of the persons of the profession and apart from this I used little details of the person whom I follow on social feeds.

THE PROCESS

While making the personas I had to decided the attributes which are best suited for me. There are different types of domains present in the world out there and accordingly we have too decide what kind of attributes we should take in our personas.

I mean when we are making something for kids then we generally like to make thing which has some kind of funny element which can be loved by kinds like wise when we are making things for corporate then we has to make it look sharp and clear. So this is how things change in different domains

When I was making my persona I have to decide till want extent I will add the graphic elements in my persons. Yes, the graphical elements can make our single piece of paper make look more attractive but sometime we have to decide whether it is necessary or not to include it in our design. So, after doing all my research work i decided to add a little amount of graphic and 8 attributes in my persons.

  1. Profile: This section includes the user profile.
  2. Demographics: This section include all the personal details of the user.
  3. Behavior: This section shows how much user is comfortable to use certain things/technology.
  4. Task: This section shows the general tasks which are done by the user in his routine.
  5. Information Source: This section shows from where the user can get the detail about the website.
  6. Needs: This section shows what the user is actually looking in the website.
  7. Pain Points: This section shows us what are different kinds of pain-points of our user.
  8. Solutions: This section includes the temporary or final solutions to the user problems which can further helps us to take our final decision.

FINAL OUTPUT

These are my personas. Tell me what I can add to get better idea's to get details about designing the school website.

Persona 1: Jhon Snow
Persona 1: William Johnson

Assignment 2

SITEMAPS

For the second class we were made to understand about developing sitemaps and we had also got tips for User testing as well, which is also the part of UX style to solve problems. We were asked to take reviews of 2-3 persons and based on that we have to make the sitemaps and presenting them with appropriate information.

CREATING SITEMAPS

In our 2nd assignment we have to make the site maps of my website. This was really funny process to do. Unlike using the card-sorting method I uses the word clouds to my friends and asked them to arrange it according to them.

Actually the idea is to follow the same style of card shoring but I used simple pen and paper and ask them to arrange it. So after getting reviews from my 3-5 friends I have finally came up with this sitemap which is attached and to get even more details about it you can see my Journal.

So before I tell you my sitemap let me shear you my experience about the whole process of making the sitemap. While I was making the sitemap, I had to come up with the words for my pages which I was going to add in my website. So I follow a few local school websites, some school website templates and some websites of the school which are outside from the country as well to get enough idea how what exact details I'm going to use it for my website. The whole process for searching those keywords made me interact with some really good websites and those were really good site and I was happy with my search work and finally I came up with the details which I was going to follow.

FINAL OUTPUT

This is my sitemaps. Tell me what I can add to it to get better idea's

Task 2 :Sitemap
Initial workflow for sitemap

ASSIGNMENT 3

WIREFRAME

In our 3rd assignment we have to Sketch out a wire-frame UI for my website. This was really funny process to do. I learn a lot bout the basic process of design and now I want to shear my total experience how I actually made my wire frames.

What I think about Wireframe

This class proved to be a great way to streamline designs and focus on the User Interface Design on the very basic level. In theory drawing the wireframe is easy using simple shapes with no detail on a page, however when you begin drawing it out, and work through the sitemap, you begin to rethink your positioning of your elements for the user. Trial and error becomes a part of the process until you come to a solution.

This time I took the wireframe design bit more serious and I'm happy with the output. As I was doing the wireframe I had different kinds of idea every seconds and as I was using the pen and paper to do it. I was able to draw it down each idea as fast as possible into my paper which is actually not possible to do when I do wireframes on my PC. This has also help me to create a base to make a good website.

The wireframes give you a base to build your content when you are ready to develop your app or website. It is a guide that it needed to save countless hours in front of the computer. This is the same process we use in graphic design, which is to problem solve through sketching before going digital to save time and money.

Testing is needed from the user side to see what works and what will not. The scenarios that you take the testers through bring about change within the wireframe, which is very important part of the process.

After doing these wireframes- I think this really very good process to add into my regular work routine. This helps us to save time when we are going to make original UI's for our project which helps us to develop something that is user friendly.

CREATING WIREFRAMES IN MY WAY

Now I would like to shear the process how I did my wireframes.

This started with the initial sketches then where it is necessary I had done some changes in my sketches and I continued this loop till the time I was satisfied with my sketching part.

Before I was about to start doing my final sketches, I asked few of my friends and some of my faculties to have a look to those sketches and asked them to say what are the elements which are missing or need to re-modify. Then after having the final look and some minor changes to my initial sketches I finally came up with my Final Sketches of the wireframes of my website. It was clean and each and every element present in the sketch was clearly visible.

Now as I was ready with my final sketches of the wireframes it was the time for user testing. So I went to my friends place to do it and i did the testing for 2-3 user. It was quite amazing experience to do user testing as I had never done it before. Generally to get better reviews and make my friends comfortable I had conducted my test in the local language and one was done in English which I has already uploaded.

So here my wire-frames. I had made wire-frames of my 5 main pages of my website i.e HOME PAGE, ABOUT US PAGE, ADMISSION PAGE, ACTIVITY PAGE & ACADEMICS PAGE.

Now let me tell you what changes I made throughout the process - starting from my Initial Sketching Stage to my Final WIRE-FRAMES Stage.

HOME PAGE

When I started to do my sketches I thought I don’t have enough amount of data which can make my home page look beautiful and stunning but as I started to do sketching I had so many idea’s and there was the time when I though now I’m putting too much data in my home page. Then I took break of 30mins and then I restarted it. I started to remove all the unnecessary data which is not needed in my Home Page. After eliminating the extra elements I came up with the final sketch of my Home Page. You can see there is very minor different in my initial sketch and my final sketch of design. This is because the while making the initial sketch I had already clear the extra data.

Now if you can see there is the difference of design in my Final Sketch and my Final wireframe design. The Section of CAMPUS FEATURE has been removed in the final sketch of the wireframe for my home page and I had added GALLERY SECTION instead of that. This is because while I was doing my user testing all of them actually suggested me to remove the Campus Feature Section and asked me to add Gallery and then I followed the suggestion. I want to clear one thing here : I had not included gallery in my final sketch because I already had so many things in my Home Page and by adding the Gallery it would make it bulk and heavy loaded . So that’s the reason I didn’t included the Gallery Section before.

ABOUT US PAGE

Now the next page for my design was the ABOUT-US PAGE. Here, I had added the pic to show you guys how the original Initial sketch actually look. You can see there are some elements which I took from my initial sketch into y final sketch. You can also see some new elements which I had made in my final sketch and based on that I made my final wireframe for this page.

Here you can see almost each and every element of my final element is same as it is in the final sketch. There are two difference in my final wireframe and my final sketch design.

The first difference can be seen at the SCHOOL FACILITY SECTION where I have made two designs! The reason behind this is quite simple- I actually liked both the style so I was confuse to make the final call about which style I will include in my final wireframe. So, I added both the style in my Final Sketch and decided that when I will do the user testing then based on the reviews of user I will decide the final style.

The Second difference is the CAMPUS FEATURE SECTION which I have added here instead of my Home Page. As I had already removed this section from my home screen the best place to put this section was at About-Us page so I added it here.

ACADEMICS PAGE

The next page was the ACADEMICS PAGE. There is not any special details which I can shear with you for this page. This page sketches are the consistent one. I had follow my initial sketch to make the final wireframe. The only thing which I ignore was the graphical element because I thought it is not looking that much good and as we know the academics page is generally loaded with heavy amount of text.

So, I decided to play with the typography properties of the text to make this page more effective rather then using pictures. Lastly, there is a section in this page named IMPORTANT DOCUMENTS, here I will add the downloading links of the main documents which are there in the school like Code of Conduct / Rules Of School, Attendance Rules, Children Safety Rules etc.

ACTIVITY PAGE

The next page was the ACTIVITY PAGE. I think after the home page this the most important page which can make our user more engage to our website. The reason is very simple after home page this is the place where we are showing all our extra activities which any school is doing. So presenting those activities in good manner can make positive impact of the school in the user mind.

So to do that I have arranged all the activity in the screen and when user clicks any activity a pop-up screens comes up with the detail. While making the pop-screens initially I used different styles for every activity as you can see in my initial sketch there are 6 different pop-up styles for 6 different activity but then I decided to go for the consistent pattern so I decided to give a common style to every activity and the only thing which I’m going to vary is the color behind the title in the pop-up screen with an image which will have the same color overlay which will be there in the background.

ADMISSION PAGE

Now it is the time to discuss the last main page of my design and it is ADMISSION PAGE. As you can see there is very bulk use of graphical elements and picture has been done in my initial sketch and which was then simplified into a very elegant ,bold and beautiful looking design. I use the same thing which I had done in my Academics page. Both these page has heavy amount of text so to make it look good and make good user experience I will just follow the typography principals. As you can see there I had not use much pictures in this page in my final wireframe design.

So this was the total process how I made my wireframes. I hope this would have helped you to know my process and you guys would have learn something from this.

Here are my Initial Sketches, Final Sketches and Final Wireframes of my website.

Initial Sketches of my website.
Final Sketch of my website.
Final Wireframe of my website.

ASSIGNMENT 4

MOOD-BOARD, STYLE TILE, UI SCREEN

In our 4th assignment we have to make the Mood-board,Style Tile and Final layout for my website. This was really funny process to do. I search in internet to get good pictures for my mood-board in the mean time I get to know more about about style tiles and its important and last but not the least I had to make the final layout of my website. I was eagerly waiting for this moment and so that I can make my UI screens of my website.

Before starting the main UI design I was pretty excited to do but this time the level of excitement was on sky high because this time I had not jumped directly in to designing but instead of that this time I had followed a well planed process. So the quality of output was going to be much better then what I would have got if I had follow the same old fashion style.

WIREFRAME

Wire-frame

STYLE TILE

Style Tile

UI SCREEN'S

Assignment 5

Interactions

In our last assignment we have asked to Create your interface either in XD to get a higher fidelity prototype of the design. Record this testing process.

I find this task was very difficult to complete because I was not using Adobe XD and as my site design layout was so big that it was not getting into the power-point either and I didn't know another tool for making the high fidelity prototype. In the end i found a way for to just interlink each of my page and that's how I completed my this task. There is very low level of interactions used by my side to make the prototype but I think the interaction which I have made it shows the main aspect of my website. Below is the interaction video of my website.

Final Reflection: UX to UI

It was really very informative course I learned a lot from this course and now I know how the user experience actually work behind the design. My aim was to know the full fledged process which is involve while improving the user experience of any user and with the help of this course now I have been introduced to that and now I actually know how thing works at the side of user experience.

I enjoyed doing each and every tasks which were given to us. All the assignments had something for us to learn and the support of our mentors was also exceptional .All the sessions were very well conducted.

We had to do 5 Assignment in total to complete this Course:

  1. Assignment 1: Personas
  2. Assignment 2: Sitemaps
  3. Assignment 3: Wire-frames
  4. Assignment 4: Mood-board, Style Tile and Layout Design
  5. Assignment 5: Interaction of the product

My personal thought is that i like to do be a self learner. We can always learn at our speed and we can always explore ourselves in it. Being a student is always good and when you have such a good mentors it is just like "Cherry on the top of Ice-cream". Even though I enjoyed doing every tasks which were given to us but the only task which i felt difficult to do was our last assignment i.e Assignment 5 -where we were suppose to make the video for the interaction of our product. As I was not having the perfect tools that what made it difficult for me to do the task but apart from that there was not any major problem.

Due to this course I know about User Experience and its process. So, I will use my new skill to improve the user experience of the products on which I would be working. Apart from this I believe in shearing the knowledge so on my level I will try to make awareness about the user experience field. I will shear my knowledge with my friends,faculty or any other needy person. Lastly I would only say that -I really enjoyed the course and I will hope if you guys can come up with even more in-depth courses for UX and courses for the fields which are related to UX. This can help us to know more about User experience.

I am so glad I decided to do this course on UI and UXD. Now,I'. planning to use this information in multiple courses.

:-) Cheers, Rishabh ! ;-)

Created By
Rishabh Tiwari
Appreciate

Credits:

Created with images by FirmBee - "ux design webdesign" • TeroVesalainen - "question mark hand drawn solution" • geralt - "photo montage faces photo album" • INPIVIC - "Wireframes" • Yandle - "Conveyor Public Site Possible Features: Val's Priorities" • ajleon - "DSC07098" • qimono - "idea empty paper" • FirmBee - "ux design webdesign" • kaboompics - "man reading touchscreen" • Alexas_Fotos - "smilies yellow funny"

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.