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.
Role: Head Web Editor, UX researcher, UX designer, UI designer, Web Designer
Timeline: June 2024 - Present
Team: Jay Guo
Tools: Figma, Miro, Canva
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.
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.
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 soon!
USER RESEARCH
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.
User Personas
We then created two user personas– 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
From our affinity mapping and user persona development, we gathered the following pain points to resolve for our website redesign:
😫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.
🦗 Lack of Engagement
There is currently no events section of the website despite our club having frequent content reviews and workshops throughout the year.
💔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.
⏳ 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.
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.
IDEATION
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.
Wireframes
We then went onto creating a wireframe for our app to better visualize the features of our app.
DESIGNING
Final Prototype
🤗 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-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:
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
The website was re-designed to contain embedded digital issues and work submission form in order to allow users to seamlessly engage with Future Histories' work.
🧹 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.
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
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!
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.