UX/UI design case study

The following case study will take you through the editing process of three second-year web projects.

As part of a course in my fifth semester, I got the opportunity to redesign three website projects I believed could be improved in terms of the UI (User Interface) and/or UX (User Experience design).

Here, I will share the process and final results for each project. Enjoy!

Banana Paradise

Banana Paradise is an online game where the user helps Beau, the monkey, catch as many bananas without getting hit by tree branches. Its colourful illustrations and design give the user an enjoyable gaming experience.

Banana Paradise

Original Mandate

Two teammates and I were assigned to develop an original game using an HTML canvas.

Editing Process

While I had great comments amongst my feedback group about the color scheme and illustrations, I was told the homepage and help page lacked consistency and could benefit from a more impactful interface so the user can have a better experience. Also, the game needed to be tailored for mobile users as it lacked responsiveness. Correcting these issues will create a successful final product.

In the beginning stages of the process, I reassessed an element that needed to be consistent throughout the game — the font. I researched and discovered the typeface I chose for the game title is not available as a web-font. Consequently, I decided to use images for the titles because there were no similar web-fonts that fit our theme, except for the game page because HTML canvas is not flexible for customization.

After the first issue was resolved, I revamped the home page with new buttons to make the site more attractive for the users. As for the help page, I tried to re-organize the icons and description but wasn’t able to because of my unfamiliarity with CSS grids. I decided to leave the page structure as it was originally and focused more on changing the background and button only.

Finally, I attempted to make the game responsive but was unable to do so as the background images wouldn’t resize. Since this wasn’t a major issue I left the images nonresponsive.

Banana Paradise
Banana Paradise

Final Results

The font for the gaming site is not consistent due to some restrictions with the canvas structure. Also, the user interface for the help page was unsuccessful because the elements in the page are unorganized.

On a positive note, the homepage looks cleaner and more professional. The final result definitely improved from the original design.

Challenges & Learnings

Considering my role did not involve the development of the game, my knowledge and skills with the game structure weren’t strong. There were a lot of trials and errors figuring out how to redesign the game user interface.

I learned to research beforehand the adaptability of a font and to be much more involved in the development of a project in order to be prepared for any future revisions.


Personal Website

This personal website is a space to upload my assignments and exercises for a web course.

Personal Website
Personal Website

Original Mandate

I was assigned to develop a personal multi-page website with Bootstrap.

Editing Process

During a group feedback session, I was told my website was overly simple, it had too much white space and lacked dynamic elements. Overall, the user interface design and user experience needed to improve in order to make my website more interesting for the user.

I researched current web portfolios trends to get an idea how I could improve the UX and UI of my website. The most captivating portfolios had a preloader, a logo or the name of the person in their menu, and were visually dynamic. With this information, I decided to no longer use Bootstrap because its framework couldn't let me develop a website that fit my current style.

In the beginning stages of the process, I reassessed the menu, fonts and color scheme. I made the choice to use a vertical menu so the links of my assignments were organized better. As for the font, I decided to use a sans serif font to make my site more professional and modern. Finally, for the color scheme I decided to use lighter tones so the vibe of the website is calm.

Finally, when it came to redesign the structure of my site, I struggled to do it because of my unfamiliarity with CSS grids and JavaScript. Since I knew I wouldn’t finish my assignment on time if I wanted to animate my website, I decided to keep it fairly simple using only CSS animations. As for the grid structure, I managed to do it with the help of my teacher.

Final Results

The website looks more modern and professional with the new features. However, there is still a lot of to improve for my personal website in terms of dynamism.

Challenges & Learnings

Considering my unfamiliarity with JavaScript, I had a lot of difficulty developing what I envisioned for the animations of my site.

I learned to practice more my JavaScript skills so if in the future I want to animate a website I will have less difficulty to do it.

Personal Website

Snap it

Snap it is an app for people who want to share their photographs to the world. It aims to connect creative people and let them explore their passion. The theme ties in with the creative atmosphere of our target audience.

Snap it

Original Mandate

My teammate and I were assigned to develop a photo sharing app with a database system and PHP and SQL code.

Editing Process

During my group feedback session, I was suggested to change the font, give more emphasis to the tagline and put a bigger gap between the image gallery. Basically, the feed page needed to have a better user interface design to make the app look more professional.

In the beginning stage of the process, I found out the file uploader widget became discontinued. Therefore, the uploading system was no longer working. I had to start from scratch and develop a new system for the app, which was very challenging for me as I’m not proficient in JavaScript. With the help of my teacher, I was able to make the app work again.

After that issue was fixed, I went on to work on the user interface of the app. For the register page, I decided to remove the animated gradient background so the page looks less amateur. I opted for a background image as most photo sharing apps use one for their background. As for the font, I decided to only use a sans serif font to tie in with the modern vibe of the app.

Finally, I changed the user path of the app. Instead of having the user go straight to the feed page, they must go to the register page before accessing the feed page. This way the user has a better experience as a first-time user of the app.

Snap it
Snap it

Final Results

The app definitely improved as it has a new uploading system and user interface design. However, I would like to improve the app in terms of the animation and menu design.

Challenges & Learnings

Considering my unfamiliarity with JavaScript, it was impossible for me to create a new system from scratch.

I learned to always check if the system of a project is still functioning and to be prepared for the unexpected.


Learnings

Through experimentation and with the help of my professor and peers, not only I became more self-aware of the evolution of my technical skills over the course of my studies, but I strengthened my design skills and determination to create a better experience for the user.

The editing process was challenging, but I persisted to accomplish most of my objectives for every web project.