SlideShare a Scribd company logo
1 of 22
Download to read offline
Chicago, IL USAUser Experience Designer
Jani Momolu Anderson
Toptal Portfolio
Est. 1995
1/2/19
1Toptal Portfolio
1. Interactive HR Roadmap
2. Responsive Web App in Vue.js
3. UX Design Brief
4. Compliance-Based Marketing
5. Mobile Timetracking App
6. Content Discovery Platform
Projects
I am a User Experience Designer and Front-End Web Developer with over 20 years of
experience in UX & UI, web design, graphic design, HTML & CSS development. I co-
founded Sigma6, Detroit's first interactive agency, in 1995. From 2005 to 2011 I worked
for Playboy Enterprises in Chicago as part of the Content Development Team, occupying
the roles of Web Designer, SEO Associate, Front-End Web Developer & Team Lead,
consecutively. From there, I entered leadership positions in companies such as Northern
Trust and Supernova Lending as a marketing and product design VP. I have spent years
becoming fluent in JavaScript & jQuery. I enjoy writing object-oriented JavaScript by-
hand and using development frameworks like Angular.js and Bootstrap. I have years of
experience managing personnel in entrepreneurial, fast-paced, results-driven
environments. My formal education in Fine Arts and User Experience Design,
augmented by state-of-the-art practical training in web development, makes me
uniquely qualified to engineer exceptional front-end experiences.
2
Interactive HR Roadmap
Toptal Portfolio
Bristol-Myers Squibb - 2019
Global Healthcare & Life Sciences
3
BMS is working on a SharePoint site to help their employees develop their business skillsets.
I was hired by Gagen MacDonald to handle the visual & user experience design of the interactive
tool associated with the program. It is essentially brochureware, but that still presents its own
set of usability challenges.
BMS is using Bootstrap to build a custom application in SharePoint. Cards were the obvious
choice for most of the UI. I innovated on the traditional breadcrumb nav with the “crumb trail”
nav. As the user completes each step, a label indicating the choice they made in the step before.
This provides instant feedback to the user as they work their way through a difficult process.
Part software,
part brochure
Bristol-Myers Squibb - 2019
Toptal Portfolio
4Toptal Portfolio
5
Responsive Web App in Vue.js
Toptal Portfolio
Personal Project
Social Media
6
I use Twitter as a kind of diary: it's a running log of the
random thoughts that occupy my mind from day-to-day.
I use a period-delimited format to organize my tweets
into tags. Twitolu takes advantage of this format and
creates an interactive word cloud that creates links
based on these tags. I can click on tags in the word
cloud and see only the tweets that match those tags. I
can also group tweets into lists of Favorites and share
those Favorites via email.
Twitolu is valuable to me as a means of creating a diary
of links I've visited recently, recalling important
research items or inspirational links, and sharing cool
stuff with people I know.
My UX Diary
Personal Project
Toptal Portfolio
7Toptal Portfolio
I started with a pre-made
Bootstrap component library in
InVision Studio.
I used the strokes and fills of
each component to tweak
them to pixel-perfection.
Then, I modified the original
files to my new specs, keeping
overrides to a minimum.
I added content, making sure
that all the dimensions
changed accordingly.
This was a great way for me to
learn the software and reduce
the creation of one-off UI
elements.
8
UX Design Brief
Toptal Portfolio
Supernova Lending
Fintech
9
Supernova Lending creates the industry’s only fully-
automated & customizable securities-based lending
solution. I was VP of Marketing and Product Design at
Supernova for over 3 years.
Most of the dev team is in Changsha, China. This includes
the front-end team. I created this document to clearly
communicate the design specs of the project, with the
intention of translating it to simplified Chinese. Using
moodbards and wireframes, my intention was to update
the look of our product using gameification principles.
Presentation
Skills
Net Worth Calculator
Toptal Portfolio
10Toptal Portfolio
11
Compliance-Based Marketing
Toptal Portfolio
Northern Trust FGR
Wealth Management & Asset Services
12
Northern Trust is a multi-national financial institution with over 16,000 employees operating in
over 30 countries. I was 2nd Vice President of Web Design at Norther Trust for 2 years, and the
only front-end developer in the entire organization.
Not only was I responsible for designing and building the marketing site for their FGR funds, but I
needed to make it bi-lingual. I worked with team members in London, Frankfurt, and Amsterdam
over a 3-month period to create both versions of the site.
Institutional investors are notoriously skeptical and virtually impervious to marketing. The big UI
innovations on this project were the micro-interactions. Due to the legal nature of the funds, the
advisors must agree to Terms of Service before downloading each PDF. There were over 30 files
available for download. To stop user from leaving, I moved away from onerous modal popup and
opted for tooltips that contained those controls instead. I’m proud to say that, 6 months after
this website was launched, the funds were worth over $4 billion USD.
Global Financial
Services
Northern Trust FGR - 2014
Toptal Portfolio
13Toptal Portfolio
14Toptal Portfolio
15
Mobile Timetracking App
Toptal Portfolio
BigTime Software
Business Services & Big Data
16
BigTime Software creates cloud-based timetracking software for small
and medium-sized firms.
I worked there for 2 ½ years as a front-end developer, but I also filled-in
as marketing director, graphic designer & UX advocate. I was tasked with
designing their first mobile app. “Make timetracking fun” were the only
instructions I got to start with.
I took my inspiration for the UI from a telephone app design I came
across on Pinterest. The keypad on a phone is curiously symmetrical,
leaving space on either side of the last digit for extra controls. It was clear
to me that replacing the phone digits with days of the week would
instantly feel natural and, dare I say, fun.
“Make
timetracking fun.”
BigTime Mobile – 2012
Toptal Portfolio
17
BigTime Mobile
Toptal Portfolio
18
Content Discovery Platform
Toptal Portfolio
Laudville
Social Media
19
Laudville was designed to make your life better by giving you a constant
stream of media suggestions in a fun, easy-to-use, game-like environment
and provide seamless integration with your existing social network.
I was asked to create an infinitely scrolling pane of tiles that would be
procedurally generated via data feeds. The user would be able to access
universal navigational controls on a separate “plane” that would above
the suggestions, much like the FAB in Material Design.
My grid of suggestions was tightly-packed to maximize screen real estate.
The white of the navigational elements stands out nicely against the
noise in the background, allowing them to “hover” over everything else.
An Infinitely
Scrolling Plane
Laudville - 2010
Toptal Portfolio
20Toptal Portfolio
21
Prepared for
The Toptal Design Team
Wednesday, January 2, 2019
Jani Momolu Anderson
User Experience Designer
Janianderson.com
ja@janianderson.com
Toptal Portfolio

More Related Content

Similar to My Toptal Portfolio

Metro design primer
Metro design primerMetro design primer
Metro design primer
Andy Chiang
 
InternetMogul_winter issue_9_01_2015
InternetMogul_winter issue_9_01_2015InternetMogul_winter issue_9_01_2015
InternetMogul_winter issue_9_01_2015
Sasha Zinevych
 
Top Three Modern Product Trends
Top Three Modern Product TrendsTop Three Modern Product Trends
Top Three Modern Product Trends
Jeremy Johnson
 
MBiever–resume–2017
MBiever–resume–2017MBiever–resume–2017
MBiever–resume–2017
Melissa Biever
 
Lillian Tong_The UX Factor_Voyeur
Lillian Tong_The UX Factor_VoyeurLillian Tong_The UX Factor_Voyeur
Lillian Tong_The UX Factor_Voyeur
Lillian Tong
 

Similar to My Toptal Portfolio (20)

Metro design primer
Metro design primerMetro design primer
Metro design primer
 
Olly Mardling - Visual portfolio
Olly Mardling  - Visual portfolioOlly Mardling  - Visual portfolio
Olly Mardling - Visual portfolio
 
InternetMogul_winter issue_9_01_2015
InternetMogul_winter issue_9_01_2015InternetMogul_winter issue_9_01_2015
InternetMogul_winter issue_9_01_2015
 
Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop
 
Tom callaway portfolio
Tom callaway portfolioTom callaway portfolio
Tom callaway portfolio
 
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
 
The toolbox of a digital marketer
The toolbox of a digital marketerThe toolbox of a digital marketer
The toolbox of a digital marketer
 
Top Three Modern Product Trends
Top Three Modern Product TrendsTop Three Modern Product Trends
Top Three Modern Product Trends
 
VStanbachResume2016
VStanbachResume2016VStanbachResume2016
VStanbachResume2016
 
Corporate innovation - Building an MVP
Corporate innovation - Building an MVPCorporate innovation - Building an MVP
Corporate innovation - Building an MVP
 
enhancing-user-experience-through-effective-interaction-design-20231012223329...
enhancing-user-experience-through-effective-interaction-design-20231012223329...enhancing-user-experience-through-effective-interaction-design-20231012223329...
enhancing-user-experience-through-effective-interaction-design-20231012223329...
 
UX and UI Workshops - User Journey
UX and UI Workshops - User JourneyUX and UI Workshops - User Journey
UX and UI Workshops - User Journey
 
MBiever–resume–2017
MBiever–resume–2017MBiever–resume–2017
MBiever–resume–2017
 
Shantanu kulkarni-Graphic and UIUX Designer
Shantanu kulkarni-Graphic and UIUX DesignerShantanu kulkarni-Graphic and UIUX Designer
Shantanu kulkarni-Graphic and UIUX Designer
 
Best 10 online work for students in pakistan 2023.pdf
Best 10 online work for students in pakistan 2023.pdfBest 10 online work for students in pakistan 2023.pdf
Best 10 online work for students in pakistan 2023.pdf
 
Luke Pirie Portfolio 2013
Luke Pirie Portfolio 2013Luke Pirie Portfolio 2013
Luke Pirie Portfolio 2013
 
User Experience and Product Design Portfolio
User Experience and Product Design PortfolioUser Experience and Product Design Portfolio
User Experience and Product Design Portfolio
 
Lillian Tong_The UX Factor_Voyeur
Lillian Tong_The UX Factor_VoyeurLillian Tong_The UX Factor_Voyeur
Lillian Tong_The UX Factor_Voyeur
 
Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014
 
Mobile Application Development - Guide 2020
Mobile Application Development - Guide 2020Mobile Application Development - Guide 2020
Mobile Application Development - Guide 2020
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Recently uploaded (20)

Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 

My Toptal Portfolio

  • 1. Chicago, IL USAUser Experience Designer Jani Momolu Anderson Toptal Portfolio Est. 1995 1/2/19
  • 2. 1Toptal Portfolio 1. Interactive HR Roadmap 2. Responsive Web App in Vue.js 3. UX Design Brief 4. Compliance-Based Marketing 5. Mobile Timetracking App 6. Content Discovery Platform Projects I am a User Experience Designer and Front-End Web Developer with over 20 years of experience in UX & UI, web design, graphic design, HTML & CSS development. I co- founded Sigma6, Detroit's first interactive agency, in 1995. From 2005 to 2011 I worked for Playboy Enterprises in Chicago as part of the Content Development Team, occupying the roles of Web Designer, SEO Associate, Front-End Web Developer & Team Lead, consecutively. From there, I entered leadership positions in companies such as Northern Trust and Supernova Lending as a marketing and product design VP. I have spent years becoming fluent in JavaScript & jQuery. I enjoy writing object-oriented JavaScript by- hand and using development frameworks like Angular.js and Bootstrap. I have years of experience managing personnel in entrepreneurial, fast-paced, results-driven environments. My formal education in Fine Arts and User Experience Design, augmented by state-of-the-art practical training in web development, makes me uniquely qualified to engineer exceptional front-end experiences.
  • 3. 2 Interactive HR Roadmap Toptal Portfolio Bristol-Myers Squibb - 2019 Global Healthcare & Life Sciences
  • 4. 3 BMS is working on a SharePoint site to help their employees develop their business skillsets. I was hired by Gagen MacDonald to handle the visual & user experience design of the interactive tool associated with the program. It is essentially brochureware, but that still presents its own set of usability challenges. BMS is using Bootstrap to build a custom application in SharePoint. Cards were the obvious choice for most of the UI. I innovated on the traditional breadcrumb nav with the “crumb trail” nav. As the user completes each step, a label indicating the choice they made in the step before. This provides instant feedback to the user as they work their way through a difficult process. Part software, part brochure Bristol-Myers Squibb - 2019 Toptal Portfolio
  • 6. 5 Responsive Web App in Vue.js Toptal Portfolio Personal Project Social Media
  • 7. 6 I use Twitter as a kind of diary: it's a running log of the random thoughts that occupy my mind from day-to-day. I use a period-delimited format to organize my tweets into tags. Twitolu takes advantage of this format and creates an interactive word cloud that creates links based on these tags. I can click on tags in the word cloud and see only the tweets that match those tags. I can also group tweets into lists of Favorites and share those Favorites via email. Twitolu is valuable to me as a means of creating a diary of links I've visited recently, recalling important research items or inspirational links, and sharing cool stuff with people I know. My UX Diary Personal Project Toptal Portfolio
  • 8. 7Toptal Portfolio I started with a pre-made Bootstrap component library in InVision Studio. I used the strokes and fills of each component to tweak them to pixel-perfection. Then, I modified the original files to my new specs, keeping overrides to a minimum. I added content, making sure that all the dimensions changed accordingly. This was a great way for me to learn the software and reduce the creation of one-off UI elements.
  • 9. 8 UX Design Brief Toptal Portfolio Supernova Lending Fintech
  • 10. 9 Supernova Lending creates the industry’s only fully- automated & customizable securities-based lending solution. I was VP of Marketing and Product Design at Supernova for over 3 years. Most of the dev team is in Changsha, China. This includes the front-end team. I created this document to clearly communicate the design specs of the project, with the intention of translating it to simplified Chinese. Using moodbards and wireframes, my intention was to update the look of our product using gameification principles. Presentation Skills Net Worth Calculator Toptal Portfolio
  • 12. 11 Compliance-Based Marketing Toptal Portfolio Northern Trust FGR Wealth Management & Asset Services
  • 13. 12 Northern Trust is a multi-national financial institution with over 16,000 employees operating in over 30 countries. I was 2nd Vice President of Web Design at Norther Trust for 2 years, and the only front-end developer in the entire organization. Not only was I responsible for designing and building the marketing site for their FGR funds, but I needed to make it bi-lingual. I worked with team members in London, Frankfurt, and Amsterdam over a 3-month period to create both versions of the site. Institutional investors are notoriously skeptical and virtually impervious to marketing. The big UI innovations on this project were the micro-interactions. Due to the legal nature of the funds, the advisors must agree to Terms of Service before downloading each PDF. There were over 30 files available for download. To stop user from leaving, I moved away from onerous modal popup and opted for tooltips that contained those controls instead. I’m proud to say that, 6 months after this website was launched, the funds were worth over $4 billion USD. Global Financial Services Northern Trust FGR - 2014 Toptal Portfolio
  • 16. 15 Mobile Timetracking App Toptal Portfolio BigTime Software Business Services & Big Data
  • 17. 16 BigTime Software creates cloud-based timetracking software for small and medium-sized firms. I worked there for 2 ½ years as a front-end developer, but I also filled-in as marketing director, graphic designer & UX advocate. I was tasked with designing their first mobile app. “Make timetracking fun” were the only instructions I got to start with. I took my inspiration for the UI from a telephone app design I came across on Pinterest. The keypad on a phone is curiously symmetrical, leaving space on either side of the last digit for extra controls. It was clear to me that replacing the phone digits with days of the week would instantly feel natural and, dare I say, fun. “Make timetracking fun.” BigTime Mobile – 2012 Toptal Portfolio
  • 19. 18 Content Discovery Platform Toptal Portfolio Laudville Social Media
  • 20. 19 Laudville was designed to make your life better by giving you a constant stream of media suggestions in a fun, easy-to-use, game-like environment and provide seamless integration with your existing social network. I was asked to create an infinitely scrolling pane of tiles that would be procedurally generated via data feeds. The user would be able to access universal navigational controls on a separate “plane” that would above the suggestions, much like the FAB in Material Design. My grid of suggestions was tightly-packed to maximize screen real estate. The white of the navigational elements stands out nicely against the noise in the background, allowing them to “hover” over everything else. An Infinitely Scrolling Plane Laudville - 2010 Toptal Portfolio
  • 22. 21 Prepared for The Toptal Design Team Wednesday, January 2, 2019 Jani Momolu Anderson User Experience Designer Janianderson.com ja@janianderson.com Toptal Portfolio