GramCity
Visiting a new city and need help finding where to take the best photos?
GramCity recommends the top places for you to take amazing photos to remember your trip.
OVERVIEW
DETAILS
Company
Time
Role
GramCity
5 Days
Solo UI/UX researcher and designer
Format
GV Design Sprint
Tools
• Figma
My Responsibilities
• Identify audience and goals
• Ideate multiple solutions
• Produce sketches and storyboards
• Create a high-fidelity prototype
• Usability-testing and iterate
PROBLEMS
When you’re a photographer exploring a new city, you don’t want to spend too much time trying to figure out where to take great photos. You want to actually experience a new city and find those spots to remember your trip.
GramCity is a photo-editing app that wants to make it easier to find great places in a city to take photos. Since their users are photographers, they want to make it easier for them to find great spots to take photos when they visit a new city, both nearby and throughout the city.
SOLUTIONS
SOLUTIONS
Allow users to find places to take photos
This is the main goal: we want to be able to recommend places in a new city. So to meet that, the main feature will be a map view that lets a user scroll around a city to find places they want to visit.
Create a way for users to search for nearby places
We want to make sure that onboarding feels natural, makes sense, and isn't overwhelming. Since we have to ask a lot of questions to get their taste preferences for recommendations, we want to make it relatable, even if the user doesn't know much about wines.
Integrate social interactions to recommend places
Being able to vet places will be important, so we want to encourage interacting with other users through liking photos, seeing photos they took, and rating locations.
Devise a way for users to save places to make an itinerary
With the main feature of the app being a chatbot, we'll need to map out the decision-tree and create a prototype for users to test. We also need to capture the right tone and feel of a chatbot.
Day 1: Understand
RESEARCH
The client provided mockups for most pages which gave us an idea for where to start. There were two main users:
People who like to plan out
PERSONAS
For competitive analysis, we looked at other wine apps to see how they handle onboarding and flavor preferences.
One competitor uses a mix of art styles
One competitor uses a mix of art styles
HOW MIGHT WE...
We made two personas. One for a more casual wine drinker who is more cost-conscious and one for a wine connoisseur who wants the ideal wine for the moment.
(Personas being worked on so they're landscape, legible, and prettier)
GOALS
With these in mind:
-
How might we get someone’s taste preferences?
-
How might we understand what type of wine the user wants at the moment?
-
How might we present our recommendations and purchase options?
-
How might we remember what wines a user likes?
THOUGHT PROCESS
We wanted this app to get into a wine drinker's mindset when they want a recommendation and one of the difficulties of making wine suggestions is that what a user craves can change depending on mood, budget, who they’re with, food pairings, and other factors.
We want to get the users’ preferences but have it be editable or check in on what they’re craving. We then want to present a few options with the ability to ask for more if requested, so that the user isn’t overwhelmed.
Day 2: Sketches
LIGHTNING DEMOS
While my teammate worked on the style guide, I was working with our other designer on refining onboarding. We based the user-flow on the mockups the client provided.
By putting myself in the user's shoes, I realized by having sign-up come before onboarding originally, it was asking the users to make an account without knowing what they’re getting. So I rearranged the welcome screens in the onboarding flow.
CRAZY 8s
Because the user has multiple routes they can take, we had to map out the decision-tree of the chatbot. This was vital to organize the flow and be a roadmap for the devs. This was my main responsibility.
I mapped out the decision-tree of the chatbot so we could figure out what paths were consistent amongst the different options to reduce redundancy and create a routine.
SOLUTION SKETCH
With the client’s approval, we determined that the MVP for our prototype would take the user through onboarding, test out the profile page, and then be able to go down the path of choosing a wine to pair with a dish, since that would hit every major step in the chatbot decision-tree.
Day 3: Storyboards
MINIMUM VIABLE PRODUCT (MVP)
With the client’s approval, we determined that the MVP for our prototype would take the user through onboarding, test out the profile page, and then be able to go down the path of choosing a wine to pair with a dish, since that would hit every major step in the chatbot decision-tree.
STORYBOARDS
While my teammate worked on the style guide, I was working with our other designer on refining onboarding. We based the user-flow on the mockups the client provided.
By putting myself in the user's shoes, I realized by having sign-up come before onboarding originally, it was asking the users to make an account without knowing what they’re getting. So I rearranged the welcome screens in the onboarding flow.
Day 4: Prototype
HIGH-FIDELITY PROTOTYPES
The client wanted the personality of the product to feel knowledgable in a fun, approachable, unpretentious way. Each member of our UX team made mood boards to start a conversation on what she liked and didn’t like.
Mood board gallery
After a few rounds of notes, the client approved the following colors and look of these icons.
The client provided mockups, which we used to form the wireframes of the app.
Original user flow from Splash page, to Sign-up, to Welcome, to Flavor Profiles
We then started working on a high-fidelity prototype combining the style guide, mock-ups, and user-flow.
Here you can see the evolution of the onboarding. We added a progress bar, as well a forward and back button, and a skip option. We also made the question tone positive instead of negative.
We start with a short welcome overview on initial launch to tell the user the goal of the app.
We kept a consistent look throughout the rest of the app. I had some concern that users would miss the “Get Recommendations” button to start the chatbot.
My primary role was focusing on the chatbot, so I took a lot of care to make the prototype look and behave like a chatbot. I made a screen for every line of text, used smart animate to get the chat bubbles to behave correctly, and added delay transitions to make it feel like it’s thinking.
Day 5: Validate
USABILITY-TESTING
We interviewed five people with a variety of tastes and knowledge about wines. We also wanted to test those less tech-savvy. The user we tested who was that way provided lots of useful insight for making the app more accessible.
TASKS
With our MVP and goals in mind, we had the following tasks for users:
-
You see an app for a wine recommendation app. What are their expectations? Try to create an account. Did it meet your expectations?
-
You are making dinner and want a wine to pair with your spicy vodka sauce. What would you do?
-
You are getting recommendations for wines with a banana taste, but you don’t like bananas. How would you change that?
-
You tried a previously recommended wine and liked it. How would you note that?
RESULTS
Testing was very positive. All the users were able to complete most of the tasks, except for one, which involved favoriting wines. However, since this is with a pre-populated page, this might have contributed to the confusion.
SOLUTIONS
The big issue that everyone had feedback for was having more options built into the cards for wine recommendations. Instead of having a button that would take them to purchasing options, buttons next to the wine make total sense. Users wanted a way to buy it online as well as
in-person with geolocating. We'll need to test if the colors work or if the buttons need labels.
A few screens could be more user-friendly for a novice wine drinker. For example, they might not know what “tannins” are. By having a pop-up that explains certain terms, would help teach users more about wine.
With purchase options changed to buttons. Will need to test if labels are needed.
One other change was color contrast. After testing, we ran everything through WCAG accessibility standards and a few elements failed. We went through and updated the colors to pass.
On the topic of chatbots, our users didn’t have a positive or negative feeling towards the word “chatbot.” Since the main feature is a chatbot, we suggested to the client that they should accept it because all users were surprised it was a chatbot when “Get Recommendations” was clicked. Something like "Start SommChat" might make more sense.
If the users didn’t like chatbots, that would create a negative experience. Because we couldn’t use the name of the product for our case study due to NDA, we leaned into it and rebranded the product to SommChat.
Conclusion
OVERALL
IMPRESSIONS
Overall, this was a great learning experience and I had a lot of fun working on the chatbot and learning more about the thought process behind decision-trees and how to design one.
The client was very responsive and my teammates and I had very complementary skills and a positive attitude to work and help each other. It was also rewarding seeing users understand the majority of what we were trying to do, and they had very useful tips and remarks for future iterations.
DIFFICULTIES & LEARNINGS
One difficulty we had was communicating and pushing for our suggestions more. For example, we brought up that users might not know terms like “tannins” and color contrast issues earlier, but the client was very firm on some design decisions and we were running out of time.
Being able to talk about WCAG standards might have helped with convincing. However, having user-testing reports reaffirm our suspicions helped convince them in the end.
Since we were provided mock-ups, we used that as a starting point as opposed to making them ourselves from scratch. This might have biased us towards certain design decisions and I wonder if we could have had more ideas if we brainstormed at the beginning. If I had to do over again, I would've liked to discuss things more before seeing the mock-ups so we have a fresh perspective.
For more information, check out my About Me, connect with me on LinkedIn, or
contact me at courtneysid@gmail.com
