• Home
  • ABOUT ME
  • Designs & Prototypes
  • Research Methods
  • Testimonials
  • CONTACT ME
  • More
    • Home
    • ABOUT ME
    • Designs & Prototypes
    • Research Methods
    • Testimonials
    • CONTACT ME
  • Home
  • ABOUT ME
  • Designs & Prototypes
  • Research Methods
  • Testimonials
  • CONTACT ME

Danielle Janas

Danielle JanasDanielle JanasDanielle Janas

NEW ENGLAND BASED DESIGNER

NEW ENGLAND BASED DESIGNERNEW ENGLAND BASED DESIGNERNEW ENGLAND BASED DESIGNER

Designs & Prototypes

Below is a collection of some of my designs and prototypes
Cococoin: Budgeting App & WebsiteDuodays: Community building appCompassion without Borders: Website Redesignbuy sell trade: marketplace appcontent and print designs

COCOCOIN

CocoCoin: Owned Production and Prototyping of a Personal Finances and Budgeting App & Website

  • Developed a brand voice through the use of a detailed design library including fonts, colors, and UI contents for ease of design production
  • Designed iterations for an app, mobile web design, and desktop website so it is functional and compatible on different formats
  • Ensured ease of use through prototyping a hi-fi final product and tested with users to gain feedback on usability
  • Testers noted a clean and enjoyable UI format with easy to function goals within the different formats
  • Ensured HIG compliances


Click button below for the Figma link

CocoCoin Figma File

Goal

  • Developed a beginner-friendly app for users' personal budgeting goals
  • Built 3 versions of final hi-fi prototype for iOS native app, mobile website, and desktop
  • Created a UI/design library for 
    • Text styles
    • Color iterations
    • Effects
  • Included hi-fi components such as
    • Buttons
    • Input Fields
    • Headers
    • Cards
    • Navigation Elements

Design Library

  • Included key components and define brand voice through colors, texts, and styles
  • Offered primary and secondary components for different states such as
    • Hover
    • Active
    • Inactive
    • Default
  • Organized and labeled library so it is accessible and easy to understand

Wireframes

  • Developed lo-fi outline of product schematic and layout options
  • Included user flow from start to finish
  • Focused on structure and usability
  • Made changes as needed for design and functionality

Native iOS App

  • Followed iOS native app using iPhone 13 size frames
  • Utilized bottom navigation bar for seamless in-app use
  • Maintained cohesive brand voice and stayed true to design library components

Mobile Web Design

  • Followed guidelines to maintain 16px padding across mobile pages
  • Included hamburger menu for ease of access and ability to edit for additional pages

Desktop Web Design

  • Designed 1440px wide with a 12-column grid and 80px margins with 24px gutters as recommended
  • Maintained consistency between mobile and web versions to create cohesion between pages and accessibility


Click button below for the Figma link

cococoin figma file

DUODAYS

DuoDays: Developed a Community Building App for Couples from Ideation to Prototype

  • Owned process from concept to hi-fidelity prototyping
  • Developed brand voice through mood boards and tested designs for user appeal and based on user preferences for a modern & calming voice, that was utilized to create a design library focusing on that theme for font, colors, and UI components
  • Designed with HIG for functionality between pages for user accessibility and ease
  • Produced high-fidelity pages with prototyping to prepare for pass off to developer team


Click button below for the Figma link

DUO DAYS FIGMA FILE

Goal

  • Defined a brand idea and app concept
  • Chose product name and service
  • Gathered inspiration and explore two different creative directions
  • Designed hi-fi screens with motion and micro interactions
  • Presented final concept to stakeholders

Design Library

  • Tested brand voices with users between 25 and 45 years old to gauge which design was more appealing
    • Modern & Calming yielded better results since the Bright & Energetic was seen as "too young"
  • Developed a design library for typography, color schemes, and UI components
    • Components include buttons, headers, navigation bars, input fields, and icons
  • Ensured consistency in brand development
  • Created brand logo that is reflective of the brand vibe

App Design

  • Decided app concept and what it would need for functionality
  • Created through visual references
  • Designed key screens as hi-fi prototypes and linked screens through consistent interactions


Click button below for the Figma link

duodays figma file

COMPASSION WITHOUT BORDERS

Compassion Without Borders: Website Redesign with a Strong and Bold Brand Voice to Protect

  • Redesigned website to organize information architecture and develop an understandable hierarchy for ease of navigation
  • Tested usability of website restructure to ensure clarity of mission and site functionality through 3rd party testers
  • Increased user motivation to 80% probability to engage through social media and 71% probability to consider monthly donations
  • Retained brand voice as requested by owner and presented final product to stakeholder


Click button below for the Figma link

CWOB FIGMA FILE

Goal

  • Restructured the website hierarchy to make the information architecture easier to navigate
  • Made the mission more visible for new users
  • Maintained brand voice including bright, primary colors and lots of animal pictures
  • Developed a navigable web design while keeping UI elements engaging
  • Motivated users to engage through donations and social medias


The Design

  • Adhered to typography, spacing, and visual restraints
  • Incorporated necessary brand elements while bringing information for the user to the forefront
  • Made stakeholder needs easy to access
  • Designed the prototype to be ready for development


Click button below for the Figma link

cwob figma file

BUY SELL TRADE

Buy Sell Trade: Created a General Marketplace App

  • Developed functional hi-fidelity prototype for marketplace app
  • Created intuitive flow for users including interactive pages between buyers and sellers
  • Ensured ease of function and attractive design


Click button below for the Figma link

BUY SELL TRADE FIGMA FILE

Wireframes

  • Explored competitive products like Facebook Marketplace and OfferUp to gain insights on organization, layout, and HIG best practices for an iOS app
  • Created lo-fi prototypes for 5 main screens including a feed, ad page, inbox, DM screen, and user profile

Style Guide

  • Formed a design library to maintain consistency of brand design in typography, color scheme, statuses, and UI components
  • Developed a clean aesthetic that made it easy for users to interact and engaging by utilizing yellow for CTAs and motivate buying and selling
  • Designed custom cards to use within the app for items and profiles
  • Documented design choices for stakeholder to review and understand the reasoning behind colors, fonts, components, brand name, and accessibility notes

Hi-fi Prototype

  • Designed iOS pages and adhered to the design library established
  • Prototyped screen and component functions to be ready for development
  • Made accessible features that are engaging, interactive, and aesthetically pleasing


Click button below for the Figma link

buy sell trade figma file

Content Posts & Prints


    Copyright © 2026 Danielle - All Rights Reserved.


    Powered by

    This website uses cookies.

    We use cookies to analyze website traffic and optimize your website experience. By accepting our use of cookies, your data will be aggregated with all other user data.

    Accept