1. User Research
The first part was to conduct a user research to understand how the current Pontoon users feel about the homepage and how did they perceive it when they used it.
The survey was made as a Google form and responses for the compulsory questions were collected in quantitative form and two questions were made to understand what the current users understand by Pontoon and if there is any other suggestion. The questions in the survey were focused on the homepage.
The responses were mainly collected in Likert scale of 5 point ranging from strongly disagree to strongly agree.
The forms were sent out to all the Pontoon users and we recorded a good response of 134 users and the results were pointing to some of the expected problems.
The results showed that users were finding it hard to understand through homepage what Pontoon is, how it works and how to start contributing to it.
The major problem was that the users were finding it hard to navigate and how to contribute. These results lead to an objective of solving the problem of navigation for the users to understand how to use the Pontoon.
3. Wireframe 1
The idea was very simple was to make the new user come and understand the tool and then use it. That’s why the flow was in sections containing specific information about the Pontoon. The first iteration of the wireframe was solely based on the results obtained from the survey. Thus the included sections —
a) Introduction with Call to Action (CTA) buttons focusing to direct the user to select the team and secondary CTA to take a tour.
b) Features including the important ones
c) Navigation to make the user understand how to use the tool
d) The special feature “In-context Localization”
e) Ending the flow with the CTAs similar to the first section and footer
4. Community Feedback
After completing the wireframe, it was uploaded for a community feedback and was sent to the users in the l10n report: June Edition.
The community feedback was really important because the design was missing one very important thing which is the reason why people should do the Mozilla localization. The feedback was in support of the flow and thus no major changes were to be made in the existing design and only a new section was to be introduced.
5. Copy Update
The important thing for a product is not only the work on the design or the flow but also it’s copy. The content which will go there plays a big role. If it’s too long then it becomes hard for the reader and if it’s very less then it’s not explanatory. With the help of Matjaz, updated the copy of the homepage.
6. Wireframe 2
The new iteration based on the community feedback and the updated copy had the following changes — The updated order of the features in the section, swapping the position of the features section with the navigation section, center alignment of the text in the introduction section and adding the new section of ‘Why Mozilla localization is important?’.
7. Homepage Development
After all the iterations the final work started with the development of the homepage. I started with a simple patch to load a ‘Hello World!’ in place of the pontoon.mozilla.org instead of the current homepage. And with time I worked on individual sections and completed the homepage for a feedback from the community regarding the experience.
Matjaz staged it on this platform for feedback and as always feedback helped me a lot to make the experience better.
I started with the responsiveness of the homepage and worked on the portrait orientation but this was removed later as currently the complete application is not responsive.
I also got feedback regarding the scrolling of the webpage, it was not smooth. I started playing with the scroll speed to understand if that fits right or wrong. Didn’t work. Matjaz helped me with some websites to understand how smooth, scrolling should be. I used easeInOutSine function to be included in the scrolling with a speed around 975 to the jQuery Plugin which was used.
This experience was really good to understand how much scrolling affects the use of a particular page. If the page is not smooth in scrolling it generally breaks the link the user builds with the webpage.
Matjaz told me to complete the page before the deadlines as while I will be developing the page, I will come across certain changes and I will iterate again and again. He was right. While the time I started getting used to my design, I figured out small things which were good to have in the first look but were not feeling that good after a certain days of use.