“Many Felt frustrated due to the lack of in-depth and accurate info when it came to sneakers, so I created it” - Matt Halfhill
Overview:
This was an individual project intended to familiarize ourselves with the 10 usability heuristics for user interface design and put it into practice. Due to time constraints, we focused on one heuristic and took a website through the entire design process to end up with a final digital prototype. This was designed for the desktop website platform only.
The challenge:
Gathering plenty of user feedback was essential for the success of this project and it was also the biggest challenge. Learning how to not only record feedback, but implementing by finding viable information was the biggest takeaway.
Client:
nicekicks
tools
ps, illustrator, indesign, adobe xd
Time:
3 weeks
Role:
UX/UI Designer
PROBLEM
Visually cluttered and distracts from the main focus of highlighting sneakers.
SOLUTION
Use aesthetic and minimalist design heuristics to bring focus back to the sneakers.
INTERVIEWS
After interviewing current users, I found that most are looking to stay current with new in the sneaker industry.
Insights
"Kicks on Court" is a favorite
"Celebrity Sneakers" is a favorite
Don't like categorizing by brands
Seems a bit cluttered
HEURISTICS
This is the first page you see when you enter the website and in regards to heuristics, the aesthetics and minimalist design does not meet standards. There is differing white space in between image boxes, as well as differing font color and sizes that diminishes the relative visibility.
HEURISTICS
This is a close-up of individual blog posts as you can see the basic info such as title, date, and "view post" if you hover over with the mouse. The "view post" seems to be repetitive and unnecessary because it is the same for all blog posts.
COMPETITIVE AUDIT
Highsnobiety is a direct competitor website that creates similar content and the layout is similar as well. However, the white banner and better spaced out image boxes give this website a much better aesthetic feel.
COMPETITIVE AUDIT
Mikiya Kobayashi is a personal portfolio website that is an award winner for minimalist design and this simple landing page rotates images on a timer. I believe this is a much more striking and impressionable welcome when you visit the website.
COMPETITIVE AUDIT
Once you scroll down to enter the website you are presented with an image gallery of all the projects with no text. If you scroll over an image the project information appears. I believe this achieves at presenting multiple projects in a minimalistic design.
Persona
TONY CHAN / 24 years old / Queens, NY / Blogger
Avid sneaker enthusiast, relies on websites such as Nice Kicks, Highsnobiety, and SneakerFreaker for release dates so he can wait in line to purchase new sneakers. Enjoys hip-hop music and street art, and particularly graffiti.
USER FLOW
From the landing page there will be 3 featured posts cycling through if you choose to click. If you click, you will be taken directly to view that featured post. If you scroll down, you will will be taken to the homepage, which will showcase all the blog posts. Then, you can click on the post to view it.
LANDING PAGE
I have taken the 3 most popular topics: Celebrity Sneaker Stalker, Kicks on Court, and Inside the Social Status and will cycle these through on the landing page. You have the choice to either click to "view post" or you can scroll down to go to the homepage where you can see all of the blog posts.
HOMEPAGE
I have maintained the scroll down for the homepage, however I added a bit more minimalist design by making the images equal size and equal spacing between the images. Also, the banner has been centered with the logo, menu on the left, and search on the right. The white banner keeps more consistent with the overall theme of the website.
USer Testing
There was a positive first impression from all users. The new interface is much cleaner and visually appealing
Ghosted landing page image makes it look like a background image
Change font color for landing page to make it more visible
Homepage still could be more minimal
Final Solution
Based off of the feedback, I created the landing page to cycle through every 2 seconds. I got rid of the ghosting to make it look more like a "clickable" post. I also changed the font to all white to make it more visible in front of the image.
Final Thoughts?
I got rid of the text below the images and added the info when you hover over the image with the mouse. I believe this is the most minimal design I could achieve while keeping the website visually appealing. If I were to continue this project, I would tackle ad placement and how to implement ads in a minimal design layout to not takeaway from the content of the website.