salavon.com
UX Designer & Developer
Summer 2021
Over the course of this project I redesigned and implemented salavon.com to be a functional and refined site for mobile platforms using a Django framework.
Tools Used: Django, CSS, Javascript, Adobe XD
Problem
Previously, salavon.com mobile interface was not dynamically designed, so the mobile interface was not readable, and unused whitespace took up too much of the layouts. Salavon.com. Furthermore, many of the scripted elements, such as pop-ups were not designed to be responsive to mobile.
Also, salavon.com lacked accessibility features such as alternative text for images and links.
Approximately halfway into the project we were informed that our web hosting service was being discontinued, so my work shifted away from implementing new site features and instead focused on migrating the site to AWS.
Info Page
Initially, the information pages were not user-friendly on mobile devices. The horizontal layout left 50% of the screen as white space on pages like the one to the left. Additionally font size and buttons were too small which meant users had to zoom in order to navigate and often led to accidental actuation.
Additionally, the sidebar navigation was too small, so we moved it to be right aligned at the top of the page and increased font size. Since the sidebar highlighted which page the user was on, the header titles became redundant, so we hid them on mobile.
Below are the before and after of various info pages
Features & Reviews
Before, the review icons were too small, leading to lack of readability for the image and text. Instead, I made the icons dynamic to 30% of the viewport width and enlarged the caption text
Next Steps
Due to shifts in priorities there are still several site features that I designed that I was not able to implement to create a more modern site that is optimized for mobile. I created wireframes of possible new layouts for the work detail pages.
The work detail pages primarily act as a way to experience Jason Salavon’s work as well as provide important context of methods and intention behind works. On mobile we want a gallery-like experience where users focus on the visual experience of the pieces before reading further about the work and exploring similar pieces.
The current design is not ideal because the two column layout limits the width the work images can be displayed and makes the page less readable. Furthermore, the design assumes that each work will have 3-4 subpages which leads to spacing issues on column lengths, where the sidebar is too long, or only one link that leads to unintentional white space.
In the wireframes, I created a linear design rather than relying on the side bar. Additionally, I proposed changing the subpage sidebar to a horizontal carousel that would take up the same space on the page regardless of the number of subpages. Additionally, the runoff of the items indicates to the user the ability to scroll to more options.
Below are the various wireframes I created using Adobe XD for page designs
