Warwick Mall Website

Brown University UI/UX Course
Timeline: 2 weeks

I have chosen to redesign the Warwick Mall website as per class UI/UX assignment.There is some basic information provided, such as the mall information including the directory, events, gift cards, leases, and movie times. However, I wanted the viewer to become more engaged with the website. You can preview their website here.

New Wireframing

I wanted to focus on the mall events rather than directly taking the user to four submenus. The user will become more engaged with the mall and the webpage as there are also more interractions. There are fixed headers and footers found throughout the site that would allow the user to immediately find their information. In the original website, the user would need to dig around to find out some information, such as gift cards.

Although I do have more information found in the about page that is not found in the header, such as transportation, amenities, and code of conduct, I believe the user is able to easily find this information. It would be also difficult to incorporate these subjects into the header since there is already so many links to open. Based on the level of importance, it was a priority to keep the other links on top (stores, movies, dining, events, and map). Furthermore, I chose not to put a sub menu since the other links do not have them.

Instead of having a drop down menu and a map to rely on finding the store, I chose to lay the stores out in a grid. The user will rely on the search bar to see if their store is listed in this mall. There is a map option to look at as well.

The original event page looks like similar to a list, thus I created a linear timeline. It is easier to focus on less events based on ones that are most recent/ending instead of seeing everything in a list format. The circles indicate a specific event that will occur and possibly be color coordinated by its highlighted indicator. For instance, a holiday event can be signified by pink and a fundraiser by a purple. The highlighted area on the time also indicates the current viewed event – as the user scrolls through, the indicator also slides horizontally.

I chose to add a dining menu since it also generates revenue for the mall. One of the most appealing part of a nearby mall is its location of favorite restaurants. This mall has Panda Express, Taco Bell, Johnny Rockets, Longhorn Steakhouse, Buffalo Wild Wings, and etc. These stores are grouped with the store directories on the original website. It feels lost among the crowd. Therefore, having its own section in a website will allow the user to find a pleasant surprise of restaurants.

IPad Interface
This iPad interface resembles the website fairly similarly. The only difference would be that the top links are designed to look like a button. Furthermore, the inside scrolling images do not scroll normally, but rather swipe downwards to the next two events. The newsletter sign up also becomes a button. Since the bottom links are clicked less often and carry less importance, I have chosen not to create buttons that is similar to the top.

IPhone Interface
This iPhone 6/7 interface provides less space to encompass events and links. Therefore, I have included a menu bar on the top left to include the links. The events will swipe from side to side instead of up and down. The only important information fixed at the bottom is the “Help” and “Contact Us” links. The “Businesses” link is a different category compared to “Giftcards” which is thus included in the footer to fill up the white space.

Wizard of OZ Testing

The first task was to find any store that the tester wishes to go to and find out their hours. The user first went to stores and went to the search bar in the directory. Then they clicked on the store. Clicking on the store brings it to the store’s site. Interestingly, the hours are already shown on the store picture within the grey box. I probably need more lines to include more hour information (around 2–3 lines).

By expanding the information, the user will be able to immediately see it better.

The second task was to find amenities for a friend in a wheel- chair. It was nice to see the search bar being utilized to find the amenities. However, the user clicked on the icon instead of the + button. The + button drops down more information, but since the user clicked on the icon, nothing would have happened. I would probably make the + button closer, or allow the icon to also enable a drop down feature.