The client is an avid aquascaper and has sold plants out of his house for years. After noticing a huge surge in plant interest and in-home environments he has decided that aquascaping is likely the next trend and he wants to start an eCommerce business selling everything needed for creating freshwater aquariums online.
Timeline 12 Weeks
Role User Experience, Visual Design, Branding
Overview
Starting a new hobby can be a stressful process and is made especially so when the industry is flooded with wordy and hard-to-navigate sites. The client wants to break the norm of the industry by creating a website that makes it easier for users outside of the current audience to start their first aquariums.
The Problem:
The retailer has a huge variety of items available online. How do we break these down into digestible sections while also teaching the beginner how they should approach the daunting task of building out a tank?
The Solution:
We want to bring the user through the aquarium creation process without flooding them with too much information. Each item has their own care requirements, how do we display this information while still keeping the beauty of the site.
Target Audience
The target audience is large Financial Institutions, in particular, employees with job titles such as “Director of Emerging Payments” or “VP of Digital Innovation”. This infographic will be distributed as a standalone page on the company’s website and should be accessible for indexing and SEO performance as well as be visually and aesthetically engaging.
Competitive Research
Being naive to the Fintech world I knew that I was going to have to do a deep dive into the space to get a better idea of design trends. I looked at companies specifically using QR code technology for payments and more broadly at top Fintech companies throughout North America. Companies I researched include Plooto, Koho, Plaid, Moneylion, Robinhood, Chime, Nubank, and Stripe. I paid special attention to page structure, branding elements, technology visuals, and general look and feel.
Key Takeaways 💡:
- Clean modern designs with heavy use of gradients and drop shadows
- App visuals show UI mockups outside of the device structure
- Heavy use of 3D illustrated elements
- Only two companies focused on showcasing a diverse range of users
Sketching & Wireframes
In order to understand how I could format the webpage structure, I needed to sketch out the wireframes. Using the content provided and my design inspiration I focused on separating the content into sections with corresponding space for illustrations and visuals. I came up with two solid layout options. It was important to keep in mind the page length, user flow, and also design lift, and time limitations. I decided on an amalgamation of these two wireframes for my final mockup.
Design Rationale
Visuals
Visuals include app UI, background visuals, and icons. Overall I wanted the content to help drive my design decisions. During this process, the term “around the globe” was stated multiple times within the content so I decided to play on that. I mocked up spherical planetary clusters using SplineTool and arranged them with arrows indicating direction eluding to the scope at which QR codes are being used around the world (and beyond). I then used these spheres throughout the page to bring all sections together. Because Paycode is looking to have a more friendly and approachable feel, I used images of a diverse range of users actually adopting the technology in their day-to-day lives. The UI visuals were created by looking up similar apps and recreating designs in Figma. I wanted these to look a bit otherworldly so I laid the UI on Skueomorphic mobile devices.
Logo
As stated in the project overview I wanted the logo to feel modern and to elude to the barcode as a key component of Paycode’s tech. After sketching and playing around I landed on a logomark that shows two shapes colliding signifying the transformation of data as it’s being collected. I paired this with a wide-set sans serif font (Prompt Semibold) in lower-case to evoke a more friendly, balanced, and approachable feel.
Fonts and Colours
In order to appeal to Fintech leadership, I wanted the fonts and colors to be deep, contrasting, and complimentary. I chose a deep navy contrasted by two primary spot colors purple - indigo and fiery orange to evoke excitement. Inter was used as the primary font throughout - Inter regular for Body Copy and Inter Bold for headings. All design system elements were created and organized in Figma for the developer.
Final Design
