Role
UX Designer
Web Developer
Timeline
6 weeks
July - August 2025
Tools
Figma, Figjam, VSCode
PROJECT OVERVIEW
Transforming an Outdated Website into a Modern Experience
UrbanDATA is an urban design and architecture firm based in Shanghai, China. Since its founding in 2004, the firm has completed numerous large-scale projects around the world.
For my six-week internship, I redesigned the website’s layout, translated its content from Mandarin to English, and developed the entire site from the ground up.
urbanDATA
THE PROBLEM
Outdated Website Experience Impacts Business
During my onboarding, my supervisor reported that their past clients have commented that for an urban design company, the design of their website was mediocre and hard to navigate. The design of their website aligned more with their design principles when urbanDATA was first established back in 2004. Additionally, due to their website being almost entirely in Mandarin, it was difficult to partner with international clients.
"Your design gives them insight as to how you view your audience. If you don’t put any effort into your website’s design, your audience knows that you won’t put effort into helping them."
BUSINESS GOALS
Setting the Vision for the Redesign
To address the challenges identified during onboarding, I aligned the redesign with UrbanDATA’s key business objectives:
1.
Minimalistic Design
Simple/minimalistic but also dynamic design that captures the essence of urbanDATA
2.
Simplify Navigation
Reduce the number of clicks it takes to quickly access information
3.
Focus on English
Translate and present the website in English due to growing relationship with international clients
THE CHALLENGE
⚡
How might we redesign urbanDATA’s website to create a modern experience that better reflects its design expertise and appeals to international clients?
MY SOLUTION
Breathing New Life into urbanDATA's Website from the Ground Up
Throughout my internship, I handled this project through three different angles. I redesigned the visuals, layout, and interactions of the website based on business and user needs. Additionally, urbanDATA did not have a website developer, so as part of my internship, I handled the front-end development of the website. In addition to web development, I translated 60+ project pages and 60+ news articles from Mandarin to English. Lastly, I created and provided a tutorial guide to editing the HTML/CSS files in both English and Mandarin for the team.
UX Redesign
Redesign the visuals, the layout, and the interaction of the website
Web Development
Utilized HTML/CSS and JavaScript to build the new website
Front-End Guide
Created and handed off a guide to updating the website's HTML/CSS code
UX REDESIGN
Eye-catching Dynamic Hero Section
Visitors are immediately greeted with a dynamic carousel showcasing several of urbanDATA's projects. This preview invites clients to continue browsing the rest of their projects below.
Hero section
Gallery of urbanDATA's Portfolio
Located below the hero and about sections, the projects section features a gallery of project images. Hovering over each image reveals the project name and its associated categories. Users can also filter the projects by category.
Project section
Collection of News Articles…
Located below the hero and about sections, the projects section features a gallery of project images. Hovering over each image reveals the project name and its associated categories. Users can also filter the projects by category.
List of news articles by date
News article example
…and Newsletters
In addition to the company-produced news articles, urbanDATA also has a dedicated space for their newsletters where visitors can read more about their philosophies, methodologies, and ongoing projects.
List of news articles by date
WEB DEVELOPMENT
HTML/CSS and JS as the Building Blocks
To bring my designs to life, I constructed the entire website with HTML/CSS and JS through Visual Studio Code. Final website designs also depended on technical feasibility due to time constraints.
Figma Mockup → Final website design
GUIDE DOCUMENTATION
Ensuring a Smooth Handoff and Consistent Maintenance
To ensure the team could maintain and update the website after my internship, I created a step-by-step guide outlining the workflow, file structure, and content update process. This helped streamline future edits and ensured design consistency across future updates. Throughout the
Detailed guide documentation for updating and maintaining the website
THE IMPACT
A Lasting Contribution
This project was a solo effort completed within six weeks, where I led every stage — from redesigning the layout and coding the website from the ground up (including translating 60+ project pages and 60+ news article pages), to writing a guide for future updates.
Because urbanDATA didn’t have a webmaster or front-end developer, the documentation I created allowed their team to easily maintain and update the site on their own. My supervisor was deeply appreciative of my work and later wrote a letter of recommendation recognizing the value and initiative I brought to the project.
"Anita has always been highly initiative, she shows superb capacity to work independently and to find and solve the problems in the working process soundly. The result of her work is excellent, and won the praise from colleagues and clients."
- Dr. Shan
THE DESIGN PROCESS
🎨
Now, let's jump into the design process!
RESEARCH
Product Teardown
To identify areas for improvement, I conducted a product teardown of the initial website to understand the structure, visuals, and usability challenges.
Competitive Analysis
I analyzed existing urban design websites from prominent urban design firms throughout China to understand how they appeal to current and potential clients from around the world. From this analysis, I identified features and user interactions that could help improve the usability of urbanDATA's website while capturing its essence.
Competitors
Key Takeaways
Each urban design website utilized large appealing visuals that easily guided users' eyes throughout the website
Projects were always displayed almost immediately for visitor/client convenience
Consistency in formatting and layout is important for professionalism
User Interviews
To better understand how urban design professionals and clients engage with design firm websites, I conducted 6 semi-structured interviews with both industry professionals and past clients. The goal was to uncover expectations, frustrations, and opportunities for improving usability and communication on urbanDATA’s website.
3 Industry Professionals
…shared how they evaluate design firms online, what information helps build credibility, and how they interpret visuals and project portfolios.
3 Past Clients
…discussed what they look for when exploring design firms, how they assess trustworthiness, and their pain points navigating similar sites. |
Key Findings🔎
From my competitive analysis and user interviews, three core themes consistently emerged:
1.
Clarity Builds Trust
Users value clear and professional presentation of project details and firm expertise. Clutter and vagueness reduce credibility.
2.
Visual Hierarchy Matters
Participants rely heavily on layout and information structure to find what they need quickly
3.
Simple Navigation, Greater Engagement
Users are more likely to browse deeper into a website when navigation feels intuitive and consistent.
IDEATION
Sketches
Based on my product teardown, competitive analysis, and user interviews, I sketched several ideas that became the foundation of the first mockups. With these sketches, I was able to visualize the layout and brainstorm interaction ideas.
BUILDING AND TESTING
Employing HTML/CSS & JS for Front-end Development
I implemented the redesigned website using HTML/CSS and JavaScript, translating the visual design into a functional interface. My goal was to maintain design fidelity while ensuring the layout was responsive and visually consistent across pages. I focused on clean structure, readable typography, and intuitive spacing to enhance usability and accessibility. Additionally, I used DeepSeek — a Chinese-established LLM — to efficiently and accurately translate all the Mandarin content to English.
Design Iterations
The 3 design decisions were informed by usability testing and constant supervisor feedback.
Project Showcase
Before
Users had to click through branches: categories —> project title in order to see project images and details
The space for the project details took up very little screen space — made it strenuous for users to read
After
Users are immediately greeted with a gallery of project previews
Projects can be filterable by categories
A dedicated page opens up in a new tab with complete project details, reduces strain to read description
News and Newsletters
Before
Users were unable to immediately understand the difference between news and newsletters
Difficult to quickly scan over news articles by date, looks cramped
After
Clear temporal structure, grouping articles by year and ordering them by date for easier browsing
Separated News and Newsletters into different spaces on the nav bar
Presented Newsletters with visual covers to further create a distinction between news articles and newsletters
Contact Information
Before
After
Users were confused with unlabeled contact information, not sure as to what “C, A, T, A, E, U” stands for
Users were frustrated that the text could not be selected and that the map was small and cannot be interacted with
Clearer information hierarchy with supporting icons
Implemented hyperlink functionality for applicable text elements (e.g., address, website URLs) that open in a new tab
Added urbanDATA's WeChat QR code for easier access to immediate contact
REFLECTIONS
Embrace Multifaceted Challenges 🤹♂️
I entered the internship as a product design intern and finished it as a UX and web design intern. What began as a design-focused role evolved into a full-spectrum experience where I became the sole designer and developer, seeing through an entire website redesign from start to finish.
Although my experience with front-end development was limited, taking ownership of the implementation deepened my understanding of how design decisions translate into real-world interfaces. It taught me to think critically about both user experience and technical feasibility.
Adapting and Collaborating ⚖️
This experience also strengthened my ability to communicate across design and development perspectives. I learned how to own my design decisions while remaining open and flexible to my supervisors’ visions — balancing creative direction with collaboration.
WHAT'S NEXT?
Technical Tweaks
This project was completed under a strict timeline where I had only a few weeks to redesign and front-end develop the entire website. With more time, I would refine minor bugs, ensure full responsiveness across devices, and conduct another round of usability testing. Now with a stronger grasp of technical feasibility, I’d also like to revisit the project to implement features like pagination and image pop-ups.
Made with love and lots of nova lox bagels (๑•ᴗ•๑)
Design is better together — let's connect! 🤝
Resume