Tools Used
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
.png)
CREATE
MOODBOARD
-
Create colour palette
-
A list of words to describe the look of the website
-
Image style
INSPIRATION + BRANDING
WIREFRAMING
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.
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.
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.
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
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.
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.
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.
