Elizabeth Sloan

Sloan Web Designs

Overview

This was my first deep dive into UX design and front end web development. This project was built from the bottom up with myself as the client. The idea was to provide myself a website that employers and potential would be able to visit and hire my skills. But mostly this was my first project that implemented everything that I had learned from my UX/UI and Frontend courses. I was the only person who worked on this project. I served as the UX/UI designer, researcher, and developer. This site was made during the summer of 2022.

An overview image of the final Sloan Web Designs desktop and mobile.

Problem

I needed to create a site that showcased my front-end development skills, as well as my UX/UI ability.

Goals

To create a website that employers and clients would be able to find information about myself on. There also needed to be a way to get into contact with me in case they were super impressed and wanted to hire me.

UX/UI Design: The end user needs to be the focus while creating this site. The user should be able to easily achieve their goals while using this site. Responsive: The site should be responsive to fit better to different screen sizes. Extensibility: This site needs to have the potential to grow in case I wish to work further on this business. Elegance: Anyone should be able to jump into and work on the code at any time without any confusion.

Design Process

Designing

I started with the ideation process of any UX process. It was important to understand the end user of this site because it wouldn’t matter how well the code is written if potential employers couldn’t contact me, or find other work I’ve done.

I also explored how other web development companies formatted their sites to find out how the industry standards aligned with my ideas for the site. Afterwards I wireframed, and tested with a few close friends. Then I took their suggestions and created a high fidelity prototype, using mood boards and features inside Adobe XD to edit the details. I ran more tests and made more changes, then I started coding once I felt the UI was ready.

Developing

Because this was my first time coding a site on my own, I initially made the mistake of trying to design the whole page at once. I had to restart and section out the page into the individual spaces so I could get a better understanding of how the markup aligned with the UI design.

I also wanted to show that I knew JavaScript, so I added just a few changes to a couple of buttons. By this time I felt confident with the work I had done, so it was time to show the world what I had to offer.

Deploying

This part took considerable research on my part. I had never considered that I would also have to publish client’s sites, so it was a wonderful learning experience. Originally I had a free hosting site from one of my online courses. It worked well for a while, but I was ultimately unsatisfied with it.

During a separate frontend course a few months after deploying, I learned about GitHub Pages. And that’s where the site lives now.

Sloan Web Designs | GitHub Location

Results

This site is unfinished, but ultimately it was a wonderful learning experience of designing, creating, and deploying a static web page. If I were to measure the success of the site, I would keep track of how many inquiries were received about hiring my skills.

Image of moodboards, font place holders, and the 'OOPS!' web page.