Case Study 1 | Portfolio

Topside

Case Study - Ellie Feighery Beauty

Project Overview

As a college student entering my second year of Honours computing, I was unable to find any part-time work for the summer of 2020 due to the ongoing Covid-19 pandemic.

Considering the uncertainty of the virus, it meant I had to complete the remainder of my first college year at home through online classes.

After completing my first college year, I realised that with everyone having to socially distance themselves and unable to find work, I needed to do something that can help me to learn a new skill.

This, in turn, is beneficial for me to reduce the likeliness of boredom and to help add a new skill to CV for future employment.

After speaking with my mentor Janice, I chose to undertake a User Experience (UX) Design project to learn their line of work and their responsibilities. This new understanding of UX Design will also help to inform my computing studies. It will also equip me to collaborate more effectively with others when working on projects. To do this, we used a website concept that I used for one of my past college projects, a makeup website.

My client is Ellie who is a freelance makeup artist who initially worked at Bobbi Brown and Inglot and is a qualified beauty therapist/artist.

The problem: Ellie needed a website to help promote and advertise her business on a larger scale.

The solution: Creating a mobile-friendly makeup website that can be viewed on desktop computers and mobile devices.

My roles

Role: UX/UI Designer and Developer

Tools: Adobe XD and Illustrator, Lucidchart, Wix, Notepad, pen and paper, Pixlr, Pixabay

Platform: Desktop, Android and IOS devices

Timeline: 13 weeks

Website link: https://eoghanrcfeighery.wixsite.com/efbeauty

Process

I used the Double Diamond design model to help me guide the client and test users through the process and design decisions.

This design model is adopted from the divergence-convergence model Bela Banathy proposed back in 1994.

Discover

First, I conducted primary and secondary research.

I had a look at other professional makeup artists like Kellie Fitzgibbon to get a sense on the different pages. Then I conducted user interviews with 4 different existing clients to understand their needs plus their brands, website colours and technology usage preferences.

I also interviewed my main client Ellie to better understand her business needs. Additionally, I had to watch a video that explored modern UX design trends.

The analysis for the user interviews

An excerpt of the business needs questions

Define

Next, I created 3 user personas, 3 journey maps and 3 storyboards to illustrate their experiences and how each user felt at each stage.

One of the user personas I created for the project.

An example of a customer journey map I created

A storyboard for one of the journey maps

Develop

After showcasing my prototypes to Ellie, she told me that she liked the first homepage's design and with Janice's advice, I edited it into the final product.

Other touches included changing the colour of the navigation bar and the footer to grey to keep the design grounded.

With the design finalised, all I had to do now was decide how to create the entire website with the XD design.

Then, I created an information architecture tree to determine the pages and navigation for the website.

Once I drew up a draft for the layout of the website, I asked Ellie for her feedback. She gave me some tips on certain elements.

I then resorted to using Adobe XD to develop 2 high-fidelity prototypes for the website and its functionality.

The sitemap for the website

I used photos from Ellie's Instagram

to have an idea for how the gallery display will appear onscreen.

I even created a floral design background with Adobe Illustrator to avoid copyright infringement.

A rough sketch for the homepage layout.

A prototype for the first XD homepage

A prototype for the second XD homepage

Deliver

Finally, I started to create the website in its entirety.

Initially, I used a program called Notepad to test the waters on how to position the elements. However, I kept running into brick walls and realising how arduous and long it would take to build the website this way, I decided to use the website builder Wix.

The reasons why I used Wix was because:

1) The project was under a limited time frame.

2) A free alternative compared to other costly website builders like WordPress and Elementor.

3) Allows for mobile layout creations.

4) Precise sizing and spacing for the elements.

5) The Wix platform has a user-friendly WYSIWYG editor. With just 1 hour of training, the client can easily update her website without the ongoing need for a developer.

6) Wix websites are secure, maintenance-free and backed-up by the company. This is a major benefit for the client in comparison to other popular website platforms.

After some final feedback to keep the design cohesive, I was able to make the website look welcoming and professional in the same vein as other professional makeup websites.

The link to the published website is available here: https://eoghanrcfeighery.wixsite.com/efbeauty

The final edited version of the homepage.

Reflection

Key Learnings:

The overall project gave me a bigger insight into the roles and responsibilities of UX designers.

The biggest obstacle was my initial attempt to use for building the site which proved more difficult.

Mostly because the website I made had more complexity in its layout and elements than my past website attempts.

I learned that constructive feedback is integral for UX work and any other professions. As such, I learned how to not to feel defeated and not let it overshadow my desires to learn.

I became more assertive thanks to doing the user and business needs interviews.

Making mistakes is good, but learning from it is even better.

I also acquired a lot of experience from using different software like Adobe and Lucidchart.

What other projects will I do next?

My future self endeavor would be to learn how to use Adobe's Dreamweaver so that can be a lot more confident in coding up websites with HTML/CSS.

Back to the top