Case Study: The Lisbon Frame
The Lisbon Frame is a film lab where customers can buy and develop film, rent film cameras, and can experience photography tours. Customers can see Lisbon from the eyes of a local and also learn how to photograph using a film camera. Users can learn the basics of analog and take home one of a kind souvenirs and memories. Our Stakeholder, Beatriz runs The Lisbon Frame by herself, as well as conducting tours, workshops, and developing film.
Our group decided to center our e-commerce project on The Lisbon Frame. Our goal was to redesign an e-commerce website for only one user flow. The Lisbon Frame had many different services; however, we only prototyped the interaction of a user purchasing a workshop service.
We first conducted user interviews to get a better understanding of The Lisbon Frame, customers, photography lovers, and competitors. Our first interview was with Beatriz, and we got more information about the history of The Lisbon Frame as well as the services that are offered. Our stakeholder talked with a lot of passion about film photography and was very eager to show our group her shop and her workspace.
We interviewed 5 people, all were photography lovers. From the interviews, we learned that people loved film because they could cherish the little moments associated with film. Many users preferred analog photography to digital, because with film, you are more intentional with the photos you take.
Interviewees also commented about the high cost of film as well as going to film labs based on convenience and word of mouth. We learned that users, learned about film from a parent and continued to explore the medium on their own. Our group felt that because many of the people we interviewed had a curious drive to invest time into their education, we were going to focus our efforts on the workshop services for an e-commerce user flow.
We constructed a competitive analysis, looking at competing workshops, film labs, and touring websites. It seemed that other film labs had more expensive prices and offered less services. Other film labs were charging anywhere from 14 to 23 euros for developing, and The Lisbon Frame was charging 5 to 14 euros for developing. In addition to developing and scanning film, The Lisbon Frame offered tours and workshops. There really weren’t any other workshops in Lisbon that allowed people to hone their photography craft. Many of them were mainly photoshoot sessions, where a photographer took photos of the user; here, the user did not hone their photography craft or learn more about Lisbon.
In our heuristic evaluation, we found various issues violating heuristic principles, but the severity never went over a 3 on a 4 point scale. The main issues were with Visibility of System Status, Aesthetic and Minimalist Design, and Flexibility and Efficiency of Use.
To fix these issues we:
Used web based fonts
Ensured that buttons indicated a user action
Prototyped a minimalist UI layout that ensured only necessary information was present
Included a “Sign In” button as well as a “Skip” button to speed up the check out process (there were no accelerators on the original site)
We continued our UX research by conducting a card sort. We found through the card sort that the original titles were too lengthy and some were confusing. Our group decided to group our site map into shorter and clearer categories. For instance, “What We Do” became “About Us”.
We created a problem statement and a How Might We question to focus our brainstorming efforts:
Problem Statement: How might we develop unique experiences for creative individuals to preserve cherished memories?
How Might We: How might we develop unique experiences for creative individuals to preserve cherished memories?
For UI, our group really gravitated towards more minimalistic layouts, that really emphasized the images of our photography film lab. In our user interviews with our stakeholder, it was clear that she did not like color. She even went as far as saying that “color is boring”. She prefers to shoot with black and white film. We decided to honor her by ensuring a minimalistic layout with minimal color, only using the images as pops of color.
For typography, we pulled inspiration from vintage film advertisements and film festival advertisements. Our group was really drawn to big and bold sans serif fonts. For our redesign, we selected Syne, as our primary font and a simple sans serif font for our body text. The Syne font still has enough personality to give the website redesign the feeling we created in our mood board.
As a group, we drafted low-fidelity, mid-fidelity, and high-fidelity prototypes of The Lisbon Frame website. We conducted usability tests throughout the process to ensure that our redesign offered the best possible user experience for someone looking to book a workshop.
From our usability testing with our low and mid-fidelity prototypes, we learned that users were confused with how to schedule a date for the workshops. Users were unsure if they could book the workshop at any time (midnight perhaps?) and didn’t know if a workshop was already booked. In our high-fidelity prototype we made sure to resolve this issue with a key indicating unavailable, available, and limited availability of workshops. Users could also select one of two time slots on an available day.
In retrospect, it would’ve been nice to make more components in Figma, as well as putting our different versions in different Figma files. Our group was experimenting with Figma as we were drafting our prototypes, so including more components would’ve sped up our workflow.