Cheq
Project: Two week individual project to design and code a promotional landing page for a mobile app concept developed by another student
Elements: Visual Design | Branding | Web Development
Where: General Assembly User Experience Design Immersive
Summary
What is Cheq?
Cheq is a smartphone and smartwatch app that tracks expenses. This app is specifically targeted at freelancers and solo-entrepreneurs who do not have business accounts. It works by sending a notification to the user’s smartwatch any time they make a purchase so they can instantaneously save the purchase to the app if it was business related.
The Problem
The app was conceived by a fellow General Assembly student. My task was to design and code a promotional landing page to get people to download the app.
To make people want to download the app, the problems I solved for were:
Clearly demonstrating why a user needs this app
Establishing an appropriate tone for a financial product that stills speaks to a creative target audience
Making a clear call to action
The Process
The Solution
I created panels that describe how the app works and its benefits using succinct text and visuals from the app.
I used a standard layout that has a clean and professional look to speak to the financial nature of the product. Then, to add personality and to appeal to the creative target audience, I added bright elements to the color scheme and some background images.
Finally, I made a clear call to action by including download buttons, that are emphasized through size, color and position, on both the first and the last panel
The Product
A responsive promotional website.
Laptop showing Cheq promotional website
The Process
Competitive Analysis and Mood Boards
I looked at other websites providing similar services, as well as other websites aimed at the same target market. For further inspiration, I looked at a lot of design portfolios. Designers are a large part of the target market so this seemed a good way to incorporate their aesthetic.
With the results of this competitive analysis and other inspiration pieces, I created some mood boards.
Mood Board - Finance and Freelance
Mood Board - Colors, Textures, and Graphics
Branding
I came up with the name, logo, and color scheme for this app.
After some brainstorming, I decided on the name “Cheq”, which is a play on words because of the financial nature of the app and because the app helps you check your expenses.
Because this is a financial product, the brand needs to be somewhat serious, however, this needs to be balanced with appealing to the target audience of freelancers and solo-entrepreneurs, who are often creative individuals. Through some branding exercises, I established that the brand needed to be trustworthy but not stuffy.
Brand experiment: poster using only type for a hypothetical pitch and demo event
Logo
In the logo, I wanted to incorporate both meanings of “check” by having the text look like a signature as well as including a check mark. I came up with five alternatives and tested them on a few people. The final logo quickly showed to be a favorite.
Logo Experiments
Wireframes
Sketching
To generate a variety of possible layouts, I did timed sketches and forced myself to create at least eight different layouts.
Layout Sketches
Wireframes
I then chose the three most successful sketches to transform into wireframes in Sketch.
Wireframe - one page above the fold
Wireframe - two panel layout
Wireframe - three panel layout
Style Tiles
Taking inspiration from the mood boards, I created three possible style tiles to find which style best expressed the brand personality.
Style tile - Dark background with texture
Style tile - banking blue
Style tile - minimalist
Mock-Ups and User Testing
I combined the style tiles and wireframes to create mock-ups of three different executions of the design. I also mocked-up some app screens to include in the design.
I tested these mock-ups on seven people to establish which was the most effective to move forward with.
Results
Dark Texture
“The pattern is fun”
“Too much going on”
Minimalist
“Clean”
“Boring”
Banking Blue
“Professional”
“Too serious”
Overall favorite: tied between dark texture and banking blue.
Favorite color scheme: the minimalist turquoise.
Favorite layout: the three pane layout of banking blue
Iteration and Final Mock-Up
I got further feedback on the banking blue design in the form of a class review.
Final Design
Color Scheme
Class feedback confirmed that the blue color scheme was too boring for a site aimed at creative people, so I switched to the more successful turquoise color scheme.
Layout
The layout was seen as clear, but several people indicated that it ended too abruptly and needed a conclusion panel, so I added this.
Imagery
The text was hard to read on the first page against the image of the computer keyboard, so I changed the background image.
Flow
I added two new mock-up screens to better show the flow of the app and an image on the final screen to tie it back to the first screen.
Coding
From the mock-up, I went on to coding the actual landing page in HTML and CSS. I started by making a desktop version that looked as close as possible to the mock-up. Once I had this base, I worked directly in code to make the site adaptive. I added two media queries so that the site would look good in both tablet and mobile version. The tablet version mostly just involved changing font proportions, whereas for the mobile version I changed the layout to be more mobile friendly.
The live website is hosted on GitHub Pages, where you can also see the code base.
Website shown on a laptop
Website shown on a tablet
Full scroll of website shown on a smartphone