Extended Practice Brief #1: Design Development - Website Content Update!

Updates on the website UI/UX and website content...

Homepage:

• The main page of the website
• The white bar at the top which includes the: About page, 'Learning Baybayin' homepage and Learn the characters page are constant in ALL the pages - giving an easy access for the users to go to whichever page they want to go to and also indicates how simple the website is keeping a minimal design and content for users to easily digest the information that they want to get. They are also kept at a 15pt (Poppins Medium) type size to make it noticeable enough, at the same time appear 'invisible' in each pages, during tests a bigger type size looked to heavy and distracting.
• The About page will slide left whilst the Learn the characters will slide up - this gives the website a clear navigation direction and won't feel all over the place when the users navigate through the website.

Learn the characters:

• All the character are displayed centred on the page but instead of breaking it down to vowels and consonants I thought it was better to show them simply like - as it indicates that there is a breakdown and further information to follow. 
• Downward Scroll - the page can be scrolled to show all the characters 
• Tap for Transition - the users can anywhere on the page to go to another page, where the next page will slide left and ease in and out; sliding left rather than down seemed more appropriate to make the transition more seamless and make the UX feel shorter. 

This is important as its an information heavy website and and centred around learning so it's vital that the transitions make it seem like all the information are in one page rather than detaching each segment with heavily animated transitions. I thought the only 'heavy' or more noticeable transitions should only be applied on pages with a completely different information e.g. About Page to Practice page, so it indicates better to the users that it's a different info, therefore they can approach it fresh to absorb the information they are getting as well as provide breaks for the stagnant style of the website.

Characters Page:

• After the Main character page the break down of the characters are shown on another page transitioned to slide left. 
• The first page is blank then users can click on whichever character they want to show its details. 
• The page is split into two sections, one showing the characters in blue and yellow and the other in white and blue and white and the highlighted letter in yellow in the examples. As they split in two sections, its navigated through further scrolling and though without any icons provided users will automatically know anyways due to the previous page (also, adding navigational icons make the website too crowded and messy as it already has a lot of writing involved, therefore it's best to keep it simple with familiar transitions and navigation that users are already used to doing elsewhere. )
• Characters - the characters here are split into three sections; vowels, consonants and strokes. The sub headings and the romanised alphabet under eawhitch character are in the Mazius Review 20.09 typeface and it is changed into 25 pt along with the additional content on the white half of the screen to clearly divide the information.
• Contents - the contents is broken down in sections and translated in English and Tagalog. The character is centred with it's description split on both sides. Also, instead of using typography the characters are described in a more visual way and compared to everyday things that the users can easily associate it too in order for the users to remembers each characters. Also as the script is most accurate when using Tagalog words rather than English a note is also written to let users know the phonetical accuracy of the script on written. In the example, the character that's been selected has been highlighted in yellow, making it stand out and be picked out quickly especially for users who may still be unfamiliar with the script at any stage of when trying the script. 

 About Page:

• The about page link is consistent in every of the website as it's linked onto the white bar on the top of the website. 
• Content - also I previously mentioned that I'd like the about page to be short, I decided that it was better to include everything here as opposed to breaking it down further on each character page. It would be best for users to rather get a full background writing on the script on the about page as it would uniform the consumption of information and type of information they are getting, as the history, theories and origins are included in the about pages where as the characters page is purely focused on learning the usage and learning how to write the script. Just like how the navigation is supposed to be simple and systematic what and how information is consumed by users is also groups and broken down accordingly. So in this case, it became appropriate and inevitable that the About page is long and hefty. 
• The page will overlay and slide to the left on whichever page the user is currently on with the current page blurred; rather than transition to the actual page. Overlaying the page cut down of navigation time and steps, as well as keeps the users focused on the page. Furthermore, the About page may not be the first page users may go to, so overlaying is more appropriate as it could just be for users to remind themselves of the history or read further details when learning the characters.

Practice page:

• This page is only available when users begin learning the characters. When learning the characters, the top right information changes to 'Practice/Magensayo' (it was originally planned to put in below in the content page, however placing it top works better as it kept the style of the website and didn't add new navigational instructions for the users to get used to especially as it is already a 'sub' page in the website. 
• A pretty simplistic page dedicated for users to write and practice the characters that they have just learnt, with only essential functions shown e.g. undo button and character reminder. 
• 'Character Reminder' - the only function with navigation icons. I thought this was appropriate as the page is empty therefore the users don't have any queues that other information are further scrollable. 
• When the character reminder icon is tapped all the characters will appear overlay (slide up)halfway on the current practice page and scrolled down to show all the characters. Originally, I planned it to be sliding left to right as the navigation purpose, but with the navigation style already implemented through the rest of the website, it would feel too time consuming for the user and really inconvenient especially if users may want to look at a character that is further down the alphabet. 

Thoughts & Reflection:

I think the website is overall nearly done, looking back on the initial low fidelity sketch that I made, I think the website became even simpler and how each page transition and move with one another have also changed as I became more aware of how each movement felt when creating the prototype itself. Transitions and information placement that felt easy and appropriate in writing, actually was inconvenient during the prototype process, e.g. the top bar became consistent with three main pages, rather than one/two and overlaying pages rather than transitioning completely was way more appropriate for some pages, therefore they were naturally changed in order to fit the use and purpose of the website. However, because of how simple the website is I did think maybe it's too simple, and thought of adding more illustrations or information structures, however ultimately I concluded that they weren't necessarily needed and it was best to keep it simple as the original intentions of the website was for learning and for it to be informative, therefore having simple and familiar structures was the most appropriate.