Web Design | The Right Pear

Details UX/UI Design Right Pear Jarell Alvarez D3 BCIT portfolio

Project Details

Client: BCIT Third Term

Date: 14 May 2016

Category: Web Design | User Interface | User Experience

Software: Atom.io | Illustrator

Role(s): Web Designer

Purpose UX/UI Design Right Pear Jarell Alvarez D3 BCIT portfolio

Purpose

The Right Pear was a project built for enthusiasts, hobbyists or even audiophiles in the music scene. The idea came about due to the lack of recommending headphone applications out there and I wanted to create something unique that had function. This was created using HTML, CSS, Javascript, and Jquery to create the ultimate audio recommending experience.

Process UX/UI Design Right Pear Jarell Alvarez D3 BCIT portfolio

Process

The site began with extensive research on what people with headphones would love to see in a website. By visiting multiple retail sights and taking inspirations from Arc’teryx own jacket chooser, it helped me narrow down the type of selection choices I would want to give the user. I then began sketching the logo (that took me a week and many iterations) in order to “pear” the concept of a headphone, music and fruit theme site. After logo sketches, the style guide was completed to reflect all of these needs.

User research was very important and thus personas were built to help reflect actual users of the site. Afterwards wireframes were made for multiple devices and testings soon began. As soon as the prototype was ready I had several users test the site. Upon further testings I was able to take out unnecessary elements and make the UI more clear for them. The site was produced using the helpful framework Bootstrap and the infographic was built with illustrator that included javascript to make it functional.

Final Outcome

A website that's usable by anyone, this was a great showcase for user interactivity with elements to test the UX (User Experience) and how to make good UI (User Interface) for a prototype/usable site.

styleguide rightpear Jarell Alvarez bcit d3
wireframe rightpear Jarell Alvarez bcit d3