Problem: How to streamline the creative classes page for users to find the information they are looking for easily and quickly?
About: Seattle ReCreative is a non-profit organization that aims to promote creativity and environmental stewardship through creative education and material reuse.
UX Techniques Used: User survey, Competitive/comparative Analysis, Mind-mapping, Card-sorting, User Personas, Journey Mapping, User Flows, Content Matrix, Wireframing, Prototyping and Usability Testing. 
Key Project Goals:
User Goals: The primary goal was to improve the creative class registration experience. The secondary objective was to make the classes easily findable within the website. 
Business Goals: The primary goal was to increase the organization's funding through these paid classes so that they can keep providing other creative services to the community for free.
My Role: User Experience and initial prototype (Individual Project)
Timeline: 3 weeks, Tools: Sticky notes, Pen, Paper, Cards, Pencil, Adobe Illustrator, Photoshop and InVision
Project Overview
Research: User Feedback (current website experience) - Survey on Experience, Compiling Findings - Competitive Analysis - User Journey
Refine: Learnings from Competitive Analysis - Persona 
Run: Card Sorting and Taxonomies
Refine: User Flows-Content Matrix 
Represent: Wireframes - Sketches - Prototype
Run / Re-Design: Fielding and feedback 
Solution: Outcomes 
Next Steps
Research
User feedback on current website experience
Learnings: 
1. On the homepage, users got confused with the hamburger menu. Two out of the five users didn’t click on it at all. 
2. Most users eventually scrolled down and clicked on their preferred next page. 
3. Users weren’t easily able to understand the various classes offered.
4. Some users didn’t find the content welcoming and couldn’t quickly understand what the organization really did. 
5. The options seemed too broad. Few users found the calendar too prosaic. Maybe okay for an internal audience, not for the general public.
For detailed information see book at the end of the page.
Competitive Analysis / Teardown
To learn from competitors and gather inspiration, I did competitive research to identify features and potential opportunities for Seattle ReCreative’s class offerings. The competitors I looked at were: 
Bainbridge Island Museum of Art , Skillshare, Udemy and Crayon Collective (organizations that are community driven and encourage creative learning)
Learnings from the teardown: the product page or creative classes page needed more structure, consistency and relevance. The redesign needed creating an easy to navigate layout, consistency through the graphical elements and  a personalized experience
User Journey
Refine
Persona (Created from the survey)
After completing the completing the competitive analysis and identifying the personas I went on to create the user journey map. The goal of the user journey was to think about a user’s goal at a macro level. The idea was to think about the user’s relationship with the brand while interacting with the website. 
Run
Card Sorting and Taxonomies
The next step of my process was conducting the card sorting exercise to understand how users perceived the categorization of the provided information. 
Open Card Sorting 
I asked 4 participants to organize the sections that was most logical for them. 
REFINE
User Flows
Once the macro flow was done, the next step was to create user flows for the creative classes / product page. The flow demonstrated how a user would navigate through the website. 
Content Matrix
The goal of this exercise was to identify inward and outward paths a user would take while interacting with the website. The other reason was to analyze the core content required for the course page. 
Search Bar, List of Classes, Class categorization , Class Description, Clear CTAs, Sign Up/Enroll Button, Course Image / thumbnail etc. (see below table)
Represent
Sketches and Wireframes
Based on the card sorting exercise and prior competitive research I began to create homepage and product page sketches. The goal was to quickly re-design webpage sketches. Once the sketches were complete, I created paper-prototype and tested it with 4 participants. The participants voted on the layout that made most sense to them. Based on the votes, I converted the selected sketches to wireframes. 
I designed the wireframes in illustrator. ​​​​​​​
Final Sketch
Inspiration for On-boarding page design for the creative classes page
Post collecting feedback from a few participants on the wireframes I re-designed and finalized the below wireframe
Final Wireframe
Prototype
Finally, I created the website prototype and tested it with users to get further feedback and improve. 
Run
Field Testing and Feedback

- Users found the clear class categorization useful and the CTAs clear. 
- The flow of registering for classes was easy and quick. 
- Users like the Clear information about cost and class details
Solution
Project Outcomes /Achievements
- Provided an organized product (creative class) Page
- Product (creative class) search became easily findable from homepage
- Detailed product (creative class) page will help users identify accurate classes
- Added product (creative class) reviews feature by students to build credibility 
- Streamlined the homepage design by adding organization's core value statement and achievements. 
- Re-structured their offerings clearly to establish strong customer-brand relationship 
Next Steps
- Add additional class recommendation feature on the detailed page
- Simplify class registration and check-out process
- Create an easy to use calendar feature for user to save the class schedule on their personal calendars

You may also like

Back to Top