Wednesday 28 November 2018

Translate Your English App - Development #2

Today I continued to develop my application and made drastic changes to it in comparison to its first refinement. I took my peers' suggestion and decided to use orange less and make  it more of signature colour for the header's for each slide. Doing this made the app look really sleek and consistent but at the same time still keeping it's fun and interactive atmosphere but in a more subtle way that it doesn't look childish. Also, I used a much deeper colour of orange (#FF9D00) as I found that the previous colour I've used looks a bit too soft and it made the app look quite 'kiddy' and childish in a way. However, I kept the green as well as the icon colours, giving consistency together with the 'globe' motif that I've got going on with most of the slides. Also, it's a subtle way of emphasising concentration and focus in the app and in particular I've used the green for the highlighting feature in the content to make the key words more memorable to the users as green evokes concentration and focus in addition to the orange, optimising the informative and educational use of the app. 

Before)After)

Also, I've made the app more detailed by having additional start up pages like making the users choose their default and translated English, which I think makes the app much clearer and have a better navigation system. Today, I've also started using more of the features in XD, in particular the 'Overlay' and 'Scrolling' transition option. I've found this feature very useful especially for the more content's bit and for the keyboard as it makes the slides act as pop-up's which makes it seem like the users stays in the same page and lessening their navigation movements, simplifying the app navigation  overall. For the scrolling feature - I've used this to create a more successful scrolling effect for the 'Select English' feature- also using this in combination with the overlay effect was very effective creating a smooth sliding up transition from the bottom of the layout, making it easier for the users to select a language through scrolling especially at the bottom where it's easier to navigate through as its in closest proximity to the fingers and thumb. 



'Select English Scroll'

Furthermore, I also tried to create a more detailed 'Capture' 'Picture' feature, however it needed a movement to show the highlighting of the key words in the picture, but it's not possible in XD, so I decided to leave it and give a step by step which works just alright and shows the concept okay I think. However, I wish it would've worked to show the idea of being able to highlight key words from a picture clearer though. Being able to highlight certain parts of the picture would make it easier for users to translate the important bits that they need only and give a clear and more accurate 
translation. 

In addition, one of my peers also showed me how I could connect my prototype to my phone in order to do a live mockup on how it'll work in an actual phone setting. II've this really exciting and helpful because as I was ding  it it actually feels like my app was working and it gave me the user experience itself first-hand so it gave me a good indication of how easy or hard it can be navigated. Also, it gave me an indication of how big and legible the type and icons should be in order to be readable enough to have an indication of informational hierarchy to guide the users which info to read from, and also how will they can click on the icons in order to go through. I've found that thankfully for my app, the type is easily read, and have a clear hierarchal indication making it very clear to the users, as well as that my icons are of enough size for users to click on them and transition smoothly. 


Thoughts & Reflection:


Overall, the drastic change to my design is very prominent and I think is for the better for my design as I think it actually look much better aesthetically and navigation and usage wise it's also much more clearer. Also, in the user perspective I think I'd be more willing to use this app than the other I've made as it looks quite professional giving me some kind of indication that it's an informative and educational app which is trustworthy and accurate to it's translation and would help me learn and understand what I'm trying to learn and achieve through the app. Tomorrow, I'm aiming to add a 'Community' or 'Share feature to the app, as I think it would give it more appeal as users can not only interact with it but also other people. For this idea I'm thinking of:
  • Making it specific to a country
  • Making it specific to a translation (e.g. other suggestions?, 
  • 'Share' button to share to a bulletin board where other users can comment on (similar to a reddit thread?)

Hopefully, I can do this and get it to work in time for Friday's final crit. 

No comments:

Post a Comment