Capture
End-to-end mobile app
Background
IPhone users love to take photos as a way of preserving their memories, but almost everyone believes they have room to improve. The Capture app will educate users on how to take better photos via their phone's camera. It will be a fun way to spend a small amount of time daily (or based on the users time preferences) to learn tidbits of information that put together will improve t’s photos.
Problem
Everyone with a smart phone is an amateur photographer, using their phones to preserve memories. Not everyone out there has the skills to take good (or even great) photos
Solution
Create an ed-tech mobile app focused on teaching users photography in small chunks of time. The app will have a gaming aspect to it to increase user retention and enjoyment.
My Role
End-to-end UI & UX Designer
Timeline
80 Hours
Tools
Figma, Google Suite, Canva
Empathize
Bookstore Breakdown
Key Takeaways
The toughest part about the competitive analysis for Capture was finding other photography education apps to analyze. I was able to focus my analysis on four different platforms that were designed to educate users on photography. PhotogMaster app was the closest option to a photography app but was extremely outdated. Udemy is a wide skills learning site, and there a few options to focus on for photography.
There is a wide lack of ed-tech apps for photography
There are not currently any apps teaching photography that are doing well
Photography apps do exist, some are outdated and others are new with limited features
Currently, available photography apps on the app store have poor UI features making them hard to use
There are currently many options for courses you can take on sites such as Udemy, these are a one-time purchase
There is a gap in the market for a photography learning app
Survey
Key Takeaways
16 participants
Majority aged 25-34
About 2/3 of the survey participants were women (12)
The majority of the people who took the survey lived in California
All survey participants are iPhone users
All users use their iPhones to take photos with 3 participants using a DSLR camera and 2 using a film camera
What do you most often take photos of?
How much time would you commit a week to learning to take better photos?
Where do you most often take photos using your phone?visit a bookstore website.
The majority of the survey participants are using iPhones as their mobile devices, therefore I can move forward with an IOS-based app. Sll users believe their phone photography can be improved and are willing to commit time every week to doing so. This confrims the assumption that there is room in the ed tech industry for an iPhone Photography app. Most users prefer to take photos of their pets/people as well as in nature. The app will incoorporate these genres of photography and should be featured in the MVP. The current industry is largely subscription based, and the developing app will likely follow suit.
Affinity Map
5 participants
Majority aged 30-65
All of the interviewees were women
Conducted two interviews in person and three over zoom
Key Takeaways
The biggest takeaway from the affinity map was seeing the important over lap between why
people take photos and what they take photos of. Every single participant said that the main
reason they take photos is to preserve a memory, or to have one, which social media playing
a small role in the driving force of iPhone photography. This will allow me to focus the project
on improving photography for the user alone without a large social media tie in. Another key
takeaway is that everyone believes they have room to improve and is willing to do so. I also
determined the main areas of interest, as well as some that can be featured but likely not
active. I have also determined that around half of the users likely use photography for personal
business purposes, this can be another added category/feature.
Define
Storyboard
One of the biggest challenges I have faced while designing this application is the lack of of comparative apps. I decided to do a storyboard to visualize when users would be using this app. I wanted to be to empathize with the experiences people would have that land them on the app. This helped me to more accurately determine what the feel of the app should be.
Feature Roadmap
This was crucial in the design process for this project. A bookstore website can be a huge undertaking, as a digital market alone can be wide. I used the roadmap to ensure the minimum viable product to showcase necessary features. As mentioned above a search feature and a filter feature must be prioritized.
Sitemap
I designed the sitemap to have a broad main menu, I wanted the user to be able to find what they are looking for in the most minimal amount of steps possible. I utilized my secondary research to create a navigation that was in line with current business practices, as well as fresh and intuitive.
User Flows
I created two User Flows, I wanted to emphasize the search feature and the filters feature in my flows as they were two pivotal features of the site redesign. The first flow of searching a specific book is rather straightforward but does allow for error, this is crucial as errors are made regularly. The second flow is a bit more complicated, with a lot of alternate paths. I wanted to emphasize how the site design would work to allow for alternate paths.
User goes on website to find a specific book for book club
User goes on website to browse for a book with filters
Task Flows
User wants to search a specific book
I created three Task Flows to highlight the search and filter features even further. I worked to show the ease with which these features can be utilized. As the most important features on the redesign they need to be extremely accessible.
User wants to look at books from a specific subcategory
User wants to browse a subcategory with a filter on
Design & Ideate
It’s not that Sketchy
I tried to sketch out as many ideas as I could in order to see what was working and what wasn’t. I wanted to move away from the current site but keep the bones. At this point I was thinking about as many screens as possible, later I was able to narrow it down to the most important for the prototype. If I had more time I would love to develop the timeline style “About” page.
MidFi not SciFi
To take my work from paper to digital I put my sketches into Figma and worked directly off there. I focused on grids, spacing, and layouts. I worked on the overall look of the filters menu as this would be crucial to the final product. At this point, I was also highlighting the two separate views that the final design would have, grid and detailed. This would be to allow shoppers to choose between seeing more books per page or seeing more info per book.
UI Kit and Branding
My interviews revealed just how important the “vibe” of a bookstore is to users, this left me with a challenge to create branding that presents a good vibe digitally before users ever stepped foot in the store. I wanted to stick with their classic red as it immediately demands the user’s attention, drawing people in at first glance. I used a lot of white and grey to tamp down the excitement. I created a photo treatment to be applied across the board to bring cohesion to the site. I went with a mix of Serif and Sans Serif for my typography to emphasize the rich history of classic literature as well as the ever-changing market of contemporary literature.
Components
During this project components were both my best friend and my greatest adversary. They allowed me to streamline changes to entire pages with a few short clicks, but I also saw how pesky it can make things down the line.
High Fidelity
It’s time to put it all together! Using the branding guide I created I was able to create a cohesive look across desktop and mobile. The photo treatment tied the entire site into one. The filter feature was a bit tricky as it needed to be a pop-out on mobile but could exist on the side of the desktop, as mentioned above this was one of the must-have features on the website so it was a priority while designing.
Prototype
Creating two Flows
I created two flows based directly on the user flows I developed earlier in the process. One would be a user searching for a specific book, and the other would be browsing based on chosen filters.
As I started to create the flows I realized I was missing key screens needed for testing
A Key Screen
It became clear that I needed to create a product detail page to move forward with my prototype. I started by going back to the drawing board and then developed a new screen using the same process as before. This allowed for the full user flow to be completed.
Test & Iterate
Moderated Usability Testing
Key Takeaways
I conducted four, ages 25 - 62, usability tests remotely through Zoom. This allowed me to have the user share their screen and verbally let me know what they were doing. I was able to locate the pain points in real-time and ask important questions.
I noted early on that my first two participants had a hard time locating the “politics” category while filtering by genre. I decided to update this immediately to see if the next two tests went smoother.
“Politics” needed to be its own sub-category within the filter menu
The search feature is utilized well
“Add to Cart” is used both on the PDP page and the results page
Having 2 “Add to Cart” buttons on the PDP was a bit confusing
Users liked that you could favorite books
Key Changes
Pick up vs. ship changed to a radio button
Checkout page updated to match the overall design better
Politics as its own category (above)
Next Steps
Final Thoughts
The next step in the process would be to present the updated website to the business and then continue to develop necessary screens. One of the biggest changes I made was to incorporate an online book marketplace directly into their site, this would be a big undertaking as a company and would create new tasks to continue to work on in the future.
I was happy with the MVP for this project, I think I captured the vibe of Beers Books. The mobile and desktop screens convert excellently, demonstrating my ability to design using a mobile first approach. I was able to identify early on what features would be most important and demonstrate them in my prototypes.