Marine Memorial Club:
Responsive Web Redesign
Role: UX Designer, project manager
Duration: 2 weeks
Methods: In-depth interview, heuristic review, synthesis, usability testing
Deliverables: user research plan, personas, user flow, wireframes for both mobile and desktop, prototype
Context And Challenge
The Marines’ Memorial Association is a non-profit organization served as a private member club for military veterans and actively serving military to get benefits of reciprocal clubs and hotel discounts. The membership is primarily comprised of an older generation of veterans and they need to attract younger veterans in order to continue serving the veteran community for the foreseeable future. Therefore, they approved our UX design team to redesign the responsive webpage of the signup funnel.
To begin the discovery phase of the redesign, we did competitive analysis on two competitors and heuristic review of their current sign-up funnel. We also did research on standard design principles for membership signup form. At the same time, we conducted user research through in-depth interviews with current club members and other potential members.
• How did you sign up for MMC?
• Describe the experience when you were signing up for something on your mobile device. What do you like or dislike about it?
Sample Interview Questions
• Current club members
• Perspective Users:
Veteran from the older generation (65+)
Veteran from the younger generation (35 - 65)
After collecting all the feedback from interviews and our research about standard principles of signup form, we used affinity diagram that groups the input by similarity to create patterns and generate design ideas. And then we created a user flow to show how a user would go through several steps to complete the signup.
• a intuitive signup process for both younger and older generation
• as few steps as possible for them to put their personal information and billing information
• expect the users to acknowledge that they need to provide documents before signing up
• make sure the users know what they are signing up for because there are no benefits on the current signup page
From there, we figured out users' major pain points and motivations when they are looking for veteran membership club and even singing up for it. We created two personas from our target group to shows these information and think from their perspectives to work on our design.
Based on the insights from research, we came up with some design ideas and put it into wireframes. We started the wireframe from mobile (iPhone SE) and then created an adaptive desktop wireframe.
Mobile: Signup Form
Mobile: Log in Page and Confirmation Page
Adaptive Desktop Wireframe
We add a side bar to highlight family benefits and some client testimonials in the desktop screen.
• We add a side bar to display the requirement of document and explanation of it at front.
• We change the uploading methods from "take a picture" into "drag files here" and "upload from Dropbox and Google Drive".
After we finished the mobile prototype, I conducted remote usability testing and in-person usability testing. I test the mobile prototype on both the old veterans who are not tech-savvy and younger generations.
Sample Usability Testing Tasks
• Time that they spend on each step
• Total time that they finish the signup
• Success on specific tasks
• Can you explain what you see on this page (login) and show me the process of completing the fields.
• How would you provide document required?
Usability testing takeaways:
• The confirmation page contains too much text, so users might neglect some information.
• Before the usability testing, we had the second step as “Upload your file” and people found the word “File” confusing. Post our testing, we change it to “Upload your military document”.
• Taking a clear picture of a letter size page (for document like DD214) is hard, at least harder than scanning. Therefore, the client should do more research on the optimal way of file upload.
• Users expect to have a personal profile or dashboard after they sign up for the membership, to save time for registering events or book hotels later.
After our deliverable, our client presented the wireframe and prototype to the design team and is currently working on the redesign based on that. The project overall reached our goal of a user-centered responsive design for both older and younger generation of users. Usability testing plays an important part in the whole process that provides us with a lot of feedback, which improved the functionality of the signup form in general and guided the client for future redesign of the whole site.
"The redesign was well thought out and identified customer pain points that my team hadn't even noticed. Overall, we're very pleased with the products and would happily recommend the team to any other business looking for UX Design assistance. "
- Aaron Saari, Growth Marketer of MMC