Design Sprint:
GramCity
A Mobile Application feature that helps users find photo-ops wherever they are
ROLE
UX Researcher
UX/UI Designer
TEAM
JiaJie Saw
TOOLS
Adobe XD
Procreate
GramCity is a new startup that wants to explore how (and where) they can help their users find great photo-ops near them. GramCity wants to design a feature to help users find awesome places to take photos, wherever they are.
GOAL
OBJECTIVE
The primary goal for Day 1 was to gain a deep understanding of the user needs and the specific problem "GramCity" aims to solve. This involved identifying the key personas who would use the app and understanding their motivations, behaviors, and pain points related to finding photo opportunities.
Day 1: Understand/ Map
Day 1 of the Design Sprint for the "GramCity" app set the stage for a focused and productive week ahead, dedicating this initial phase to understanding the problem and mapping out the user journey. As a solo designer, this foundational day was crucial for establishing a clear direction and framework for the design challenges and opportunities that lie ahead.
-
The solution should be designed as a feature for the GramCity mobile app.
-
Help users find physical places and locations.
-
Create an active community of users who find & share their favorite locations.
DESIGN CONSTRAINTS
“I usually look for places that will catch someone’s eye - visually stimulating, bold colors or an interesting composition usually makes for an awesome photo.”
“I like to find hidden gems - places that not many people know about, but make for an awesome photo.”
“If I’m in a new city, I like to get a good mix of typical “touristy” pictures in front of popular buildings and sites…but I also like to find some lesser known places to take photos of.”
“If I’m in a new city, I want to get some good photos…I just don’t want to spend time looking all over the city just to get one specific shot. I rather find some good places near me that I can take photos of while I’m enjoying my time traveling.”
“If I’m in a new place, I like to find the “must-have” photo ops, even if they’re a little touristy. Sometimes I look on Instagram for the most popular photos in the area and plan out my day from there.”
RESEARCH HIGHLIGHTS
PERSONAS
With a clear understanding of the user's needs, the next step was to map out the user journey for discovering and sharing photo opportunities through the "GramCity" app. This involved outlining the steps a user would take from the moment they seek inspiration to the point of sharing their captured photos.
MAPPING OUT THE USER JOURNEY
On Day 3, I crafted a storyboard that thoughtfully guides users through the process of discovering and engaging with local photo opportunities.
Day 3: Decide and Create Storyboard
1. Home Screen with Search Bar and Recommendations:
The journey begins on the GramCity app's home screen, which presents a clean and intuitive interface. At the top, a prominent search bar invites users to look for specific locations or themes. Below the search bar, there's a dynamically generated section showcasing recommendations of picturesque places to visit. These recommendations are based on the user's location, preferences, and trending spots within the GramCity community. This screen is designed to inspire users right from the start, offering them a gateway to discover the beauty around them.
2. Detailed Map View with Categorized Attractions:
Upon selecting one of the recommended places or conducting a search, users are taken to a detailed map view of the chosen area. This map is enriched with categorized attractions, such as "Architecture," "Art," and "Culture." Users can easily navigate through these categories to refine their search for photo ops. This level of categorization allows users to tailor their exploration experience according to their interests, making the discovery process both efficient and enjoyable.
3. List of Photo Opportunities within the Selected Category:
After selecting a category, the user is presented with a curated list of photo opportunities. Each entry in the list includes a thumbnail preview, hashtags, and a quick favorite button. This design choice facilitates quick browsing and helps users decide which photo op to explore further. The list is designed to be scrollable, encouraging users to explore the depth of options available within their chosen category.
4. Photo-op Description Page with Community Contributions:
Clicking on a specific photo op takes the user to a detailed description page. This page features directions to the location, a gallery of photos uploaded by other users. There is a plus sign button at the bottom of the page, which encourages users to contribute to the GramCity community by sharing their own captures. This feature fosters a sense of community and collaboration, as users can inspire each other with their photographic perspectives.
Day 4: Prototype
On Day 4 of the Design Sprint for the "GramCity" app, the focus shifted entirely towards bringing the conceptual ideas to life through prototyping. The goal is to create a tangible representation of the app that can be tested with users on the final day of the sprint.
The primary objective of Day 4 was to develop a high-fidelity prototype based on the storyboard sketches from Day 3. This prototype needed to be detailed enough to convey the look, feel, and flow of the app, allowing for meaningful user interactions during the testing phase.
OBJECTIVE:
Home Screen and Recommendations: The prototype begins with the home screen, showcasing a clean design with a prominent search bar and a section for recommended places. The design emphasizes simplicity and inspiration, encouraging users to start exploring with just a tap.
Map View with Categorized Attractions: Transitioning smoothly from the home screen, the map view is brought to life with interactive elements. Users can tap on different categories to filter photo opportunities, and the prototype demonstrates this interaction with fluid animations and clear visual cues.
List of Photo Opportunities: The prototype includes a detailed list view for photo ops within a selected category. Each list item is clickable, designed to provide a preview and entice users to delve deeper into the details.
Photo-op Description Page: This crucial part of the prototype details the experience of viewing a photo op's description, user-uploaded photos, and the process of uploading a picture. The "Upload Your Own Picture" button is prominently featured, highlighting the community-driven aspect of the app.
KEY FEATURES PROTOTYPED:
The prototype was designed to be interactive, allowing users to navigate through the app as they would in the final product. This includes the ability to search for locations, select categories, browse through photo opportunities, and view detailed descriptions. Interactive elements such as buttons, links, and scrollable lists were meticulously incorporated to ensure a realistic user experience.
INTERACTIVITY:
On Day 2, the focus shifted towards ideation and creativity with the "Crazy 8s" sketching session. This fast-paced exercise aimed to generate a diverse array of solutions to help users discover photo opportunities nearby. I challenged myself to sketch eight distinct ideas in eight minutes. The goal was to push beyond the obvious and explore a wide range of concepts, from intuitive map interfaces to gamified photo challenges.
Day 2: Sketch
CRAZY 8s SKETCHES
CRAZY 8s SKETCHES
After ideating from my 8 sketches, I decided to use screen #1 and #5.
Screen #5 main page with search bar on the top and recommendations of places for user to select.
Screen #1 precise map of the location selected and recommendations of Categorized attractions nearby.
In preparation for Day 5, the prototype was loaded onto a device that would be used for user testing. A testing script was also prepared, outlining tasks for users to complete while interacting with the prototype. This preparation ensures that the testing phase would yield actionable insights into the usability and appeal of the "GramCity" app's new features.
The main goal for Day 5 was to conduct comprehensive usability testing with a diverse group of users that match the app's target audience. These sessions aimed to uncover any usability issues, gather qualitative feedback on the app's design and features, and identify areas for improvement.
Day 5: Test
3 participants were invited to complete specific tasks using the "GramCity" app prototype, simulating real-world use cases. Tasks included searching for photo opportunities, navigating through different categories, and uploading a photo. Observers noted users' interactions with the app, paying close attention to their behaviors, challenges encountered, and their overall navigation experience.
TESTING METHODOLOGY:
The testing sessions revealed that users were highly impressed with the "GramCity" app's functionality, especially its ability to discover and share photo opportunities. However, a significant piece of feedback emerged regarding the app's navigation bar. Users expressed a preference for changing the navigation bar from its current floating state to a fixed position at the bottom of the screen. The floating navigation bar was reported to cause confusion and detract from the app's visual appeal during navigation. Users indicated that a fixed navigation bar would offer a more familiar and accessible user experience, aligning with standard UI patterns seen in many popular apps.
FEEDBACK & OBSERVATIONS:
Based on this feedback, the next step is to iterate on the app's design by adjusting the navigation bar's positioning. This change will involve moving the navigation bar to a fixed location at the bottom of the screen, ensuring it remains accessible and unobtrusive across different app sections. This adjustment not only addresses the users' concerns but also aligns with best practices in mobile app design, potentially improving usability and user satisfaction.
The Design Sprint for "GramCity" has not only resulted in a prototype that promises to enhance the way users discover and share photo opportunities but also showcased a dynamic and flexible approach to solving complex design challenges. The sprint’s structured yet creative methodology facilitated quick learning and adaptation, driving towards a solution that effectively meets user needs while also offering a delightful and intuitive user experience.
As "GramCity" moves forward from the sprint to development and beyond, the insights gained and lessons learned during this intense week will continue to influence its evolution. The sprint has set a strong precedent for how a user-focused, data-driven design process can lead to innovative solutions that truly make a difference in users’ lives.
In conclusion, the Design Sprint has proven to be an invaluable process in the journey of "GramCity," providing a clear path from understanding to solution, ensuring the final product is not only viable but also desired by its users. It's a testament to the power of empathy, collaboration, and rapid prototyping in the world of UX design, offering a blueprint for future projects aiming to make a meaningful impact in the digital space.
CONCLUSION:
