top of page
jumbocode image.png

The Lantern

Role: UX Designer

Skills: Figma, Visual Design, Prototyping

Timeline: September - December 2023

mdi_company.png

Company

The Lantern is a student think tank at Tufts that investigates the social impact of science and technology to advocate for responsible innovation.

fluent_people-team-20-regular.png

Team

1 UX Designer (me!)
1 project manager
1 tech lead
10 developers

fluent_thinking-24-regular.png

Problem

The Lantern needs a website to display their magazine issues and events to the general public, as well as provide admin access to eboard members.

Beginning the Design

Met with the PM and stakeholders to discuss project scope

I met with members from The Lantern to discuss their goals for the site. During this initial meeting, we first reviewed The Lantern’s current website together:

Original homepage and about page

Group 47.jpg

Original magazine page

Group 48.jpg

Original events page

Screen Shot 2024-05-14 at 2.16 1.jpg

The current limitations of this website are that:

  1. The homepage doesn’t provide a full overview of what The Lantern is and does

  2. There is no way to submit work to the publication

  3. The events page does not actually provide information about upcoming events

  4. There is limited information about what science, technology, and society (STS) is

  5. There is no way for e-board members to update information

Therefore, the Lantern members, PM, and I identified the following changes to be made in the redesigned site:

  1. Make the homepage more of a general landing page, separate from the “About Us” page

  2. Allow users to view and RSVP to events

  3. Add pages for “Contact Us” and “Resources”

  4. Add a way for users to submit work

  5. Add admin views for the magazine, events, and contact us pages that allow admin to add/edit/delete information​

The Lantern also provided a document with their current logos, colors, and fonts for me to use in the new design:

Screen Shot 2025-01-16 at 3.58.36 PM.png

Defined two types of users

pepicons-pencil_people.png
General Public

The general public will use the site to learn more about The Lantern, view the magazine, and learn about and RSVP for events

fluent-mdl2_signin.png
Administrator

Administrators will have the additional capability to log in, upload and edit magazine files, and add, edit, and delete club events.

Created the header and footer

Next, I designed the header and footer, as these were the first tickets the developers were going to work on.

For the header, I wanted to:

  • provide a navigation menu to access all of the main pages

  • include The Lantern logo in the top left corner to link back to the homepage, as this is consistent with most websites and would therefore be what the user expects to see:

Header.png

For the footer, I wanted to:

  • provide access to the main pages

  • link to The Lantern’s socials

  • provide the ability for the general public to submit their work

  • allow administrators to log in

footer.png

Created first iterations of the homepage and about page

Next, I created first iterations of the homepage and about page, using the color palettes I was given and the information available on the current Lantern website.

On the homepage, I highlighted the main features that users may be coming to the website for:

  • reading the magazine

  • submitting work

  • learning more about what The Lantern is

Homepage v2.png

On the about page, I:

  • included the information on the current site

  • aimed to make the text more scannable by increasing the color contrast and breaking the text into separate sections

About Us.png

Refining the Design

Lantern members wanted brighter colors and a more fun feel

After reviewing my initial designs, the Lantern members’ initial feedback was that they wanted:

  • brighter colors

  • more visual elements

  • a more fun feel that matched the personality of their Instagram account

Here are a couple examples of images from their Instagram that I used for inspiration:

Screen Shot 2025-01-16 at 4.01.14 PM.png
Screen Shot 2025-01-16 at 4.01.28 PM.png

In my refined designs, I:

  • incorporated the blue and orange boxes like those in their examples to help break up places with a lot of text, such as in the about page

  • added more color to the homepage

  • tried to capture the same feel as their Instagram, such as using the curved arrow to guide the user’s attention to the “Read it here!” button on the homepage

Homepage v3.png
About Us.png

Lantern members wanted more photos

After reviewing the designs, the Lantern members requested

  • more photos to break up text-heavy pages, such as the about page. I asked them for some photos of the group at various events., and changed the about page to include them

  • more general information about what Science, Technology, and Society (STS) is. I added a section to the About page briefly explaining STS

About Us.png

Created the rest of the general public pages

Once the Lantern members were happy with the designs of the homepage and about page, I carried over what they liked about those designs into the magazine, events, contact us, and resources pages

Magazine - past issues.png
Resources.png
Events.png
Contact Us.png

Designing the Admin Pages

Created admin versions for the magazine, events, and contact us pages

I started by:

  • removing information that was not relevant for admins, such as the contact form,

  • considering which additional features admins would need, such as editing, adding, and deleting information.

For instance, below you can see the differences between the contact pages for general users vs admins:

General Contact Us Page

Contact Us.png

Admin Contact Us Page

Admin Contact Us.png

Challenges while creating the admin pages

One of the biggest challenges of creating the admin pages was thinking through the entire user flow to ensure that I had screens for each step.

For instance, I created views to show the screens for editing and adding members:

Edit eboard Overlay.png
Add eboard Overlay.png

However, once the developers started working on these pages, the PM asked me if there should be a confirmation when deleting members and I realized I had not created a frame for this, so I then needed to go back and create one:

Delete confirmation.png

Final Design

The final result was a fully redesigned website with more information about The Lantern and its mission, magazine, and events, along with admin views for Lantern board members: 

You can also view the full prototype here.

Reflection & Takeaways

Working with tight time constraints

One of the biggest challenges with this project was the tight timeline. I needed to complete the designs in the first half of the academic semester so that I could hand them off to the developers to begin working on them. I was also working on this project while taking on a full course-load, so it required a lot of careful time management and communication with the PM to ensure that the designs were completed in time. Due to this tight turn around, I needed to start right off with the high-fidelity designs, rather than starting with low-fidelity, which I would have done in an ideal situation. 

Separating my emotions from my designs

During this project, I learned the importance of separating my emotions from my designs when receiving feedback. During each iteration, I felt that my work was the best it could be, and then after receiving and incorporating feedback, it somehow became even better. This showed me the importance of being open-minded and willing to move away from my initial ideas in order to make the final product the best it can be.

Honing my visual design skills

Prior to this project, I did not have a lot of experience with visual design. I was a bit nervous going into this project because it was a lot more focused on the high-fidelity designs, rather than on research or low-fidelity.

Working within the capabilities of the developers

Because I was working with students, I needed to work within their abilities. This meant that I needed to be in communication with both the PM and the developers to ensure that my designs were feasible. It was a great learning experience to work directly with the developers implementing my designs.

Testimonial

"We love the design! The pops of color and palette are really awesome and fit our vibe well. The contrasts but also the balance makes everything look really great! Super excited to work with it, it's beautiful!"

- The Lantern executive board

bottom of page