Ridgeline Outdoor Clothing

date
Nov 17, 2022
slug
ridgeline-outdoor-clothing
status
Published
tags
Design
type
Post
source
summary
notion image
 
I have created this page to exhibit my skills as a UI designer, featuring a fictional client named Ridgeline, which is an outdoor clothing company.
 

The idea

  • Patagonia Website
  • Northface Website
  • Kathmandu Website
 
notion image

The process

I am starting this process with User-centered design (UCD) puts users at the center of product development and involves them in the design from the beginning. Below are Personas/User stories and journey maps, understanding the many facets of a positive user experience:
  • Useful: fulfills a user’s needs
  • Usable: easy to use and understand
  • Desirable: visually attractive and succinct
  • Findable: easy to navigate and find information
  • Accessible: users with disabilities can use the product
  • Credible: the product, company, and services are trustworthy
  • Valuable: delivers business value
 

The design

Here is the high-fidelity prototype created using Figma based on the initial low-fidelity paper and pen wireframe. To begin, I scanned or photographed the paper wireframe using my iPhone and airdropped it to my Mac mini. All assets from the graphic designers, such as photos, logos, infographics, and copywriting, were compiled into the Figma canvas.
Using the low-fi wireframe as a guide, I placed each item one by one, naming each layer accordingly for future ease of automatic modifications. While the design may not be highly sophisticated, it accurately reflects the original hand-drawn wireframe.
For a more sophisticated design, please refer to my work on another fictional project, FIXME Apparel.
 
Hi-Fi wireframe for Mac book pro 14”
Wireframing from template and draw with pencil. Photograph from Iphone and move the image using airdrop to my mac book.
Wireframing from template and draw with pencil. Photograph from Iphone and move the image using airdrop to my mac book.
All digital assets prepared before doing hi-lo fidelity design.
All digital assets prepared before doing hi-lo fidelity design.
 
Product page.
Product page.
Add to page, small red icon on shopping cart added.
Add to page, small red icon on shopping cart added.
Image no.2 selected.
Image no.2 selected.
 
 
 
Hi-Fi wireframe for iPhone Pro 14
Phone wire framing using pen and paper.
Phone wire framing using pen and paper.
Digital assets.
Digital assets.
Product page.
Product page.
Image no.2 selected.
Image no.2 selected.
Yellow colour selected.
Yellow colour selected.
Add to bag.
Add to bag.
 
Hi-Fi wireframe for iPhone Pro 14 with Smart Animate - simple carousel
Picture No.1
Picture No.1
Picture No.2 sliding in from right side.
Picture No.2 sliding in from right side.
Picture no.3 sliding again from right side.
Picture no.3 sliding again from right side.
 
 
 

© Christopher Huang 2021 - 2024