Future Histories
Future Histories
Future Histories
Using a UX research approach to redesign the website for the Future Histories art-literary magazine
Using a UX research approach to redesign the website for the Future Histories art-literary magazine
Using a UX research approach to redesign the website for the Future Histories art-literary magazine
Overview
Overview
I currently embark on using an UX and UI approach to redesign the website of Future Histories, an art-literary magazine in which I am Head of Design as well as a leading Web Editor.
I currently embark on using an UX and UI approach to redesign the website of Future Histories, an art-literary magazine in which I am Head of Design as well as a leading Web Editor.
Role: Head Web Editor, UX Researcher, UX Designer, UI Designer, Web Designer
Collaborator: Jay Guo - UX Researcher
Timeline: June 2024 - Present
Tools: Figma, Miro, Canva
My Role
Head Web Editor
UX Researcher
UX Designer
UI Designer
Web Designer
Collaborator
Jay Guo - UX Researcher
Timeline
June 2024 - Present
Tools
Figma
Miro
Canva
Context
Context
Future Histories is an art-litererary magazine at Tufts that produces issues semiannually with an emphasis on amplifying marginalized voices on campus. The publication not only provides great opportunities for students to submit artwork and written work and see their pieces in uniquely designed spreads distributed around campus. The Future Histories team consists of artists, designers, editors and writers that work alongside each other to produce issues.
I have been involved in the club since freshman year, and with a drive to give back to the club and with new leadership responsibilities, I pitched the idea to revamp the Future Histories website this summer since we got a new subscription to Wordpress.
Future Histories is an art-litererary magazine at Tufts that produces issues semiannually with an emphasis on amplifying marginalized voices on campus. The publication not only provides great opportunities for students to submit artwork and written work and see their pieces in uniquely designed spreads distributed around campus. The Future Histories team consists of artists, designers, editors and writers that work alongside each other to produce issues.
I have been involved in the club since freshman year, and with a drive to give back to the club and with new leadership responsibilities, I pitched the idea to revamp the Future Histories website this summer since we got a new subscription to Wordpress.
Future Histories is an art-litererary magazine at Tufts that produces issues semiannually with an emphasis on amplifying marginalized voices on campus. The publication not only provides great opportunities for students to submit artwork and written work and see their pieces in uniquely designed spreads distributed around campus. The Future Histories team consists of artists, designers, editors and writers that work alongside each other to produce issues.
I have been involved in the club since freshman year, and with a drive to give back to the club and with new leadership responsibilities, I pitched the idea to revamp the Future Histories website this summer since we got a new subscription to Wordpress.
Problem
Problem
Engagement with Future Histories is currently low. As a long-time member of the publication myself, I felt that our club has struggled with improving its online presence as well as internal and external communication. Submissions for student work were low and essentially only FH members would show up to content reviews and open events. The old website for FH was primarily used as a way to look at issues online and submit work to the magazine, but its design and content had a lot of room for updating and to be made more engaging.
Engagement with Future Histories is currently low. As a long-time member of the publication myself, I felt that our club has struggled with improving its online presence as well as internal and external communication. Submissions for student work were low and essentially only FH members would show up to content reviews and open events. The old website for FH was primarily used as a way to look at issues online and submit work to the magazine, but its design and content had a lot of room for updating and to be made more engaging.
Solution
Solution
I led the redesign of the Future Histories website through a UX design-based approach. Working with another web designer, I took initiative to gather ample amounts of user research to help ideate engaging features and create an interactive, exciting website prototype. We are excited for our next steps of user testing and integrating our findings into our website.
I led the redesign of the Future Histories website through a UX design-based approach. Working with another web designer, I took initiative to gather ample amounts of user research to help ideate engaging features and create an interactive, exciting website prototype. We are excited for our next steps of user testing and integrating our findings into our website.
User Research
User Research
Affinity Mapping
Affinity Mapping
We conducted 8 user interviews and also had our interviewees test our our old website. We created affinity maps from notable quotes they had about the Future Histories and the old websites' shortcomings.
We conducted 8 user interviews and also had our interviewees test our our old website. We created affinity maps from notable quotes they had about the Future Histories and the old websites' shortcomings.
User Personae
User Personae
We then created two user personae– one being focused on the functionality of our website and club as well as one who cares more about the personality and vibe of FH and our website.
We then created two user personae– one being focused on the functionality of our website and club as well as one who cares more about the personality and vibe of FH and our website.
Pain Points
Pain Points
From our affinity mapping and user persona development, we gathered the following pain points to resolve for our
website redesign:
From our affinity mapping and user persona development, we gathered the following pain points to resolve for our
website redesign:
😫Not Personable
😫Not Personable
Users have a hard time determining what Future Histories is through our home page because it lacks a blurb. The overall look of the old website does not capture the artistic, quirky vibe of Future Histories. Users do not feel transported into the unique environment of the club when they look at the website. We also lack a team page, which users dislike because they like seeing people involved in the club.
Users have a hard time determining what Future Histories is through our home page because it lacks a blurb. The overall look of the old website does not capture the artistic, quirky vibe of Future Histories. Users do not feel transported into the unique environment of the club when they look at the website. We also lack a team page, which users dislike because they like seeing people involved in the club.
🦗 Lack of Engagement
🦗 Lack of Engagement
There is currently no events section of the website despite our club having frequent content reviews and workshops throughout the year.
There is currently no events section of the website despite our club having frequent content reviews and workshops throughout the year.
💔Unintuitive
💔Unintuitive
Layout of the old website is inconsistent. The "Specials" page is especially unintuitive because it includes both a zine issue and an old event which makes it confusing to identify what the page is about.
Layout of the old website is inconsistent. The "Specials" page is especially unintuitive because it includes both a zine issue and an old event which makes it confusing to identify what the page is about.
⏳Inefficiency
⏳Inefficiency
Currently, the old website contains seemingly embedded links to read issues, but then they need to click the link that takes them to a separate website, which causes them to become disengaged with reading further.
Currently, the old website contains seemingly embedded links to read issues, but then they need to click the link that takes them to a separate website, which causes them to become disengaged with reading further.
We also noted that many of the links to issues are currently outdated, and that events are not updated either. We would keep this in mind for further website development steps.
We also noted that many of the links to issues are currently outdated, and that events are not updated either. We would keep this in mind for further website development steps.
User Research
User Research
User Flow
User Flow
We worked on creating a design flow for the site to best target each pain point while containing well-designed page hierarchies. I then moved on to creating lo-fi wireframes for our website using Miro.
We worked on creating a design flow for the site to best target each pain point while containing well-designed page hierarchies. I then moved on to creating lo-fi wireframes for our website using Miro.
Wireframes
Wireframes
We then went onto creating a wireframe for our app to better visualize the features of our app.
We then went onto creating a wireframe for our app to better visualize the features of our app.
Designing
Designing
Final Prototype
Final Prototype
🤗Making the Website More Personable:
🤗Making the Website More Personable:
The re-designed "Home Page" contains an immersive content hierarchy and increased graphics that draw users into the artistic, playful realm of Future Histories.
The re-designed "Home Page" contains an immersive content hierarchy and increased graphics that draw users into the artistic, playful realm of Future Histories.
The re-design also contains a robust "About" section in the menu bar where users can do anything from learning about our mission and team to accessing applications to join the club.
The re-design also contains a robust "About" section in the menu bar where users can do anything from learning about our mission and team to accessing applications to join the club.
🗓️Tackling Lack of Engagement:
🗓️Tackling Lack of Engagement:
To target the lack of engagement that Future Histories’ online platforms are experiencing, I added a new “Events” section to the website prototype that includes upcoming events that Future Histories organizes, as well as including small blurbs detailing each event that easily piques users’ interests.
To target the lack of engagement that Future Histories’ online platforms are experiencing, I added a new “Events” section to the website prototype that includes upcoming events that Future Histories organizes, as well as including small blurbs detailing each event that easily piques users’ interests.
⏩Improving Efficiency:
⏩Improving Efficiency:
To target the lack of engagement that Future Histories’ online platforms are experiencing, I added a new “Events” section to the website prototype that includes upcoming events that Future Histories organizes, as well as including small blurbs detailing each event that easily piques users’ interests.
To target the lack of engagement that Future Histories’ online platforms are experiencing, I added a new “Events” section to the website prototype that includes upcoming events that Future Histories organizes, as well as including small blurbs detailing each event that easily piques users’ interests.
🧹Making Features More Intuitive:
Getting rid of the "Specials" page and incorporating Zines into the Issues section while making a separate "Events" page made the website feel much more intuitive.
Getting rid of the "Specials" page and incorporating Zines into the Issues section while making a separate "Events" page made the website feel much more intuitive.
Incorporating the Instagram logo and a link to our email felt a lot less outdated than linking our Facebook and not labeling our Instagram posts. By creating a simple, aligned set of contact methods in the bottom left corner of each website page, I added consistency and got rid of disorganization in the site.
Incorporating the Instagram logo and a link to our email felt a lot less outdated than linking our Facebook and not labeling our Instagram posts. By creating a simple, aligned set of contact methods in the bottom left corner of each website page, I added consistency and got rid of disorganization in the site.
Incorporating the Instagram logo and a link to our email felt a lot less outdated than linking our Facebook and not labeling our Instagram posts. By creating a simple, aligned set of contact methods in the bottom left corner of each website page, I added consistency and got rid of disorganization in the site.
Reflections & Goals
Reflections & Goals
What I Learned
What I Learned
🌱Parallax animations in Figma: They helped my prototype’s homepage become dramatically more dynamic and immersive!
🌱I improved a lot in my outreach skills: I actively reached out to Future Histories members involved in the Future Histories website to pitch my ideas for approaching the re-design through a UX design lens. I also took charge of scheduling meetings and timelines for tasks with collaborators and interviewees.
🌱Prioritizing user research: I learned to advocate for the importance of user research to my web design collaborator in order to have more intentional ideas for improving the website and making it the most user-friendly it can be!
🌱I gained new experience with working on a publication website!
🌱Parallax animations in Figma: They helped my prototype’s homepage become dramatically more dynamic and immersive!
🌱I improved a lot in my outreach skills: I actively reached out to Future Histories members involved in the Future Histories website to pitch my ideas for approaching the re-design through a UX design lens. I also took charge of scheduling meetings and timelines for tasks with collaborators and interviewees.
🌱Prioritizing user research: I learned to advocate for the importance of user research to my web design collaborator in order to have more intentional ideas for improving the website and making it the most user-friendly it can be!
🌱I gained new experience with working on a publication website!
Goals for the Future
Goals for the Future
✨Development of a Features page that features artwork/written piece spotlights and a blog that really opens up the Future Histories website to become a space of collaboration, communication and experimentation.
✨Having a secondary round of user tests to test out the Figma prototype and determine what works and what needs to be changed further before going in and making updates to the actual website.
✨Working with developers and project managers in future projects to get a better sense of what it is like to work in UI and UX design in a professional space.
✨Development of a Features page that features artwork/written piece spotlights and a blog that really opens up the Future Histories website to become a space of collaboration, communication and experimentation.
✨Having a secondary round of user tests to test out the Figma prototype and determine what works and what needs to be changed further before going in and making updates to the actual website.
✨Working with developers and project managers in future projects to get a better sense of what it is like to work in UI and UX design in a professional space.
