Redesigned a full responsive and interactive website for parker place mall
Roles: Business Strategist // Content Strategist // Project Manager // UX + UI Designer // Web Developer // Photographer
[Project Length] 6 Months
[Group Members] Billy Tam (web developer) // Myself
[Deliverables] Responsive Website // English & Chinese Versions
[Tools] Wordpress // Sketch // iPhotos // Mailchimp // Spreadsheet // Cloud Drive
[Skills] Project Management // Business Strategy // Content Strategy // Client Presentation // Research Methodology // Competitive Comparative Analysis // Wireframe // Prototype // Information Architect // Sitemap // Photography // Graphic Design // Basic HTML & CSS // Database Management // Usability Test // Site Maintenance // Clients Coaching
[Date Released ] December 2017
Parker Place had their website designed and build nearly 15 years ago. However due to lack of maintenance, many features, store details, links and mall informations were outdated. Parker Place is looking to have a facelift design that can better serve the needs of their front-end users and at the same time, a simple and intuitive back-end system for clients to easily control the site without having to code.
The entire website is completely redesigned with a clean and modern look. Its simple-to-navigate usability is targeted for its specific end users. New interactive functionalities are added to create better customer engagement. Also website is written in a way that it can be updated frequently and easily by clients without coding background.
I began the project with a thorough site audit and observed a list of problems.
- There was a "Feature of the Month" section in the Homepage, however nothing was being featured
- Call-to-Action buttons looked similar to graphics. They were not noticeable as clickable links
- "News Flash" section on Homepage again has no information
- "Join Our Mailing List" section on Homepage does not have subscription functionality and the link was broken
- Media Page does not provide any latest news instead, the information shown there was more than 10 years old
- Shops Info were not up-to-dated
- Shops were missing from Mall Directory page
- Shops were no longer existed in the mall but were still presented on Mall Directory page
- Colours were inconsistent on the Directory Map. Special functional rooms such as washrooms, elevator rooms, electrical rooms and sprinkler rooms were not categorized in the same colour.
- Shops were divided incorrectly on the Directory Map
- Event details were not given. Limited information can only be viewed from event posters
- Lack of identity of a historical and landmark shopping centre
INTERVIEWS & surveys
To understand the behaviour of both the front-end and back-end users, I've conducted interviews and collected surveys over 4 groups of people.
- receives up to 10 phone calls a day inquiring shop contact numbers
- has no programming knowledge
- has very tight budget on hiring web developer to maintain the website frequently
- can describe the proximity of nearby shops but not knowing the exact location or shop name
- will look for direction and suggestion for getting specific products or services
- Tenant turn over rate is high, physical directory map is often outdated
- want to be exposed to a larger market besides walk-in customers
- opened for business for months but still not showing up on directory map
- feeling lack of advertisement
- very high traffic especially in the food court area
- customers are interested in participating mall events and in search of events details on wall posters
- high volume of donors come for the Four-Face Buddha
user flow + scenario
According to the research, information that users would like to obtain the most from parkerplace.com is store details and upcoming events. To facilitate our users, a new and faster route has been created in the revamp.
The diagram below shows how users can reach their final goal of viewing store detail information and its location map. Starting from Homepage, with only 2 clicks, users can get store contact number, which is the highest demand based on research. And with 1 more click, users can get full store details: store photos, business descriptions, hours, contact emails, website redirecting, and last but not least, location map.
To facilitate what users expect to see and what business owner wants to connect on the website, I've rewritten the structure for the website. The must-have contents are added, irrelevant informations are removed, tabs are reorganized, new labels are named, as a result a clear and easy to navigate sitemap is born.
Categorizing and labelling
3 New labels were given when recategorizing all 150+ stores, adding the total number of categories from 4 to 7. And total number of stores have increased from 135 to 156 as many stores were missing from previous website.
Content Preparation / FEATURE PRIORITIZATION / wireframes / lo- and hi-fidelity mockups
Wireframes to User interface
From low fidelity wireframes to final user interface design.
According to the research, many customers can point out where the store is located in the mall, the products or services the store provides and know exactly how the store front look like, but not too many of them remember the name of the store and even impossible to name the store unit number.
Therefore, the directory filter page is completely redesigned with added store front photos. And as previously mentioned, new filter labels are created to better direct users to the right category.
A new directory map is designed not only to solve users' frustration from the past, but the use of new colours enhanced the elegancy of the shopping mall and created an unity colour tone to the rest of the website.
- Designated shop is highlighted using contrasting pink.
- Different floors and phases are presented in different colour tones.
- Simple effective icons are used to give extra directions to users for instance washrooms, elevators, management offices, security office and etc.
Unclear icons and buttons were used in previous website and caused many confusion. Here, simple and straight forward icons are designed for the new website to better direct users.
High Fidelity Wireframes Output
The website is written on Wordpress with various plugins. Rather than displaying a foreign coding language to our client, the internal backend shows blocks of information that can be easily edited.
Data Management / naming Convention
In order to maintain a well organized media library for clients to store and search data, as well as to display contents in a consistent way on the site, I have come up with a naming system to be used across the website. Such naming system is used when saving any medias into the media library on Wordpress, and whenever names have to be given for events or stores creation on Wordpress.
Yes, of course there is much more about this project behind the scene. If you'd like to know more on what I have contributed to make my clients smile, we can chat about it over coffee.