Web UX Design: Bloomington Tutors

UX Architecture Reconstruction of Web and Mobile

How to Keep a Customer though UX Design and Development

Overview

For this project I assisted in the redesign and development of a new blog template using different open-sourced softwares such as Grav and Twig. I enhanced the usability and user experience design for their entire website, including trust markers for web checkout, affordances and constraints for navigating the website, and forming a logical information architecture. My daily responsibilities included the daily creation of different CSS and Javascript transitions, a keen sense for modern design and user experience, and understanding usability and problem solving techniques. My redesign of Bloomington Tutor’s blog was important, as their blog brought in a lot of potential customers to their tutoring service.

Execution

Before jumping into editing Bloomington Tutor’s blog, I first had to assess what key components they had and what they needed to utilize better. I came across many UX flaws that had a significant detriment on keeping users on their website. Firstly, their design was not responsive from desktop to mobile in a logical way. Their pagination was also dull and unhelpful, and the article results themselves had the problem of having few keywords related to an obvious course or subject. Another major problem was that their sidebar was too long to sift through in order to find important information. All of these errors prevented traffic getting to and staying on their blog. 

ext-3

Once I surveyed the website and analyzed potential users of the program through their backend analytics, I began a high fidelity mockup in Adobe Illustrator of what the website could look like. I included a link in the header on each page that would lead the user to the main blog landing page. I also implemented a search bar at the top of the screen that would be available in both cellular and mobile, with dropdown menu included. This search bar would be very important in finding information, so I decided to implement selections that would be visible at the top of the page. Within the page itself, each article type (there were multiple classes) would have a distinct icon and label that would be placed at the beginning of each article preview. Finally, I moved pagination to the bottom of the screen to form a more logical flow of information.

ext-2

Once my design was approved, I worked with the owners of the website to create as close as possible to their desired outcome using their open source software (Grav). As you can see, the icon and title info appear automatically at each post’s publishing. The design is also consistent throughout platforms, and articles fade in on soft scroll. Most importantly, the search system is organized for easy comprehension.

ext

Final Result

I learned a lot from this project, and I especially realized how iterative the process of both design and development are in web environments. Because of this I am better prepared for a future project that may need proper UX architecture and design implementation.

Screen Shot 2018-04-18 at 1.21.17 PM

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s