LANDING_PAGE.jpg
LANDING_PAGE.jpg

Tools Used

TOOLS USED.png

Stage 1

PROJECT DETAILS

Project Brief

Design a marketing website to promote key features of the Shoppe App. The design should be responsive and include a download button for users.

After completing the Shoppe App prototype, I wanted to create a marketing website to promote the app and it's features. Since this was a new mobile app that would attract Millennial users, I wanted allow the website to be viewed on mobile and desktop screens.

HIGH LEVEL TIMELINE

In 2 weeks, create a responsive website prototype

KEY GOAL

Create a mobile and desktop friendly marketing website to promote features of the Shoppe App

Role and Responsibilities

The marketing website was an academic project that allowed me to become a UI/UX Designer

After completing the Shoppe App prototype, I wanted to create a marketing website to promote the app and its features. Since this was a mobile app targeting Millennials, the website must be viewable on both mobile and desktop devices.

 

Since I had access to the UI library and visual identity created for the Shoppe, I pulled colours and typography from the app to create a consistent look.

RESPONSIBILITIES

  • Responsive Website Design

  • Market Research

  • Brand Identity

  • Visual Design

  • Prototyping

  • Photography Art Direction

Target Audience

The Shoppe App targeted Millennial customers, so the website must do the same.

Since the Shoppe App focused on Millennial users, I needed to keep this in mind when designing the marketing website.

Millennials use various devices on a daily basis, so creating a responsive marketing website to promote this app was important. I also thought about the visual design of the website and what would attract Millennials to the app and website. This led me to explore typography, photography and colours, and how to create a branded experience between the app and website.

The Process

Day 10-14

Day 1-3

Day 4-6

Day 7-9

undraw_researching_22gp (1).png

CREATE

MOODBOARD 

  • Create colour palette

  • A list of words to describe the look of the website

  • Image style

undraw_inspiration_lecl.png

INSPIRATION + BRANDING

undraw_wireframing_nxyi.png

WIREFRAMING

undraw_mobile_prototyping_grmd.png

DESIGN

+ PROTOTYPE

  • Conduct a competitor analysis of product marketing websites

  • Create storyline

  • Sketch out low-fi wireframes

  • Explore layouts

  • Design Mid and Hi-Fi Prototypes

  • Conduct 2 Rounds of Usability Testing

Stage 2

IDEATION

Moodboard

Before designing the marketing website, it was important to pull brand colours and inspiration words from the Shoppe app's visual identity to create a consistent look.

Creating a moodboard and establishing the look and feel of the website is an important step in the design process. Since I'm already familiar with the visual identity of the Shoppe app, I was able to pull colours and images from the visual identity and implement them into the visual design of the marketing website. Some words to describe my design included minimalistic, organized, light, calm, and hierarchy.

Screen Shot 2021-01-27 at 1.54.35 AM.png

UI Inspiration

To create a web design that was competitive against e-commerce giants in the app market, I conducted a competitor analysis. Most websites combined eye-catching images with bold typography to grab the viewer's attention.

After curating my moodboard, I started looking at website layouts created by large companies. I focused on how they promoted their products without using too much text and overwhelming viewers with unnecessary information. Most companies used bold product images and typography to create a structured storyline as users scrolled.

The imagery I'll be using in the website design include high-quality mockups that give users a glimpse of the Shoppe App's UI.

Screen Shot 2021-01-27 at 1.55.45 AM.png

Wireframing

After analyzing my UI inspiration and moodboard, I starting sketching low-fi wireframes of the mobile and desktop website. I focused on creating a minimalistic layout, using bold images and graphics.

I sketched several low-fi concepts that focused on various layouts and content hierarchy. If I had a lot of information such as product features, it would need to be displayed on a carousel for example so users weren't overwhelmed by too much text. I also thought about what kind of photography would be translate well between desktop and mobile. Most images needed to be offset to the left or right side to leave room for text.

 

Out of all the concept sketches, I decided Concept 2 and Mobile V2 had the most potential to move into the prototyping phase.

 

Now I'll take both concepts and design a balanced composition using typography, app mockups, and minimalistic UI elements. By focusing on these elements in my web design, I’ll be able to create an informative and entertaining website experience.

Designer Notebook

DESKTOP CONCEPT

Concept 2 of the desktop version had the most potential to move into the prototyping phase because of its content flow in a responsive design

IMG_8997%2520Copy_edited_edited.png
Desktop HD.jpg

MOBILE CONCEPT

Concept V2 of the mobile version had the most potential to move into the prototyping phase between of its content flow and use of standard mobile gestures.

IMG_8999.png
iPhone 11 Pro Max.jpg

Stage 3

DESIGN

Design + Prototyping

Now that I've created the basic structure and layout of the website, I'll start adding images and text to the mid-fi version. Once completed, I'll conduct a round of usability testing before designing the high-fi version.

Designing the mid-fi version involved creating website content and adding text blocks that were suitable for mobile and desktop screens. I focused on creating a balanced composition by using bold typography and images to separate content sections. The content in the mid-fi version wasn't final, but I wanted to conduct a round of usability testing to see if users had any difficulties or comments on the layout or content.

Desktop HD.png
iPhone 11 Pro Max.png

Final Design

After completing the high-fi mobile and desktop versions, I conducted a final round of usability testing. Each testing round gave positive feedback as they were able to understand and view the same content on either versions.

Based on the content included on the desktop version of the website - especially the app's features, I created pagination dots for users to swipe through each feature rather than scrolling on a mobile device. This created an efficient user experience and reduced the effort needed to view the website's content. After conducting a final round of usability testing on the high-fi version, many users have positive feedback between the mobile and desktop versions. They mentioned good content flow, easy to use gestures for mobile, and eye catching graphics that were informative.

Desktop HD.png
iPhone 11 Pro Max.png

Like what you see? Let's chat!