︎
          Resume  
About                        

Transform the Timeline v2

Calling for Non-white-male Architects!

Transforming the Timeline is a group project for SES 5419: Hidden Figures: The City, Architecture and the Construction of Race and Gender. We are encouraged by Professor Hansy Better Barraza to create a radical archive of architects/landscape architects/planners who are underrepresented in modern society due to their gender, nationality, and sexuality. We decided to break the traditional categories and weave an interconnecting net. We chose themes over professions, hoping to give them the credits they deserve.
I am in charge of the theme “Asian by Geography and Identity” and “Artivism” research. I also led the website design and development during the course.
This previous project is achieved by the group. The later UX research and design are finished by me.Tools used: Illustrator, Photoshop, XD, Cargo, Balsamiq Wireframes, pen and paper

My role: UX researcher and designer
Introduction
 The project goal was to re-design the previous website with an improved visual appearance and user experience.
What is Transform the Timeline v2 ?
 Transform the Timeline v2 is a re-designed website that only not advocates for female architects but also invites users to participate in the process.
Current website offerings
︎

Website information architecture



User Research
︎

Who are the users?
 The user research recurits 50 people to finish the survey. 
User interview
 I interviewed some participants. It was beneficial to hear their first-hand feedback.
User journey mapping
 The user journeys of the previous website were mapped out.

Personas
 Based on our website’s major user portfolio, I have created three personas representing the typical users.
Matteo

Matteo is a graduate student majoring in architecture who needs more knowledge about BIPOC architects because he researches the topic of diversity.
Avery

Avery is a college student interested in pursuing architecture which needs to learn about the landscape of the industry because she is looking for a role model for her career pursuit.
Henry

Henry is a professional architect who needs a more diverse portfolio of architecture design because he wants to get inspired for his works.
Color contrast checker for accessibility
 The massive use of purple in the website received some negative feedback. The first thing is to check the contrast.
The contrast check is passed, so the issue might lie in the design.
https://webaim.org/resources/contrastchecker/
Problems
  1. The homepage is too crowded and overwhelming
  2. The purple can be overwhelming sometimes
  3. The gifs are too blinking and become distractive
  4. The bio pages don’t have much information and don’t link to their firms’ pages, etc.
  5. There is no search engine on the website for quick access
Opportunities
  1. A clearer and more inviting homepage
  2. Tags for better structure of the complex web of figures
  3. A better-designed timeline representation
  4. Richer and more interactive bio pages
  5. A search function for easier visiting and re-visiting

Ideate
︎
Sketches
Sketches
Lo-fi prototypeI developed the lo-fi prototype for the website in the Adobe XD and use it to check if all insights have been fulfilled, especially important ones that affect user experience greatly.
Product solution
︎
Features
︎
Brandnew Homepage - Clean, Clear, Cool
The new homepage employs a layer-design which makes the information much clear. No blinking gif; it is easier to focus and search. 


Search & Tag - more connected than ever
 The Search & Tag function brings the website to a new level. All the figures have multiple layers of connection and definitions. And the Search function just makes it easier than ever to find the information you need.
Interaction - more involving than ever
Interaction is a huge part of the new design. The newly designed timeline is all about interaction. You move the bar to have the time machine rolling. Users can also tag their figures now, being an active part of the community.
Takeaways
︎
Impact
 The improved website can better advocate for our mission of promoting diversity and inclusiveness in architecture. It is more precise and more inviting, which helps attract a broader audience.
What I learned
 It can be helpful to prepare multiple templates for one page since the actual materials may not be fully acquired for the website. Different designs can be used for people with different information, so the representation can be optimized for the information provided.
Junru Ruan © 2022  ︎