Try out the interactive high-fidelity prototype here:
Client: Sheraton San Diego Hotel & Marina, just-for-fun
Project Type: Mobile App Redesign
Tools: Pen, Paper, Experience Design, Sketch
Duration: 1 week
Goal: Have guests easily take photos and send photos to themselves
Problem: App was not easy (not intuitive to use)
Solution: Added features with consistent design characteristics
Sheraton San Diego Hotel & Marina has a photo booth kiosk in their lobby. Its purpose is to improve guest experience by giving them something fun to do while waiting in the lobby, and to serve as a marketing tool for Sheraton Hotel through guests who will share these photos with their social networks.
I tasked myself to redesign the app because the UX was not as intuitive as expected, which indicated that the marketing and guest experience enhancement results Sheraton that wanted from the photo booth kiosk were being under-converted.
By completing the task of using the photo booth by myself, I observed that the main problems the new design will need to fix are:
✘ Lack of clear directions and information on screens.
✘ Inconsistent locations of interactive elements.
COMPARATIVE ANALYSIS. After I developed a general idea of which design direction to take, I did a comparative analysis of other photo booths to see what features they had that would translate well into the Sheraton lobby photo booth. I chose these photo booths to compare based on how popular they were from a Google search because if these apps are popular, they must have the features that explain why.
Takeaways from comparative analysis for new design features:
✎ Add additional share options other than e-mail.
✎ Introduce 3-second countdown before photo is taken.
✎ Incorporate live preview of image from camera onto screen.
✎ Incorporate back buttons to account for user errors.
EXPLORATIONS. After understanding what was not working well with the app, researching what features other photo booth apps were offering, and creating a handful of ideas I recommended upon first observation of the app, I sketched out possible screens for the new app.
For these screens, I ensured that each one I designed was fulfilling a similar function that the original screens were serving.
USER RESEARCH. ITERATION. USER FLOWS. I made 6 different sketches, with each different sketch incorporating different user feedback.
Feedback from users during testing initial sketches and wireframes:
"I can't see the 'No' button because it's so dark. I need an option to retake the photo if I don't like it."
"I don't like entering in my e-mail address in public."
"It'd be nice if I can just get the photo directly on my phone."
"I don't want to enter in my e-mail twice."
"The 'send to email/text' link doesn't need to be so big because it's distracting, and not everyone is going to need it. Having it there is good enough for the few people who will need it."
LOW-FIDELITY WIREFRAMES. From here, I used the wireframe sketches and transferred them onto the computer, where I used Adobe Experience Design to design and prototype them. I made several versions and with each one up to the final version, I did A/B testing, observed users going through the prototype, and asked users for feedback to make design decisions. I simplified the screens to 4 steps where the user will be able to take 1 photo and have the option to take another one in a short amount of time if they wanted to.
USER FLOW. With these wireframes, I demonstrate user flow through the screens.
USER FLOW WITH SCREENS.
LOW-FIDELITY PROTOTYPE. From here, I made a low fidelity (without UI details) prototype using Experience Design. This following video shows the ideal flow of the user liking the first photo they take and sending it to themselves via text message.
The new design solves the original problems found during the PROBLEM FINDING phase because there are now:
✔ Clear directions and information on screens.
⁇ So users know exactly what is going on and what to do next.
➜ Big white font and dark gray screen background offer high contrast for better readability.
➜ Touch-buttons have drop shadows and black text on white backgrounds to indicate responsiveness to touch and better readability.
✔ Consistent identification (location, colors, shapes of buttons) of interactive elements.
⁇ Simple color palette of dark gray background, white touch buttons, white bold text, black bold text, and accent red and green colors help users easily identify the different types of interactive elements on the screen.
➜ 3 consistent interaction sections of the screen:
☞ top third of screen = information given to the user,
☞ middle third of screen = output given from user input, and
☞ bottom third of screen = user input.
➜ Consistent white button at the bottom of the screen tells users where to touch.
➜ Consistent size (length and width) of touchable buttons tells users what is touchable.
I also incorporated features from the COMPARATIVE ANALYSIS phase:
✔ Add additional share options other than e-mail.
⁇ Users who may not have an e-mail address or prefer to type in less text have additional option to receive their photo.
➜ Add text message option.
➜ On-screen keypads and number pads are already on screen, ready for users to type on them.
✔ Introduce 3-second countdown before photo is taken.
⁇ So users have time to prepare for the photo instead of wasting the first few photos (out of the previous 4 photos) realizing that the photoshoot had started before they were even ready. This simplifies the process so users are ready for the photos. Since process is simplified and shortened, users also have the option to take more photos if desired.
➜ Add 3-second countdown.
➜ Shortened photo process so users can take additional ones if desired.
✔ Incorporate live preview of image from camera onto screen.
⁇ So users know what is going on and can prep how they look before photo is taken. Showing live preview on splash screen as guests walk by the kiosk also entices them to come in to take a photo instead of having a text-based 'Hello, Welcome' screen.
➜ Take 1 photo only since users will already be ready for the 1 photo.
✔ Incorporate back buttons to account for user errors.
⁇ It minimizes user error and allows them to correct mistakes easily by simply going back to the previous page.
➜ Added 'No' option to retake photo.
➜ Added 'Oops, send via e-mail instead' and 'Oops, send via text message instead'.
UI STYLE GUIDE
Prototype and wireframes have the annotations ready for further UI and front-end development. Micro-interactions and UI details will need to be added with a focus on screen transition animations, countdown animation, pressed-button feedback, typography, etc.
Social media integration is another feature to consider, as many users commented that sharing directly to social media would be nice, but they were also hesitant how to connect to their social media profiles because of a QR code technicality or entering password information in public.