Project Background

Linguatrivia is an interactive quiz by Linguascope – a tool for language teachers looking to organise competitions within their school.

Tasks

1. Analyse the www.linguatrivia.com website and redesign the home page with the existing content.
2. Re-design the “Linguatrivia” logo in the top page banner to suit the new design.
3. Deliver a HTML5/CSS3 responsive website with the Bootstrap framework.

My Roles

• Digital Design (UI / UX design, visual design, colour schemes, typography and graphics elements)
• Coding
• Responsive web optimisation for desktops, tablets and mobiles
• UI & UX design
• Wireframing

Tools I used

• Software: Adobe Creative Suite, Git, Github, Jira
• Technologies: Bootstrap 4, HTML5, CSS3, jQuery
• Text editor: Sublime Text
• Browser: Chrome 69 on Windows 10 with Developer tools for debugging
• Pen and Paper for wireframing

Timeframe

3 days (part-time)

The website is hosted at: https://spiderlili.github.io/linguatriviatest/

The website files can be downloaded as a zip file via Github: https://github.com/spiderlili/linguatriviatest

What needs to be improved?

The analysis of the current website is central for any redesign projects – an in-depth analysis of the current interface helps to identify what needs to be improved. I started out by evaluating the current website to define what needs to be changed and worked on:

1. The logo is hard to read.
2. The title alignment is inconsistent with the rest of the layout – should be centred.
3. The button feedback is too subtle – would be nice to add hover effects.
4. The layout can be changed for better accessibility and appearance.
5. A lot of text to read – the information can be presented in a more interesting way.
6. The design lacks contrast and the text is hard to read, especially for colour blind users.

Goals

1. Adapting well-established UI patterns(breadcrumbs, carousel, home link etc) to reduce the overall cognitive overload for the users.
2. Improve the ease of access to key features: Make sure the navigation bar is available at all times – this makes it easier for users to navigate. The navigation bar should stay visible in a fixed position at the top independent of the page scroll.
3. Add breadcrumbs to the navigation system using Bootstrap scrollspy. Automatically update links in the navigation list based on scroll position: Home, About, Download, Testimonials etc. This improves the findability of website sections and pages.
4. Increase visibility and accessibility of the interface by increasing the contrast in design, making the buttons more prominent and using a colour blind friendly palette.
5. Improve the button feedback: add a hovering state and a pressed state to the buttons. The new buttons should be bigger and more distinctive than the original design, with animation transitions to the hover state.
6. Create new graphics and add a image gallery with Bootstrap Carousel, including various mock-ups of the app on different devices.
7. Display the customer testimonials and comments from the users in a more readable and interesting way.
8. Support responsive navigation bar, images and typography by using responsive Bootstrap classes.
9. Organise and display the existing information in a more structured way, prioritise important features and contents.
10. Improve the typography by using generous letter spacing and visual contrast.

Redesign

Development

My approach to implementing responsive design:

1. Include media queries for delivering responsive web design to desktops, laptops, tablets, and mobile phones.
2. Use fluid layout measurements with breakpoints to provide the best experience for users based on the device information.
3. Use responsive meta tag in the HTML to control the layouts, enable zoom in accessibility and help with search engine optimisation.
4. Design for smaller screens and work bigger.
5. Code for Cross-browser compatibility and test the website on all browsers (IE, Opera, Chrome, Mozilla, and Safari, etc)

Testing

I tested the site across multiple devices and multiple view ports. I used my own laptop and phone, as well as a responsive design testing website – ami.responsivedesign.is. With Chrome, I used the inspect element to see the different viewpoints in realtime.

I also used validator.w3.org to validate the website’s accessibility.

 

Nice-to-Haves

If I had more time, I would:

1. Carry out a thorough research about the target audience and Linguatrivia’s brand identity, use these findings to make informed decisions about how to organise the site and what should be more prominent on the homepage.
2. Create custom graphics, illustrations and animated content to make the website feel more unique, authentic and foster connection with the intended audience.
3. Implement gestures into the mobile design. Add in swiping functionalities for mobile devices for the carousel gallery.
4. Add social site buttons (Facebook, Twitter, YouTube, etc) into the web page using the bootstrap-social CSS file.
5. Test the responsive design on more devices – especially tablets with a wide range of resolutions – in order to be absolutely sure that the website is fully responsive across all devices.
6. Add a scroll back to top button to make it easier for the user to navigate.
7. Make the site as accessible as possible to everybody by validating the website with more markup validation services.
8. Optimise the code maintainability with Sass.