UI/UX MObile design

Hyphen

The most complete wireless earbuds at the lowest price ever.

Project Brief

Overview

This is a leisure project where I found an opportunity to add a new project launch to the website an innovative tech company based out of Switzerland. I researched and created this project from concept to finish using Sketch and InVision.

Role: Project Management, UX Design, UI Design

Date: 2018

Duration: 2 weeks

Project Brief

The Challenge

Rolling Square is ending their funding campaign on Indiegogo for their new Hyphen headphones product. The campaign has done very well and they’re ready to officially add the products to their website starting with a mobile design.

Project Brief

The Solution

Add all information from Indiegogo campaign
Update main menu adding Hyphen and wireless charger pages
Redesign all Hyphen sections with Rolling Square website branding

User Research

Competitive Analysis

*Current Indiegogo campaign design: www.indiegogo.com/projects/hyphen-the-gold-standard-of-wireless-earbuds

Indiegogo has all their information and features for Hyphen on the same page. I want to use a similar format from their Home product overview page to organize the Hyphen features page.

Home

Home Product Overview

Buy Hyphen

*Current Rolling Square website design: www.rollingsqua.re

Submenu

About Us

Buy inCharge

Main Menu – Rolling Square’s main menu has links for their Hyphen and inCharge product. The Hyphen product links to their Indiegogo campaign, but the inCharge product has a submenu with different product links. I would like to give their new Hyphen product a similar submenu with a separate link for the product features and a link for buying the product within their website without having to go through Indiegogo.
About Us – I would like to use a similar design style from Rolling square’s About Us page with Montserrat font and a touch of blue color.
Buy inCharge – I would like to use a similar design style from Rolling square’s Buy inCharge page for users to purchase Hyphen headphones with an added “Frequently bought together” option to combine their order with the universal wireless charger.

Design Planning

Task Flow Chart

Rolling Square’s Indiegogo campaign had all the information for Hyphen on one page. I wanted to separate this into an
Overview Home page, detailed Hyphen Features page, and separate item purchase pages.

Design Planning

Layout Sketches

Personally going through Rolling Square’s process of purchasing an item gave me a better idea of their design layout. I combined this with the layout style from their Indiegogo account for inspiration.

Design Planning

Wireframe Layouts

Wireframes

Top Navigation, Main Menu & Submenu

Top Navigation – kept same icon links but added a back button link to the left side of the logo
Main Menu – added a purchase link for the Wireless Fast Charger and a submenu for Hyphen product
Hyphen Submenu – added links for the Buy Hyphen, Hyphen Home overview, and a Hyphen Features page.

Main Menu

Hyphen Submenu

Wireframes

Home & Hyphen Features

Hyphen Home – used the demo video, price with “BUY NOW” button, overview features, comparison chart, and the what’s in the box? section from their Indiegogo campaign. Also used the newsletter subscribe option on the global footer from Rolling Square’s website.
– Added “LEARN MORE” button after Overview Features section linking to Hyphen Features page
– Added extra “BUY NOW” button near footer for user’s convenience after viewing overview features
Hyphen Features – used all detailed features from Indiegogo campaign with a call to action “BUY NOW” button near the footer.

Hyphen Home

Hyphen Features

Wireframes

Buy Hyphen & Wireless Charger

Buy Hyphen & Wireless Fast Charger – used layout and design style from Rolling Square’s purchase page.
– Added “Limited time sale” near price to promote urgency
– Added “Frequently bought together” section similar to Amazon’s purchase page.

Buy Hyphen

Buy Wireless Fast Charger

Wireframes

Login, Create Account & My Cart

*Used similar layout and design style from Rolling Square’s website with Hyphen product information to display the user’s login process.

Login

Create Account

My Cart

Wireframes

Shipping Address, Shipping Method, Payment

*Used similar layout from Rolling Square’s website to display the user’s checkout process.

Shipping Address

Shipping Method

Payment

Wireframes

Order Confirmation & My Account

Order Confirmation – added “MY ACCOUNT” button for customers to view their order status.
– Added “subscribe to newsletter” section
My Account – used layout from Rolling Square’s website

Order Confirmation

My Account

The Visual Design

Visual Design

Main Menu & Submenu

Used layout and design style from Rolling Square’s home page.

Main Menu

Hyphen Submenu

Visual Design

Home & Hyphen Features

Hyphen Home – used the brighter blue color instead of the darker blue from Rolling Square’s website to keep the blue color consistent and it displays better when used on a darker background.
• Added back button to top navigation on final version
• Decided to omit the feature icons image from the mobile version (it’s a visual repeat and image would be too small)
• Changed the color of the comparison chart to match the blue color palette.
• Comparison chart will also need a zoom feature

Hyphen Features – used same images and content from the Indiegogo campaign changing the color palette from magenta to blue, and the red and orange gradients to matching blue gradients.

Home

Hyphen Features

Visual Design

Buy Hyphen & Wireless Charger

Used layout and design style from Rolling Square’s purchase product page using Hyphen product information
Used bold blue text and crossed out regular price to reiterate the sale
Updated “Frequently bought together” section with
product titles

Buy Hyphen

Buy Wireless Charger

Visual Design

Login, Create Account &
My Cart

*Used layout and design style from Rolling Square’s Login and My Cart page using Hyphen product information.

Login

Create Account

My Cart

Visual Design

Shipping Address, Shipping
Method & Payment

*Used layout and design style from Rolling
Square’s check out process.

Shipping Address

Shipping Method

Payment

Visual Design

Order Confirmation &
My Account

Order Confirmation – decided to omit the back button from top navigation to prevent users from possibly being charged twice going back to the payment screen.

My Account – Used layout and design style from Rolling Square’s My Account web page.
– Added an order status under the product name in the Order History section.