My Party Album: Industry Design Project
My Party Album is a secure app for sharing life's special moments with friends and family. Users can create private groups to upload and share photos and videos, ensuring that only their closest contacts have access to these precious memories. The company's CEO and COO asked me and three other designers to help redesign their website.
Key Skills
Ideation, Competitive Analysis, Personas, User Interviews, Sketching, Wireframing, Visual Design, Prototyping, User Testing, High-Fidelity Mockup
Tools
Figma
Miro
Duration
4 weeks
Problem Statement & Goal
The client's website was not effectively communicating their product to visitors. This was a major challenge, as the website was the primary way that the client reached potential customers.
To address this challenge, we set the following goals for redesigning the website:
Conducting background research to identify issues with the existing website
Researching what a younger target audience wants to see on a newly designed website
Creating a screen-by-screen prototype that can be used across all major browsers
Focusing on both B2C and B2B customers
Design Constraints
Alongside their goals, the management team let us know that there were a few design constraints. When building the prototype, we had to make sure that:
The desktop version must have the main elements and components created within a 900-pixel boundary
The desktop version and website version must share elements that can be used on both desktop and mobile platforms
Discovery
During our discovery phase, our team conducted research to understand the target audience, compare the website to competitors, and identify elements that need to be redesigned for a better user experience.
Glimpse of My Party Album’s User-base
By reviewing MPA’s user personas, we were able to gain a clear understanding of who their users were and what their needs were. Our team primarily focused on the personas that were on the younger side, as that was the demographic that MPA wanted to target.
Understanding the Target Audience
MPA's management team expressed a desire to shift their target audience towards younger users, specifically those between the ages of 18 and 35. To better understand this demographic, our team conducted interviews to gather insights on what younger users value and expect from a photo-sharing app.
Most interviewees under the age of 30 shared similar opinions regarding My Party Album:
There are similar free apps available on the market.
They wouldn't pay more than $5/month.
They would mainly use the app to share school sporting events, trips with friends, family gatherings/vacations, and school work/group projects with close friends and family.
Competitive Analysis
We examined the websites of Dropbox, Family Album, and Memento to see how they organized their content. We wanted to gain a better understanding of how other companies in the market were presenting their photo-sharing services.
The competitors we looked into - Dropbox, Family Album, and Memento - have slightly different approaches, but all accomplish in presenting the following elements:
Product features: Many competitors have a simple and easy-to-read section for their product's features. This makes it easy for visitors to quickly understand what the product does and its unique selling points.
Pricing: Some competitors have pages that present their pricing in an easy-to-understand way. This includes breaking down the pricing into different levels of subscriptions, as well as providing clear information about any hidden fees or charges. MPA only has two variants of its product, which may make pricing presentation challenging.
Engagement: The competitors we looked at all aim to engage the user with their product through positive facts or visual mockups. This creates a connection with the visitor and encourages them to learn more about the product.
Hand-Sketch
Heuristics Evaluation
As the designated designer for the heuristics evaluation, I thoroughly checked every link and flow of My Party Album’s website to ensure its usability. I identified and labeled each problem on a scale from 0 to 4, with 0 being non-threatening and 4 being a severe usability problem.
Through this process, I discovered several significant issues that hindered the website's usability.
Research Synthesis
We presented our research findings to the clients, highlighting the usability problems and user preferences. We emphasized that these insights are crucial for the website redesign, especially to attract a younger audience. The clients were pleased with our research and approved our ideas for future prototyping iterations.
Designing Low Fidelity Mockups
During this early design phase, our team worked on creating a low fidelity mockup with function Figma prototyping to help the clients visually conceptualize how the website would function.
Sketching Our Ideas
We based our low-fidelity mockups on the current website, but with some changes based on our findings. We each created our own mockups, either by sketching or using Figma. We then collaborated to share our ideas and finalize the design.
Early Iterations
Bringing Our Ideas Together
Each of our sketches had its pros and cons and we decided to come together in a meeting to discuss which features should be incorporated into the complete low fidelity prototype. After careful consideration, this is what we created:
We created a low-fidelity prototype that incorporates many of our research findings and interviewee suggestions.
It includes a redesigned header and footer, a revamped home page with competitive comparisons, a simplified learn more page, a clearer pricing page, and a less cluttered login/sign up page.
Designing High Fidelity Prototypes
After creating the low fidelity prototype, we conducted the prototype with the clients to make sure this is something that they envisioned for the future of their website. Once we received their input, we decided to take what we heard and incorporate them into our final design.
Insights from Low Fidelity Mockup
After presenting our low-fidelity prototype, the management team had the following feedback:
The header/footer is clear and concise.
The home page and about us page are well designed, and the clients would like to see the colored versions.
The clients want to see the subpages, such as the wedding page, which is crucial for their targeted clients.
The pricing page needs improvement.
The login/sign up page is good, and the removal of certain sections is a good choice.
Creating the High Fidelity Prototype
We integrated both our clients' feedback and the insights gathered from user interviews and personas into the creation of our high fidelity prototype.
Home Page that Showcases More
Our design for the home page aims to answer the question, "Why should I use this app?" We included:
Interactive icons that explain the unique features of the app
A comparison chart between My Party Album and its competitors/similar apps
A features list of both the Party and the Mixer plans that users can hover over to learn more about
An Easy-to-Understand Home Page
Our final design incorporates the research findings as well as feedback from interviewees. We made sure to include:
Clear and understandable buttons with various states (e.g. click, hover)
Updated photo layouts to showcase types of photos shared on the platform
Easy-to-locate call-to-action (CTA) button labeled "Discover Plans" directs visitors to product plans page
A More Concise and Organized Pricing Page
For the pricing page, we focused on making it less cluttered and more understandable:
Clear and easy-to-read side-by-side comparison of the two different plans
Hover "?" icons that provide more details about what users are looking at
Explanations on what certain things are and how the prices are calculated to help users understand the pricing.
Updated Sub-pages
We updated the Learn More sub-pages to be more organized and concise by:
Shortening the sections and using smaller photos
Providing a detailed explanation on how My Party Album can work for certain situations (e.g. weddings, everyday use, etc.)
Using photos without the feeling of cluttered space
Providing easy instructions on how to get started and a button to guide users to learn more about pricing
Detailed and Concise Support Page
We made contacting or finding answers easy for users on the support page
Contact form asks for simple information to get started
FAQ section is organized by types of questions and color-coded for easy access
Search bar included to find specific questions using keywords
Simplified Login and Sign Up
We simplified the login and sign up process by removing unnecessary information such as time zone, age, and confirmation, making the process shorter and easier.
Login and sign up pages are now specific to Individuals, Event Planners, and Organizations
Forget Password flow requires an email token for security purposes
Icons are used to visually show what is required when creating a password
Final Design
Testing Insight
We conducted some testing after creating the high fidelity prototype to make sure the prototype was working properly and that potential users would be able to navigate the website as intended.
Who and Why?
To ensure the functionality of the high-fidelity prototype and assess user experience, we conducted testing with individuals between the ages of 18-35 who have used photo sharing apps and are familiar with mobile apps.
Our goal was to determine the navigability of the prototype, the coherence of the flows, and users' ability to resolve issues previously reported by personas, interviewees, and clients.
User Testing
Participants were asked to complete the following tasks during the testing:
Taking a Look at the Home Page
Learning More about My Party Album
Understanding the Pricing
Sealing the Deal
Finding Additional Help
Testing Results
The Good
Competitor chart is easy to read and helpful
Login and Sign Up flows were short and concise
Download buttons for iOS and Android platforms are helpful
The Bad
The website doesn't visually explain the app's purpose upon entering
Unique features are not easily understandable
Pricing page is confusing even after explanations
Some Learn More sub-pages are text dense
Conclusion
Speaking With Our Clients
After the high-fidelity prototype testing session, we provided our clients with a report summarizing the results, feedback, and our analysis. Our clients were satisfied with the product and agreed that the negative feedback could be used to improve the user experience for future versions of the website.
Our Client’s Goals?
The main issue was that visitors had trouble understanding the product through the previous website. We tackled this problem by creating a clear and concise webpage explaining the product and its potential benefits.
We did this by creating a clear webpage, doing the secondary research, interviewing users, prototyping, and iterating on what we could.
Additionally, we focused on catering to both B2C and B2B customers by creating detailed sub-pages and a Collegiate Program page specifically for the B2B audience.
What Could We Do Next?
With more time, I would create a new redesign based on user feedback and conduct A/B testing to see which design provides a better user experience. I would also talk to the development team about the design constraints and how to make the website more mobile-friendly.
Learning Outcomes
It is crucial to delegate work in a group setting, especially if there is no designated leader
Initially, our team faced difficulty delegating tasks without a designated leader. This resulted in an uneven distribution of work and an uncomfortable atmosphere. However, we recognized the issue and had an open conversation to understand each other's perspectives.
By working together and finding a solution that made everyone happy with their tasks, we successfully completed the project. This experience taught us the value of teamwork and communication.
Communication is key when working with a team and with clients
Effective communication was vital to our project's success. We faced a major obstacle when the clients requested a new mobile view iteration of the website as our deadline approached. Despite our initial agreement, it was unfeasible given our tight schedule and extensive workload. I suggested an alternative - creating a sample frame for the home page - and explained our limitations to the clients. They were understanding, and we reached an agreeable resolution.
This experience reminded us of the importance of honest communication in project management and clarifying expectations upfront.
Testimonial
Working with My Party Album was an amazing experience, and I am grateful that the clients feel the same way about me and my design team. Please take a moment to read what the founders have to say about our work!