StrudelMedia Live Site Redesign
Introducing the project
Overview
After holding a client meeting with Strudel Media Live, my UX design team and I ran a 3-week design sprint in which we tried to reconcile our client’s business goals with user needs. Strudel Media Live requested a website redesign, as their goal was to diversify their student body namely by age, location and economic background.
StrudelMedia Live’s main user base mostly consisted of elderly white Americans who are retired. Through the website redesign, our client was hoping to target younger students and international students in order to create an “inter-generational” and global learning environment.
My Role
User Survey
Usability Testing
Affinity mapping
Building personas
Wireframing
Low, mid and high fidelity prototyping
User surveys
User interviews
Usability testing
Software Used
User Research + Information Architecture
Research Findings
After surveying a number of potential new students worldwide, we discovered that majority of our users expressed the following:
- They prioritize visual appeal when exploring a website for photography classes
- They find that the instructor bio is important information to have before signing up for a class
- They prefer the ability to filter for relevant classes
- They would find it useful if there was an image gallery that showcases student
work from respective classes.
Through a Heuristic analysis of Strudel Media Live’s website, we determined that one of their most significant issues was a lack of visual attraction. Additional the website did not clearly cover that was an online school that offers classes and talks which pertain to photography.
Our behavioral analysis revealed that visual design of a website plays a significant role in the advertising and buying process. In a study conducted by Northumbria and Sheffield Universities, we find that among 15 women, 94% of first impressions are design related..
The factor most commonly attributed to the mistrust and even rejection of some sites are that relate to our solution are boring web design, small text, a cold corporate feel, and poor search facilities.
Problem or Opportunity?
How might we…
How can we enhance StrudelMedia Live’s visual design and language to help new and returning students easily find information about the offered classes and events and facilitate registration and boost conversion rates?
User Research + Information Architecture
Identifying the Users
After mapping and analyzing the responses from our user surveys, we concluded that there are two types of users that would interact with Strudel Media Live’s website: a potential student and a current student. Our user journey focuses on the our primary persona, the potential student.
Narrowing our Focus
Considering the feedback from our users, we decided to tackle their key painpoints.
By implementing these design solutions, we aimed to improve the user experience by streamlining the class search process, providing personalized recommendations, and fostering a community of photography enthusiasts. This approach will enhance user satisfaction and help users achieve their goals effectively and efficiently.
Adding a clear CTA
Include a prominent “Enroll” or “Register” button within each class card to allow users to quickly take action and secure their spot. Provide an indication of the availability of seats in the class to create a sense of urgency or scarcity, encouraging prompt registration.
Adding a search bar
Implement a search bar prominently on the website or application’s home page.
Use clear and concise placeholder text within the search bar, such as “Search for classes…”
Include an optional dropdown menu next to the search bar for users to filter classes based on their skill level or other relevant criteria.
Reducing cognitive load
Present class information in a concise and visually appealing format, minimizing the need for excessive scrolling.
Display key details for each class, such as the title, instructor, date, time, location, skill level, and class format.
Include a thumbnail image or a brief description of the class to give users a better understanding of the content.
Implement collapsible sections or expandable cards for more details, such as the syllabus, instructor bio, and reviews, to prevent overwhelming the user with excessive information.
Adding filters
- Include a sidebar or menu with various filters to narrow down the class options.
- Filters can include skill level (beginner, intermediate, advanced), class format (online, in-person), class duration, and location.
- Implement real-time filtering to instantly update the list of classes as the user selects different filters.
- Highlight the selected filters to provide a clear overview of the applied criteria.
Creative Direction
What our clients wanted:
Our clients requested a redesign that was minimalist in style yet very visual.
So we decided to use a tonal range of color, with flat clean lines and no drop
shadows.
We referenced art from Piet Mondrian and Franz Kline which showcases a monochromatic and tonal look and adds an emphasis on line and form. We also wanted to add some pops of color which were in line with Strudel Media Live’s color palette namely, purple, yellow and red.
The challenge was to be vibrant while also being mostly black and white.
Wireframing
Initial Wireframes
Based on our user research, we tried to design around our users’ main priority
needs which were:
1. An easy registration process by the use of filter options to find classes
2. Clear indications of skill-levels for each course (not found in the original site)
3. Showcase more visual content, namely student work, which was not on the
original website.
Low-Mid fidelity Wireframing
Lo-Mid Phase
For our low-fidelity prototypes, we wanted to keep the carousel from the original website while also possibly experimenting with a “z-pattern” layout in which we alternate text and images throughout the homepage to make the site more visually engaging.Additionally, we wanted to display a clickable calendar to make it easier to visualize events and classes and make information more scannable.
Validation
Checking in with Users
We had to perform another round of usability testing before moving into the hi-fidelity phase of prototyping to ensure an intuitive and optimized design. Users were asked to “register” for a course of their choice.
Filtering for classes: Users were successfully able to filter for classes based on their skill level
Registration: Users were able to add classes to their cart and checkout.
The Retro
Key Takeaways
- Asking stakeholders the right questions helped elucidate much of our process.
- Usability testing was vital to solidifying our design decisions.