IDEA School of Design Blog | Capilano University Illustration and Design School

View Original

Prototypr publishes Evelyn Chua's interactive website redesign

As a third year interactive design student Evelyn Chua was challenged to redesign a popular Vancouver food blog - in only four weeks. She chose to focus on one section of the site - local food guides.

Her case study was very successful and caught the eye of a Medium publisher & popular UX/UI website Prototypr

See her published case study on Medium. Congratulations, Evelyn!

UI Style Guide & Grid Demonstration by Evelyn Chua (IDEA20)

UI Layout by Evelyn Chua (IDEA20)

Project Background

Hungry for a design challenge? In this project we will follow an industry ‘waterfall’ process to complete a website redesign for a local food/culture guide. Gain a clear understanding of the full digital production process: strategy, wireframes, digital art direction, UI design, prototypes and developer hand-off.

Our project is inspired by the ‘Guides’ section of the popular Vancouver based food/culture website Scout Magazine. To celebrate their commitment to local food/culture we are going to propose a redesign of their local guides section. The goal of the project is to practice a waterfall website redesign process, commonly used in the industry.

We created a fictional brand named ‘Salt’ for this project, based off of the popular Scout Magazine. (All original content, writing & images © by Scout Magazine).

Project Deliverables

The final project is to be submitted as a process case study on Medium. Insert ALL items on the following list as images, screen recordings or embedded content. You must also include links to the full external item (ex: InVision based items).

  1. Strategy Doc (Image + link to Google Doc)

  2. Art Direction (Image + link InVision Board)

  3. Lo-fi Wireframes (Gif Screen Recording + link InVision Project)

  4. Mid-fi Wireframes (Images + link InVision Project)

  5. User Testing (YouTube Video)

  6. InVision Prototype of Hi-fi UI Design (Images/Gif + link InVision Project)

  7. UI Style Guide & Grid Demonstration (Images + link InVision Project)

  8. Case study (Medium Article)