Discovery
1
The Background Story
Natalie was applying to PhD programs in chemistry and needed a website to showcase her research, helping her stand out to admissions committees.
Research Portfolio
Created a portfolio to showcase Natalie’s chemistry PhD research with a professional, user-friendly design that highlights her work and publications.
About
Freelance Project
My Role
UX and Graphic Designer
Time
3 months part-time
Tools
Figma
Coolors.com
.png)
Chat GPT
Whocanuse.com
Design Process
Understanding User Needs
2
Ideation
3
Prototype
4
Design thinking is not a linear process, and any stage can feed back to another e.g. after user testing, I often go back to prototyping based on insights
Reflection
7
UI Design
6
UI Design
5
1
Discovery
Competitive Analysis
Competitive Analysis
Non-direct Competitors
Top Insights:
Very basic layout and designs
Poor readability
Boring
2
Understanding
User
Needs
User Persona
Mental Models
User Personas
Robert Smith PhD
Age
65
Education
PhD
Status
Married
Occupation
Chemistry Professor
Location
Ilinois, USA
TEch Literacy
Medium
A great researcher is more than just their experiments—it’s their story, the questions they ask, and the passion that drives them.
Neurotype
Analytical
Mentor
Bio
Professor Smith is a tenured chemistry professor at a top-ranking university. He has over 20 years of teaching and research experience in the field of Organic Chemistry. He is in charge of the university's chemistry graduate program and often takes on several PhD students to mentor each academic year. He is always on the lookout for potential students who demonstrate great potential and passion for chemistry.
Core needs
Evaluate students' research experience and academic achievements
Understand candidates' personal motivations and long-term goals
See evidence of creativity and independent problem-solving in projects
Frustrations
Disorganized websites lacking clear structure and focus
Too much technical jargon without explanation for broader audiences
Missing contact information for follow-up inquiries
Platform
Website
Mobile App
Mental Model- Specialist
Opportunities:
Robert Smith PhD
Age: 65
Location: Illinois, USA
Occupation: Chemistry Professor
Scenario:
Evaluating a PhD candidate through their personal website
Phase:
Initial Discovery
In-Depth Review
Making Contact
Tasks:
Skim through for first impressions
Identify research interests and academic achievements
Read through past projects and published work
Evaluate personal motivations and research goals
Review portfolios, blogs, or articles
Locate contact details for further discussion
Prepare questions for interviews or follow-up emails
Save relevant sections for reference later
Thoughts:
"I need to see if this student’s research aligns with what we’re doing in my lab."
"I like how they explain their methods. It shows they understand not just the science but how to communicate it."
"This candidate has potential; I just need to clarify a few things before proceeding."
Emotions:
Hopeful
Skeptical
Engaged
Critical
Encouraged
Focused
Opportunities:
Clear and concise homepage layout
Visible research areas and achievements
Well-structured project descriptions and visuals
Personal blogs to demonstrate thought processes
Easy-to-find contact form
Clear statement of interest or next steps outlined by the student
3
Ideation
Information Architecture
Site Map
Information Architecture
After gathering requirements from the design brief, along with insights from user research conducted through an interview. I developed a list of key app features. These features were then grouped and structured into a site map.
About
Exams
Research
Exams
Publications
Exams
Contact
Exams
CV
Site Map of Insight Optics App
4
Prototype
Low-Fidelity
Mid-Fidelity
Low-Fidelity Wireframes
Homepage
About Me
Research Project
Publications
Mid-Fidelity Wireframes
Homepage
About Me
Research Project
Publications
5
User
Testing
UI Style Guides
Final Screens
Prototype
Final Screens
Homepage
Final Screens
About Me
Final Screens
Search
Final Screens
Research
Final Screens
Research Article
Clickable Prototype
Typography
Heading 1
Urbanist, Extra Light 80px
Heading 2
Urbanist, Light 80px
Heading 3
Urbanist, Regular 30px
Heading 4
Asap, SemiBold 24px
Body Copy
Nesciunt minima sunt excepturi eveniet rerum doloremque. Odio laudantium illum voluptatem est quo nihil saepe minus exercitationem. Aut nisi quasi est aliquam qui dolor id voluptatem. Suscipit dolorem est fuga deserunt magni quia. Quia dicta voluptas nesciunt in inventore quaerat consequatur.
Open Sans, Regular, 18px
Iconography
graduation-hat-02
microscope
pencil-line
graduation-hat-01
atom-01
atom-02
beaker-01
beaker-02
dots-horizontal
dots-vertical
menu-01
arrow-circle-broken-up-right
arrow-narrow-left
arrow-narrow-right
chevron-down
chevron-right-double
phone
Facebook
LinkedIn
mail-02
calendar-check-02
calendar-date
Twitter
marker-pin-01
x-close
download-01
home-02
link-external-01
search-md
Design Specifications
The structure of spacing for the website
Layout grid
12 columns
Margin: 250
Gutter: 30
UI Style Guide
Navigation Bar
Footer
Buttons
Button 1
Variants
Property: Default
196px
54px
#B94B53
8
100%
Primary button
Horizontal padding- 20px
Vertical padding- 12px
Text- Oxygen, Bold, 18px
Button 1
Variants
Property: Default
187px
54px
#B94B53
8
100%
O Placeholder TextPrimary button
Horizontal padding- 20px
Vertical padding- 12px
Text- Oxygen, Bold, 18px
Pills
8px + Text + 8px
Biology
38px
Inactive pill- Tag
Horizontal padding- 22px
Vertical padding- 9px
Stroke- 1px
Text- Oxygen, Regular, 18px
Logo
6
Reflections
Future Steps
Lessons Learned
Future Steps
As this was my first UX/UI project, I believe there are some improvements to be made now that I’ve advanced in my learning:
Refining the Website Design
Revisit the entire website to incorporate my enhanced design skills, making the layout more intuitive and visually engaging.
Update Visuals
Replace and upgrade photos to improve quality and better align with the website’s tone and purpose.
Optimize Spacing and Layout
Fine-tune spacing for improved readability and visual appeal across all sections, ensuring a polished look.
Lessons Learned
As my first UX/UI project, I encountered many foundational learning moments:
Balancing Professionalism and Creativity
Designing a modern, unique look while maintaining a professional tone gave me firsthand experience in balancing creativity with industry expectations.
Resourcefulness with Visuals
Limited stock images (pre-AI) taught me to be adaptable and find suitable visuals under constraints—a valuable skill for future projects.
Mastering Carousel Animations
Used card sorting to clarify where users expected features, creating a more intuitive layout.
Building a Brand
Experimenting with colors, fonts, and style introduced me to branding, teaching me how to create a cohesive and appealing visual identity.
Natalie’s Testimonial
Working with Rachel was a game-changer for my career! She crafted an incredible chemistry portfolio that showcased my skills and research in a way I could have never imagined. Her attention to detail and creative approach made everything look so polished and professional. Thanks to her design expertise, I was able to land my dream job shortly after sharing my portfolio. I couldn't be happier with the results – Rachel truly has a gift for bringing out the best in her clients' work!
