A case study in developing a responsive web design for a naturopathic doctor

Image for post
Image for post
Mock up of the Home Page for Dr. Kathleen Mahannah

Team

UI: Vivian Lin
UX: Crystal Chow, Maheen Kamani, Ali Saai

Role

UI Designer, Product Owner (Scrum Methodology)

Task

Working in tandem with UX designers, create a responsive web design for Dr. Kathleen Mahannah, a naturopathic doctor located in North Vancouver, Canada. In addition, rebrand Dr. Kat with a fresh, new look that reflects both her personality and her unique approach and knowledge regarding naturopathy — to ultimately gain more bookings, email subscribers and create a personal one-on-one connection through a built community of empowered users.


A case study in developing a cohesive UI identity for a first-of-a-kind mobile app

Image for post
Image for post
Isometric view of Explore, Onboarding and Profile screens for the GNO app

Team

UI: Nicole (Neeko) Colada, Vivian Lin
UX: Kevin Tam, Ali Saai

Role

UI Designer, Product Owner (Scrum Methodology)

Task

Working with UX designers, create an engaging mobile app for Good Night Out (GNO), an independent worldwide campaign that works with clubs, bars, pubs and venues to deal with, tackle and prevent harassment on nights out. Specifically, working with the Vancouver chapter to create a mobile app that helps users look through GNO certified and Non-GNO certified venues, to review and/or audit their experience while there, and/or make informed decisions on where to go for their night out.


A case study in developing a cohesive UI identity

Image for post
Image for post
Login screen for Grub Club

Team

Mark Collins & Vivian Lin

Task

In a team, create two engaging, impactful and well-designed UI libraries/art directions, and apply to the supplied wireframes, research and information of Grub Club and its target audience. Each team member is responsible for one art direction.

Mark:
Vivian:

Tools

Pencil sketching, Adobe Photoshop, Adobe Illustrator, Sketch, InVision

Overview

  1. Brief
  2. Primary Research: Interviews & Surveys
  3. Research Synthesis
  4. Ideation
  5. Visual Identity
  6. Outcome

Brief

The Problem

Many companies have regular team lunches where the entire team will a) go out for lunch in the proximity of the office or b) will order food for delivery. …


A case study of websites that use colour to create beautiful, lasting impressions

The world is a colourful place.

And it is because of colour that the world, is the world as we know it — lively, bright, magical, filled to the brim.

Particularly in design, colour is used for emphasis; colour evokes emotions and it is with only with emotion, that good design exists. Without emotional design, many things wouldn’t be present today — what is the point of producing a chair, if the chair doesn’t make us feel comfortable and warm? What is the point of publishing books, if the cover doesn’t pique our curiosity?

The following is a tentative list I curated to explore the use of colour in web, to bring forth examples of what I believe does an excellent job in being evocative and lasting. …


A case study of how a geometric sans-serif can be the definition of ‘versatility’

Image for post
Image for post
First page break of my typographic specimen — “Verlag, the Versatile Modernist

Task

Create a well-structured and designed web desktop landing page that is optimized for conversion and showcases Verlag in usage and application, so that designers and developers will buy the font for personal/project usage.

Tools

Pencil sketching, Adobe Photoshop, InVision

The Typeface

Verlag is a geometric sans-serif originally designed to represent a range of individual artistic voices. It features a large family with a parallel range of weights in 3 different widths (compressed, condensed, regular) and matching italics for every style. It also covers over 100 languages.

Overview

  1. Contextual Research
  2. Interviews
  3. Research Synthesis
  4. Wireframes
  5. Outcome

Contextual Research

Frank Lloyd Wright’s iconic Art Deco lettering on the side of the Solomon R. Guggenheim Museum, a world-renowned architectural piece celebrating modern and contemporary art, is the basis for what we know today as, ‘Verlag’. …


A case study of websites that use typography to create lasting impact for its viewers

Everything in the world is designed.

From the buildings we shelter ourselves in, to the potlucks we find ourselves partaking, and to the quiet comfort of park trails we find ourselves walking through — our world, our culture, our intangible relationships with the people and products around us, is undeniably designed or influenced by the designed.

And in this designed world, ‘to design’ means more than to create something physical or tangible, but rather, to create impact.

In order to navigate and understand how we use design to create impact, the very relevant and current world of UI came to mind. I especially wanted to look into websites that utilized typography to its fullest capabilities — creatively and beautifully. …

About

Vivian Lin

Product & Service Designer | Experience Designer @EA | www.vivianhhlin.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store