Low Fidelity Wireframes (in more detail) For Friday Crit

For tomorrow's crit, I decided to give my wireframes a bit more details with a bit more context in order to hopefully get as much feedback as I can and make them more understandable and clear.

Colour: I've thought of maybe having a yellow and blue colour scheme which is quite a good contrasting colour palette which can enable it to have a friendly and bright feel and as well as informative and educational undertone to it as well making it more trustworthy and useful.  

Main:  For the main pages of the interface, though, I feel like the yellow and blue will be a bit too much and challenges the legibility of the information therefore I was thinking of possible subtly using the colour scheme instead through the icons and symbols? or the highlighting options?

Type: For the typography I want to use a sans serif typeface for easier legibility as well as give it a contemporary, clean aesthetic. For this wireframe draft though I've used Helvetica as there were no other sans serif typeface available for the mock up which I wanted. I want the type to have a friendly and informative (educational) feel to it and a more softer rounded sans serif as opposed to rigid and very geometric type would be more suitable. I also think it would be more engaging to the users due to the bright and welcoming feel that the interface will give, especially because the interface will be very text heavy I think it's important for the type to always be very engaging and pleasant to look at in order for the users to keep using as well as give them good UX, as opposed to a very boring and dull interface and type.

Icons and Symbols: For the icons and symbols that I'm going to use, obviously for this mock up I've used standard icons used by other apps however when I come to create the actual wireframe for my UI, I'm intending to create more stylised icons for the application in order to give it a consistent colour scheme, size, weight and layout throughout the interface. In addition, because some of the symbols and icons will be constant through the application it's important for them to be consistent as well, in order for the users to learn the UI quicker as well as be pleasing to the eyes when being used.

Thoughts & Reflection:

I wanted to develop my previous wireframe structure more as I felt like it was a bit too basic and similar to other translation apps and by creating a more developed version with the design elements and some content, I felt like it helped me differentiate my application more and gave me a better idea of the structure of the app and how everything works as well as what other structures and features I could have on it that are not in other translation apps. Because I think at first when I was making the wireframe, I got stuck in the rabbit hole of making it a 'translation' app that it started to feel like any other apps, and I totally forgot how it's giving the users much more content that usual apps and by focusing on this instead I will create a much more innovative UI design to make it effective and solves the users problems. I tried going about this by trying to focus more on unique features and information I can give users especially on the 'More Details' option. I think by having this I've started to differentiate my application to other applications making it more appealing and useful to my niche target audience them more willing to use my application than others as they are getting much more than just a translation but also an insight information to how the local society in the country uses the word/phrases which they can then use to integrate in the community in a much quicker, accurate and efficient way. Overall, I think I became more confident with my application and its UI in relation to its UX whilst I was making it, and hopefully in tomorrow's crit I will get insightful feedback and critique from my peers, and from these feedback hopefully I can develop my application further as I can gather suggestions and criticisms not just from me evaluating my work and my peers who have seen my work, but also other people who may think in a different point of view as me and give me new ideas which I can interrelate to the development of my application.

'Read Me' Final Publication

After all my experiments and developments this is the final publication outcome that I created. My publication is centred around the idea of semiotics and how we understand signs and symbols, this idea came up from my initial research during summer of taking pictures of business signage. From there, I started to look more into how costumers look and react at signs that are presented to them; expanding this research I gathered further information about how we think about signage in general.

As signage have become integrated so much in our lives so much, when we see signs we tend to ignore them to the point that in some ways they become part of the background and our surroundings - although we know what they are we either don't pay attention anymore or ignore them thinking that it doesn't affect us or have anything to do with us.  In order for signs to become more 'alive' usage of emotive language have been used as a strategy to attract attention - to surprise, and elicit empathy from people. This has been greatly research by Daniel H. Pink in his human studies. Usage of more humorous and relatable signs have been done resulting in better response from readers to an extent where they'd be willing to do the sign/rule said as they relate to it. In my publication, I've tried to challenge this by having 'normal' signs that we see everyday, and try to make readers think more of their actions, and why they do them. I've also integrated elements in order to make readers notice these 'normal' signage within the publication. The publication is titled 'Read Me' a pretty straightforward title fitting the content and has a commanding implication just like the content inside. The content pages contain information about 'Semiotics', 'The Stroop Effect', and 'Emotionally Intelligent Signs' split in different sections in the publication.


*CONTENT

Semiotics 

In this section, I drew illustrations in which readers may interpret in many different ways highlighting the main idea of semiotics and understanding and connotations of symbols. The idea is that readers will hopefully interpret the illustrations in various ways depending on the connotations that they gathered from their environment and society with the illustrations. Having the description with the illustration will also hopefully make the readers understand and think about their reaction, making them understand semiotics in  a very simple way.

The Stroop Effect 

I've included this in the contents of the publication as it's a nice addition which highlights the understanding of signs. I've used the words 'STOP' and 'GO' as examples, with the 'STOP' in green fill and red background and vice versa with 'GO'. As 'STOP'  has connotations of the colour red, traffic lights, being static, while 'GO' with green and movement, blatantly opposing these known 'rules' this in the publication will hopefully show it's effect on the readers- either they stop and analyse the content as it may look 'wrong' or they completely miss it; they may even realise later? Furthermore, I've also used different paper weights for this part of the publication in order to create a subtle change and disruption to the flow of the publication, mirroring the disruption the readers may encounter when they see the stroop effect section of the publication. (I used both 135 gsm and 270 gsm White Frost Colorplan from G.F Smith). Although I've only used it in two pages, readers may detect the change due to the massive different in paper weight.

Emotionally Intelligent Signs

This study is included in the last part of the publication as I figured it would be effective into eliciting more action from the readers by directing them with emotive language into finishing the publication hurriedly. In addition, usage of type setting in order to highlight the motive language have also been done. e.g. "faster, faster, faster, faster" or 'Don't worry you're nearly there'. In particular, I've used the word faster four times, alerting the readers to speed up but at the same time, I've gradually increased the kerning in the words 'faster', subtly opposing the hurriedness and meaning of the word which may once again disrupt the readers flow of reading the publication as often the known meaning of large kerning is pausing and slowing down your pace - 'breathing space'. In the phrase 'Don't worry you're nearly there', the urgency is brought back with the key words 'nearly' in bold, thus making the readers move faster. Doing this showcases the effect of emotive language to the readers and how they can manipulate and make readers react more successfully through a more relatable language in which they are more complied to listen to. And, hopefully by the end of the publication the readers will attain a better understanding into why they react to signs in such a way that they do and how these reactions are being elicited. Finally, in relation to the content, I decided to use 'Helvetica' for the type as it's a neutral typeface, something that readers are familiar with and is also seen in many signs, therefore appropriate in presenting the content.

*DESIGN ELEMENTS

Paper Stock & Hard Cover

I've said in my previous blog that my chosen paper would be a 160 gsm white 'Satin' stock from digital print and a 135 gsm Colorplan White frost stock for certain pages (STOP), however when I went to print I compared the two and realised that there's a such a big contrast between the two white tones that I didn't like, therefore I quickly decided to have my pages in the 135 gsm Colorplan Satin and bought a 270 gsm stock of the same kind for the specific page that I wanted for the 'STOP' pages. I decided these as from my previous developments I've found the 135 gsm Colorplan stock to feel much heavier than it is mimicking a sturdier and heavier paper stock which I liked. As well as, the paper stock as resulted in a high quality printing finish and gave a very nice contrast with the black text due to it's bright shade as well as high quality. Furthermore, I also revised back to my other G.F Smith paper experiments and samples and found that the Black Plike 240 gsm paper matches well with the thick hardback cover that I've made, so I decided to use it as well as extra front and back pages of my book. In addition, to this, it also gave me an opportunity to engraved the title on the front Plike page of the book matching the handmade aesthetic with the rough engraved outline the laser cut produced, as well as they fact that the engraved title stand out on the page making it quite bold against the smooth black surface of the paper. Furthermore, I've also created a hard cover for the book as the card developments I've made, didn't quite meet what I envisioned and made the book look quite unfinished despite it's quality. The buckrum covered cover gives a sturdy and smooth exterior which compliments the intricate binding of the book making it more attractive to the target audience. In addition the lack of titling on the cover also create make sit more intriguing making readers curious as to what it is.

Binding Method - Kettle Stitch 

I've used kettle stitch as the binding method of the book as has a high practically and durability to it, It also allows reader to properly flip each page of the book giving them the full experience of the content. In addition, aesthetically it gives the publication a handmade feel linking to the original research of the publication. The only downside to this method, it that the publication may possibly not be mass and commercially produced in a large scale as the binding method is a very time consuming part of the making process, and as it's a high level handmade method it may introduce errors which affects the quality of the publication overall. Therefore, if I was to commercially produce the publication it may only be that it'll be produced as a limited edition or a limited batch of 50 to 100.

Printing Method

The publication was ultimately digitally printed as I realised digitally printing it is a much more efficient and effective way of presenting the content, as trying to shove other printing methods e.g. laser cutting, would only dilute the message of the publication. It's also much more easier as if I were planning to speed up the publication making process as the printing can be done quite quickly helping to reduce the making time in relation to the binding process of the publication. It'll also be cheaper to batch produce the book, therefore reducing costs for production.

Thoughts & Reflection:

Overall, I'm quite satisfied with the final outcome of my publication. As I've been through many errors and changes in my experiments and developments I think I've come to an informed and refined outcome. In addition, I also think that I've answered the brief that it's aiming and the audience that it's targeting, through the use of appropriate content and production methods which highlights the content as well; I also feel that it does stand beside other competitor books in the same genre as I feel it's unique look will attract reader's attention when seen in a bookshop. In addition, I also think that I've considered the commercial production aspects of the publication and reviewed its potentials and limitations to be mass produced and proposed an alternative in which it'll be possible for it to be produced in real life. Although, the only thing I would say is that the binding time would decreasing it's potential to be mass produced is a shame and the introduction of errors in the production is highly possible- which I've also encountered during binding the book (as the front black cover is slightly high showing the content pages through, making it look unbalanced and untidy. If I had a lot more time to produce this publication I would've changed the cover, however because that means that it'll have to unwind the whole bind it would take me too much time and meant that I'd had to reprint everything again as the holes would be too big which would make the new binding to be loose on the pages, which is very unpractical in the span of time that I have.

\

Translate Your App - Final Brief

After creating the drafts and low fidelity wireframes for my application, I decided to revise my brief and made it more detailed pinpointing it's purpose and target audience in a clearer way. I also changed the title fitting the application purpose and making it straightforward enough for users to understand what it's about without any further description.

Low Fidelity Wireframes

After doing my draft sketches, I decided to create my wireframes on Illustrator giving them a bit more detail and refinement in order for me to visualise how the application will work. I also made it with the arrows in order to get into some detail with some of the options as well as a clearer walkthrough of how the application can be worked and used by the user.

When the users open the application, they will be greeted with an icon of a globe which they will need to press in order to get on the main interface. Instead of giving the users prompts like 'Press Here', I thought, the users will already know what to do anyways as they are a technology savvy generation I think, therefore they'll do what to do. From my sketches in my previous blog I've also made changes such as only having one main page instead of three for each mode. I did this so the users don 't have to keep going back to the start up page when changing modes as they may feel like they're wasting their time and it may be annoying for them to keep coming back ad forth in the interface; it may also start to feel quite repetitive for them and may prompt them to stop using the application. Instead of going back to the start up page, the users can click on one of the options on the bottom tabs, which can lead them either to the 'Save', 'Take Picture' or 'Speak/Speech' mode which will then pop up a similar interface similar to the type interface in relation to the mode that the user is on. 

Instead of having a 'More Details' page that I've intended to do, for the translated language type box, I've broken down what it's going to include as it's the most important part of the interface as it's the part that gives the users the information they need. I decided to break down the information that can be obtain so that the users won't be confused and be overwhelmed by the information presented to them. Breaking it down to 'Definition', 'Context' and 'Synonyms' the users will get the important linguistic terms and uses of the word/phrase/ sentence that they've translated giving them a full breakdown of it as well. I've also thought using a highlighting tool that will highlight the important parts (especially in sentences so that the users can identify them within the sentence structure - also, if I was to do this, would I need to show the actual sentence structure? Do I also highlight the subject, object, verb, adjective in the sentence? or is that a bit too much irrelevant information? Maybe, if I do this, I might confuse the users; in addition, doing this may alter my target audience to linguistic or language enthusiast which is not my intention. I think, going into too much detail will just complicate my interface in turn making in into a bad UI for my actual target audience and won't serve it's rightful purpose. 

For the 'Saved' folder and 'Language Selection' I decided to separate them by countries as it would only make sense to keep order of the translations by their country of origin (especially for the 'Saved' folder), this way the users can easily navigate through which saved translation they want to go back to in relation to the country it's from, because most likely the users are more interested in the country the language is from when finding it.

Furthermore, from my last sketch I also added some new details which would make the interface easier to use, such as 'Back' buttons and the 'language selection' button always on the top centre. The 'back' button indicates to the user to go back to the main page if they want to whilst the 'language selection' button is always there for quicker access on changing languages instead of going to the main page.

Thoughts & Reflections:

I think after doing this new sketch and drawing it up on Illustrator made me think more of the details the application can have, such as having 'back' buttons and constant buttons for easier access. Also, because I've drawn it up on Illustrator it also made me think of the process the users go through whilst clicking a button therefore making me think of easier ways to access it, and ways in which it's presented in a simple and concise way to the users. Overall, I think that through this I've came up with a structure which I am happier about and something which I think will work and will be effective in presenting the users the information that they need.

Low Fidelity Wireframes for UI

After Stephanie Bell's talk this morning, we were tasked to create the low fidelity wireframes for our user interfaces. I first started to write down ideas and features which I thought could be included for my interface as well as the content that I wanted to have in order to place the features in a way where users will be navigate smoothly through the application with no hassle and quickly get the information that they want for the application in the first place. I thought because my application's main point and use is to translate English loan words, the UI should have:

• Two main boxes for the two languages that are being translated.
• Have a 'Save' option for the translated word/phrase/sentence.
• 'Save' folder in which the saved languages are separated by countries.
• 'Delete' option
• 'Swap' languages options 
• Allow for a 'default language' option
• 'Countries' icon which takes user to drop down list of all the countries (may include an icon  of the countries flags as well)
• 'Speak' and 'Scan/Take Picture' option (shown as icons)
• Sans Serif font 
• Minimal colour palette -> not take away the attention from the information -> don't make it look overwhelming and tacky to use.

After writing down these features I decided to do some basic sketches on how I'm intended the application to look. I first started with how the main interface will look like as I thought it would make it easier for me to lay features and remember to put the important features in order for the application to be used by the users effectively. 

In my first draft, I've designed the main interface to be centred on the two type boxes where the words/sentences are translated while having the 'Speak' and 'Take a picture' options are put as smaller icons on the bottom of each box, indicating to the user for them to click in to change modes. Here, I've also thought of having the logo of the app on the top left (however, after actually doing it and evaluating the design, it looks a bit website-y and more appropriate for desktop; also I need to aim to only put the most important information on the screen as it's aimed to be used on mobile phones which have smaller screens in the first place; it shouldn't be distracting or confusing to the users. Here, I've also started to think about how the 'countries/languages' option can be opened. I thought of having it as a list that the users can scroll down through with the countries flags and in alphabetical order for quicker access.

Other design drafts also included a 'More Details' option, where the users can see the full details of the translation such as the context, use, when and how to use the word. I've thought of having this as a more details option as I thought maybe it would be too much information to be put if it was included in the main interface page. It will also include a 'Save' option in which the users can save their translations for later use so they don't have to translate it again.

In addition, I also started to sketch a rough idea of how the users will navigate through the application. Starting from the start-up page, the suers will be able to select a mode they want to use - type, speak, or take a picture, after selecting  mode the users will be taken to the screen of the mode that they've chosen. Each mode will look very similar in order to have a consistent look throughout however, it will be made suited best to the mode that they users choose for an easier and less complicated user experience and user interface. 

Type: This interface includes the two boxes for the users to type in, with the top box being their 'default language' and the bottom the translation box. The users can also 'swap' the languages and choose another language to translate to, in which a drop down list of all the countries will show up. Having a drop down list will make it easier for the users to scroll through and navigate to the language that they want to translate to as well. In addition, to these, along with the top box are small icons directing the users to particular navigations in the interface. Instead of going back to the start up page, the users can quickly switch modes by clicking the icons on the upper right corner of the top box. Similarly, on the bottom box the user can have the option to 'Save' the translations. If the users have saved a translation they can click on the saved option where the translations are separated in countries, keeping the information collected in order and for the user to remember what language the word/phrase and sentence have been translated into.

Speak: The users can use this mode by clicking the speak/speech icon on the left side of the box where the speech will pop up as they are talking. The rest of the navigation options are the same as the type mode.

Take a picture: When on this mode the users are automatically taken to the camera where they can take the picture quickly and the translation can then pop up after they have taken it. Similar to the previous two modes, the rest of the features on this mode are the same as the type and speak mode.

'More Details' - I also want to have a 'more details' option in my interface in order for the users to get more information on the translation that they made. As this is the main point of my design, I thought that if I was to include this on the screen where the initial translation is done, it wouldn't look as important and because of the size of the phone screen itself it would look really cramped on the page that it would just look really confusing and unattractive. It may also make the users feel like they are being overloaded  by information so I've decided that it's probably best to have it in a separate page.

Thoughts & Reflections:

Overall, when I started to make these wireframes I was feeling great about it because in my head it actually made sense and it looked quite good and the user can navigate. However, after finishing them, I feel like they do make a good navigation experience however it looks too generic. As I've looked back at it again I feel like I've focused too much on the 'normal' features and the basic translation information that I didn't utilise my main points e.g. having the context, use of the translation so I didn't make a more innovative interface. I think I'll do this again, and create a design that's more centred towards the main point.

Visiting Professional: Stephanie Bell

Know who you're creating for and what there persona is.

To be Digitally Native:

• growing up with technology
• be more aware of how to use it and be more innovative
• Always think about mobile use first then scale it up to desktop version as most users will have a phone.
• look at details such as 'average thumb size'.
• the clearer you make something to be, the more consumers you'll get
• AB testing - human psychology applied to UI for UX
• *SocialChain
• Brief comes in -> Ideation and Decisions -> Low Fidelity Wireframes (Sketch) -> Feedback -> High Fidelity Wireframes -> Feedback -> Refinements -> Prototype -> Build
• Wire framing -how it'll look, how can it be used, what does something do on the page.
• *Sketch - helps with wire framing/ websites 
• What do you look for in a good app? Clean, minimal (LEAN UX = bare minimum) toned down colour palette, clean crisp fonts -> UX and UI Apple guidelines* ; something that allows you to do what you want to do quickly, the main point  of the app is there right away

• what content, navigation, pages, social media

Thoughts & Reflections: 

I really enjoyed Stephanie Bell's talk as she was really enthusiastic and shared with us how she got started into design and the kind of route that she went through, as it was quite different than usual. As she studied Fine Art I thought that she would have to learn new skills and knowledge to be proficient in designing for screen - she did and she mentioned how she went to Shillington College and did a lot of intensive courses as well as learn along the way from her seniors in how to operate design and create design for screen. I thought this was quite interesting as I would have never thought that she got a different degree other than Graphic Design. She also talked about how she worked with a developer in order to produce her designs therefore she doesn't actually need to know how to develop the software and the actual app. I also learnt about what a good app should have and her preferences and thought about a good app features. 

Lost in Translation Translation Brief

I decided after comparing this idea to my other ideas and the good response from the group crit that the English translation app idea is the idea that I will take forward for this brief. I think that choosing this idea would give me lots of content to include in my app e.g. actual translations of words and giving it context, linguistic aspects etc. For the UI as well I will hopefully be able to create a simple interface that will be easy to navigate as the message and information that I'm trying the users to get is quite straight forward. In addition, I also think that having it as an app will be more effective than a website because phones are portable and can be taken anywhere as opposed to computers that are less compact. I think the target audience is also appropriate for the app, as I feel like it will be quite useful for people who are moving to another country (*my main audiences will be these demographic, however it may also be useful for ordinary people and tourists) in order for them to learn local terms and society norms to help them in their everyday lives.

Overall, I think I've put enough information in this brief that encapsulates my main point and idea of what it's going to be, who it's going to be for, how it will be used and why they will be using it. Although, I might still refine it more as I get more feedback and develop my idea further - also I might need to change the name as its too long at the moment, something short and snappy will work really well which can be memorable to the target audience.