Header - Before redesign
Rojin Maljaei
UI/UX Designer
Improving a design
Incremental design improvements for a store page
Project details:
One of the products of Uberall is a store locator widget. Businesses can integrate the widget on their website which helps their users to find different stores of a brand. Also, the widget provides a dedicated page for each store to provide more information about the branch. This is a highly customizable widget to adapt to each brand's current design and it looks like a native part of their website.
In this project, I was asked to come up with 3 incremental design improvements for the template of the widget. In order to visualize these improvements, I used Samsoe's store page in Berlin as a sample. Samsoe is a fashion brand that is using Uberal's widget on its website. I completed this project with Adobe XD.
1. Reordering the header
Users usually decide to stay in a page or leave it in the first few seconds and the header is usually one of the sections they see in that period of time. This makes the header of a profile page is one of the most important part of that page which catches the eyes of the users significantly. In the current design of the header, the store address (contact information) is on the left side, some other contact information (like phone and email) are displayed in the working hours box and a few CTA buttons are on the right side of the header.
I improved the header in a way to organize the data better and gathered all these related data in one box on top left of the banner image. As you can see now we have store name, address, phone number, email address, current availability status of the store together in box. All of these data are contact information and user can find it easily in the first look at the page. Also the CTA buttons look more prominent in that box.
Header - after redesign
2. Redesign the photo gallery
An Album should stand out well to attract the eyes of the viewer but while I was scrolling down the page, I didn't notice there is a photo gallery on the left side of the page next to the working hours. It was not standing out because
- The size of the photo album was 1/3rd of the page which is too small
- There are too many distraction points around the photo gallery
In this improvement, I widened the photo gallery to allocate 2/3rd of the page and I just kept one column of information next to that in a slick and minimal way. In this way, the images are big enough which we don't need to view the full screen images in a separated overlay view. Also we only show one image at a time, which makes the design simpler.
Photo Gallery - Before redesign
Photo Gallery - After redesign
3. Boost the simplicity
In the design of this template, a user will see a lot of boxes for different pieces of information which I believe it increases the complexities. We can merge some of these data in a simpler and smoother way to reduce the number of boxes.
For example, there is a separate box for social profile links of a brand, I displayed these links with the icon of each social media below the working hours and made the design more minimal. All these social profile icons are clickable and connect the user to that related page.
Social profile design
All suggestions in one view
You can view all these improvements together in the section below. Combining these enhancements helps to show the data in a simple and smooth way. Simplicity was the key principal in all of my improvement suggestions. I believe reducing complexities is going to help users to understand a brand's message easier which might end up with a better user engagement and a lower bounce rate.
Final design after 3 improvement suggestions