Website Heuristics
Projects which focus on UX/UI of different kinds of online websites.
Tom Ford Website Redesign
One of the titans in contemporary fashion, Tom Ford is known for its chic, modern, and expensive clothing lines, which often dictate the style of the season for most interested in keeping up with current trends. It is absolutely baffling then, that an aesthetic superpower such as this would boast such an unsightly layout design for their official website, one which sees the traffic of hundreds if not thousands of people on a daily basis, yet is next to impossible to navigate using common sense.
The developer of this website seems to have preferred the use of UI over UX in terms of layout and design, opting to plaster large images of Tom Ford models with no spacing and minimal text throughout the site, making the user have to search more carefully for what they are looking for as opposed to having their options spelled out in a convenient manner. While this may actually be a genius attempt at generating site flow onto multiple different pages (out of sheer confusion of site guests, but clicks are clicks) but most people may grow tired of searching tirelessly and choose simply to shop elsewhere. The goal of this project was to take three necessary pages from the Tom Ford website and give them a complete overhaul, allowing for actual maneuverability and prevent the user from becoming completely overwhelmed by the amount of content crammed into each page landing.
Although this project was completed near the end of 2020, the disastrous layout of the Tom Ford website is not a new development, I will include a link to their website as justification for the need of an overhaul (and if they may come to their senses one day and design something more sensible, the point of this project will be moot and I can blissfully eat my hat at the prospect of more tasteful web design).
Redesigned “About” Page
Redesigned “Contact Us” Page
The biggest issue plaguing the Tom Ford website, which should be fairly obvious if you spend a but of time exploring the site as best you can, is that all of its products and collections are sporadically advertised and arranged. Certain elements of attire will be advertised on the website’s initial landing page, but if this happens to not be something you are looking for, it can be difficult to navigate through to find what it is you seek, even if you try and search through similar items, as even navigating back, the breadcrumb system is less than optimized.
When redesigning a select few of their web pages, I wanted to try and make things more easily accessible for users, allowing things which are related to be more approximate to eaxh other, such as men’s attire, for instance, which I included together in a grid showing broad examples of what types of apparel the company has to offer, and allowing the user to continue into more specific rabbitholes, which can all easily retrace back to the main landing page for men’s attire.
Obviously, Tom Ford is interested in showing off their newer attire, which is why their current site pages are suffocated by ads of their newest releases, but I feel it is still very possible to advertise new releases while still allowing access to year round products or products from other clothing series. I achieved this by adding a scrolling banner to the top of the men’s attire landing page specifically called “New Arrivals for Men,” which users can easily scroll through and look at items which interest them more in depth from there. I also added prominent (but less prominent than the actual site) links which showcase their current seasonal collections, which at the time were the Autumn/Winter 2020 Collection and the Spring/Summer 2021 Collection. Those who visit the site specifically for those reasons can easily access them while allowing everyone else to shop more easily for things outside of those collections.
Return to Retro: Vintage Online Magazine
This project focused on the development of an online blog or magazine which was catered to a specific demographic and touched on topics which would be considered viable or interesting to those within this age range. A group assignment, we were tasked with ideating and developing a concept along with justification before moving onto the project itself.
My group and I concocted the idea of an online magazine which caters itself to covering stories, events, and topics which pertain to the resurgence of vintage or outdated trends and hobbies. This magazine was christened Return to Retro, and we each selected a different subject which has recently made a comeback in the current zeitgeist which we would develop an article upon to be placed into this magazine. The topic I selected was analog photography, particularly the comeback of Polaroid cameras and film development through the use of dark rooms.
During my time as a student, I participated in plenty of group projects in multiple different classes, but this is the first, as well as one of few projects, where we were given nearly total creative freedom to go in whatever direction we wanted and collaborate among ourselves to make sure the work was getting done. We even assigned two of our members to be an Art Director and Assistant Art Director for our group. This was a very valuable experience in my opinion, as it almost felt as though this were a real project assigned to a design department for a business, even if we were responsible for a bit more than just the design of the piece.
With the initial concept generated, we needed to develop a bit of an elevator pitch which we would present to our peers along with our professor. Our presentation needed to include evidence that this subject we chose was something which provided actual substance and that we had plenty of information to work with to create our own design, rather than relying on limited resources or taking work directly from others; the goal of this project was nearly total self-sufficiency and development.
With everyone having decidied their own concentration, we set out to conduct research and develop a brand for our magazine. I became known for developing well thought out branding boards, so I volunteered to do the work for that in my group. I also developed a series of icons which would help the user navigate through the different subjects provided throughout the website, I developed six different icons for each of the six topics we chose to talk about:
Fashion
Music
Photography
Film/TV
Arcade/Gaming
Sports
Acceptable deliverables were a 1,500 word article along with imagery which goes along with the topic. I had a stroke of inspiration during the development of wireframes for my article page, namely the inclusion of a corkboard which would house the images for my article, which would be edited to resemble Polaroid pictures suspended by thumb tacks. I created a custom elongated corkboard asset, each of the Polaroid pictures, and the thumb tacks using Adobe Photoshop, making sure to include random dates written onto the pictures to make them look more convincing, while also placing the link to the source of each image onto the picture as well, citing each of the sources of the photographs. It took a few tries to get the right length for the cork board, as I wanted to make sure it stretched perfectly alongside the text to the left. I wanted to include more of the accent color for the Photography section of the magazine, which ended up being a deep earthy red, so I added a couple of quotes which I colored that red to include it further throughout the design.
When showing the exported artboard from the Adobe XD file that this project was developed in, it becomes a bit more difficult to see the end result in all its glory, both because of the size of the article zoomed out, as well as being able to see behind the curtain somewhat, with the fixed elements of the layout appearing fairly obvious, such as the static background and the website’s navigation board. To make up for this, and to allow the ability to read the article itself, I will be including a shared link to the XD file which should hopefully allow the magazine to be experienced properly. Keep in mind of course that the page focusing on photography is the only one which was developed entirely by me, and that the works of five other individuals can be seen throughout the rest of the magazine, but that may be nice to see our collaboration and the synchronizing an overall layout style throughout the design. That detail ended up being one of my favorite parts of this project: seeing the work of six people line up and unify the entire project, despite everyone’s own unique styles, which you can still see in places throughout.
