Complete website redesign for Staebler Insurance
Timeline 8 Weeks
Role
User Experience & Mobile Responsive
Design Challenge Overview
Insect Field Guide was created as a part of a 6-hour design challenge. The challenge was to design an Interface for a paginated list of items that would function on tablet, mobile, and desktop using Figma. The items must have the ability to be filtered by type and for the user to be able to easily change the view in order to see more items on the page.
Specs & Deliverables:
- Interfaces need to function on a Mobile, Tablet, and Desktop
- The ability for users to filter and change card views
- Card view detailed - must include item name and item description
- File formats: Figma
User Story
As a user, I want to be able to browse through and search for insects so that I can easily see all of the details of insects in an organized fashion.
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
