Experience Sunnybank
UI/UX design Web Design
Overview
Experience Sunnybank is one of Brisbane’s most unique dining precincts, with over 50 dine-in and takeaway options within a 5-minute walking distance. Sunnybank Plaza and Sunny Park shopping centres are in the heart of the busy hub of Sunnybank, providing food, entertainment and a shopping experience like no other. The goal of Experience Sunnybank is simple: to motivate people to visit the two centres, and help them discover and understand Asian food and culture.
I designed the whole website, from information architecture, wireframes to visuals to support Experience Sunnybank to fulfil the vision “invite people to experience the real Chinatown of Brisbane”
My role in this project was to:
- IA and Wireframing
- Visual Design and Prototyping
- Design to dev handover
- QA testing
Tools: Sketch, InVision, Zeplin, Photoshop, Illustrator, Filmora, Draw.io, UXPin
AGENCY
Follow Agency
YEAR
2014-2019
ROLE
UI/UX Designer
The Problem
The existing website was outdated and lack of mobile responsiveness. There is only basic information on every restaurant landing page. Food tours, cooking lessons and the $2 food trail were their featured areas need improvement to attract more people.
The Process
Information Architecture
I was briefed by our strategist, we got together to discuss this project. After gaining a valuable understanding of Experience Sunnybank(the goals of the project, the concepts, the possible personas), I mapped out some user workflows, content structure and sitemap.
Wireframing
The content-first approach in web design focuses on storytelling, our content creator interviewed the restaurant owners, wrote stories and photographed feature food dishes. Before moving into the visual design phase I created wireframes for restaurant landing page and food discovery tours page on Uxpin, we briefed to our content creator to write content under the page layout.
I made a clickable prototype to show restaurants, category filters and dishes, we presented it to our clients in meeting so they can understand the ideas of the new website.
Design
Once the wireframes were approved, it was ready to move into the visual design phase. The overall look and feel of the site should be reflected on the Experience Sunnybank’s paramount concept – experience and discover Asian food. I implemented numerous features to enhance the concept, I use colour palette, brush fonts, patterns, gold textures and other asian elements to build the visual language for Experience Sunnybank.
Restaurant category page
There are over 60 restaurants in the Sunnybank Plaza and Sunny Park shopping centres, the restaurant category page lists the featured restaurants on a the top and with the view all button to let users to explore all restaurants. The advanced filter functionality enables users to find the right restaurant. I implemented advanced filters in three different formats: drop-downs, images, and tags.
I designed one restaurant page first before the content ready and made a moodboard, share them with our client to get feedback. Feedback was positive so I can move on other pages.
Since Experience Sunnybank is content-focused site, I suggested using a flexible content approach to build the site. For restaurant page, sections can be reordered and hidden. For the blog post, I created 5 type page templates, each template has the components to suit the specific contents. Each page has the ability to add or remove the repeatable content area and select the layout.
Storytelling landing pages
Design-to-Development Handoff
With the visual design finalized, a high fidelity prototype was built using InVision that could be shared with our development team. I added notes on InVision to provide interaction notes, and advice on the flexible content approach. I created a web style guide and image size guide for development, I uploaded designs to Zeplin and provided assets.
Go Live
Before launching the new website, we are moved into QA phase, I checked front-end reported the issues. Our content creator finished restaurant content and photos, I uploaded them on WordPress site. I created video backgrounds for the key landing pages. I cooperated with the content creator to upload content for blog posts.
Summary
This was an interesting project to work on. I especially enjoyed the design direction exploration phrase. What I have found to be the most challenging part is writing development notes, especially about the flexible content approach, there are some customized sections on a restaurant page, the pattern and background images changed to reflect cuisine and region. The site launched in 2018.
