Case Study

Branding & Digital Project Build

Creative Director, UX/UI Strategist

To Trade, 2022 – Financial Education

Website Graphics - firstread bg dark
ToTrade website shown at desktop and mobile viewports. Style System and Site Map also shown.


Creative Direction, Project Management, UX/UI Strategy & Design, UX Research & Testing, Style System Creation, Prototyping, Copy Writing & Editing


Mood Board, Site Map, Logo, Style System, Website Architecture, Visual Design, Responsive Prototypes, SVGS, Copy

Adobe Photoshop
Adobe Indesign
Adobe Illustrator

Career Goals

Designed websites full time 2000-2011, websites alongside coding emails and other Marketing Agecny needs 2011-2015. Oversaw website UX, architecture, and visual design a single brand 2015-2022. This project was a solid opportunity to upgrade skills.

Experimentation & Skills Expansion

Style Systems

Researched to upgrade from Style Guide design to the more expansive Style System option. Designed plug-and-play components.

Mood Boards

Performed online research to improve mood board skills s for a variety of needs and client types. Created mood board for client.

Management Tools

Management Tools

Deepened knowledge of card-based organizational systems and sprint management. Experimented with various systems before settling on Trello.

Figma Prototypes

Created responsive and interactive prototypes of all pages and navigation. Mobile and desktop viewports.


ToTrade Logo

The owner is a stock trade professional. His new business would educate people on stock trade and investment. It would give the ability to capture sales leads.



  • Baby Boomers and GenX
  • Home-owner with assets, 401K and IRA
  • US-based (Global available)
  • Secondarily: Younger audience 21-50
Man with Grey Hair
Man with Some Grey Hair
Woman Smiling
Woman with Grey Hair


Create a brand, logo, and website to achieve the following goals:

Place Owner as Seasoned Professional

Provide Education

on stock trade and investment including: live classes on zoom, office hours, blog, and newsletter.

Ability to Capture Leads for Sales

Increase Engagement

of audience getting them to purchase classes, private consulting, and other paid services.

Provide UX Writing & SEO

optimization with layout and copy editing.

Phase 2: Community & Individualizations

such as “My classes” and “Archives.”



Met with the client in person to:

  • Familiarize with his interests, goals, and Challenge Statement for his organization
  • Collect client materials including content and wireframes he’d mocked up
  • Set him with timeline and lay out materials still needed by different parties
  • Kick off Competitive Audit together, taking a first look at competitors together
  • Outline Project Plan within Milanote card-based organization board

UX Research Performed


Competitive Audit

Performed a Competitive Audit of small competitors. Audit included those he provided plus many I found including banking websites and smaller businesses with similar audiences including Charles Schwab, Prudential, and CBInsights.

Experience with program registration interfaces led recommendation to create personal account capability. Accounts allow ability to save checkout info and find current and past purchases.

Personas and Interviews

Created Proto-Personas. Conducted in-person interviews on individuals fitting the intended audience at kickoff and during the design process.

User Testing

Conducted in-person user testing of prototypes.


After this project, I undertook a UX courses and read more on UX Strategy.

With my enhanced UX toolset, I would:

  • Apply more detailed research
  • More effectively advocate for a larger, more diverse user sample
  • Create Mixed-method Personas utilizing Qualitative Interviews plus Quantitative Surveys of the intended population
  • Use this information to create User Groups before creating personas
  • Incorporate Card Sort interviews in the Foundational Research Phase to further assure effective navigation
  • Perform A/B studies to further compare and improve on any pain points found


Presented and discussed full Competitive Audits, Interview feedback, and User Testing results.

Used these results to created and provide design options that:

  • Reached older, asset-endowed target audience
  • Communicated the brand and services professionally

Added personalized user account component that would:

  • Increase for ease of checkout
  • Activate information gathering on leads
  • Pave way to build community and, thus, engagement on Phase 2

Mood Board Creation

Following that meeting, gathered elements that utilized keywords, layout, interactive elements, and considered trending and industry standard design practices.

Gathered elements together and presented them in a mood board that showcased inspiration for Logo and Branding and handlings for:

  • Website Architecture
  • First reads
  • Navigation
  • Page Types
  • User Flows
  • Cards
  • Graphics and Photography
  • Blog format
  • Heading and Intro
  • Text Edits for SEO and Readability

Assets and Prototypes

Created initial pages to showcase recommendations for aforementioned handlings.

Upon approval, completed all pages. Content added and copy-edited with usability and SEO considerations.

Produced limited interactive navigation prototype for navigation flow clarity. Leveraged HTML and CSS experience to guide building of responsive prototypes. These reflected content reflows and transitions across different viewports and devices.

The Solution

Created prototypes for a website that presented as professional, financial education website. User experience research paid off with visual design, architecture, and interactivity that reflected these needs. A user login capability was recommended and added for better user experience in checkout. Text content was created with attention to effective communication, search engine optimization, and simplicity. All iems were prepared with the programmer’s ease of implementation in mind.


Style System & Branding

Logo treatments, Desktop & Mobile views, First Read treatments, Blog Architecture & Design, Navigation, Article pages, Footer, Forms, and more


Demonstrating Responsive Resizing of elements, Tabbed Content flow, Navigation flow, and Class Registration form


First Read, Intro, Heading, Blog Architecture, and Form copy – all copy optimized for User Experience and Seach Engine Optimization

Visual Assets

SVGs of icons, delivered a hand-picked Image Gallery for present and future use

Other Assets

Mood Board and Site Map

Christi Leeson Resume Bio Photo

Want to work together?
I’d love to hear from you!