This is part 2 of an article I wrote about my experience with User Experience Design (UX/UXD). The original article can be found here. In this part of the article I’m going to talk about how my experience lead me to end up developing a website for a local business in my area. 

After learning about User Experience and doing a couple of personal projects I found a small beauticians in my local village who wanted their website to be redesigned. I originally began by looking at what services she provided, if all of the services were meant to go onto the website, basically learning the purpose for this redesign. Was it going to be a simple ‘face-lift’, or was it to change clientele, or just to get more people in period. After a prolonged meeting with my client I found out that she wanted to start selling the more of her higher end treatments and that her current clientele rarely chose those treatments.

So I knew what needed to be the focus point of the website, treatments. I then proceeded to see if the problem I was tackling had already been solved by creating a usability test for my clients competitors, this also served a dual purpose by allowing me to uncover any issues that existed within the designs of the competitor sites. I then found several testers to run through the usability test for several competitors and took note of what worked and what didn’t.

Treatments Alt

As with my previous projects I was then able to create an interactive wireframe using Balsamiq. I made a above mockup of the website to put forward to my client, before I did that though, I ran the usability test on the wireframes I’d created once more. I found several issues with my original designs after the testing phase and iterated on them in order to try and solve the issues I’d failed to originally solve and then ran another round of testing. At this point my product was ready to show to the client, so I sat with them and let them interact with the wireframe to understand what their site would potentially look like and how it’d act. Due to their level of computer literacy they weren’t fully aware of what it was I was doing at the time, but after our meeting they understood the purpose of wireframes and that the design was essentially near complete, and that I’d now begin development. In the end the site was fully coded using just HTML, CSS and a small bit of JQuery to animate the front page.

Due to the sites requirements, of which there weren’t too many, the challenges faced during implementation were quite simple. It was a site purely of information and basic interaction, there wasn’t a need for accounts, a basket system, etc. It was a site that required smooth navigation, and a simple to understand layout of information, both of which had been solved due to the wireframe testing earlier on in the project.

Capture(5)

In terms of the actual coding, due to the sites simplicity, it was quite straightforward and was therefore a good opportunity for me to work in a language I hadn’t had as much experience with. I’d spent time in University making a simple shirt-buying website several years prior to this project, but more recently I’d spent my personal time re-learning about HTML & CSS through codeacademy’s courses. This gave me a refresher in the creation of lists, tables, divs and how CSS can really bring the life to a page.

In terms of complexity, the most complex part of the site was the home-page. Due to it’s lack of content it was decided that some images of the clients premises and the client actually working would be a warm welcome to the site’s visitors.  The HTML home page had several images as well as the toolbar that was on every page of the site. So in the CSS file the images (put within a #carousel div tag), were set to cover the raised section of the page and hide the overflow of the other images. The carousels unordered list was set to be wider than the screen so that all the images would effectively line up, shoulder to shoulder, then the individual items in the list were set to a certain width.

Capture(6)

The solution after getting each image to line up next to each other in the unordered list, was to use JQuery to animate the unordered list to the left so that the images would scroll past. The only issue then was to get the image that had been pushed to the left, to be set to the back of the carousel again so that it’d run infinitely.

The site was now fully designed and developed after a meeting with the client to agree upon a colour scheme. Since they didn’t want to share their details for their domain they asked for a handoff of the code and assets so that they could upload everything on their own. This concluded the entirety of the project from my side, I’d been able to apply my new UXD skills to a real-life project, I’d created a website outside of my studies, and I’d gone out and made work for myself as a junior developer/designer.

Advertisements

One thought on “The Beauty of Design, & Designing for Beauty Pt.2

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s