ABOUT
Corwin Advance Online focuses on online learning designed to support teacher license renewal and professional growth with research-based strategies to use in classroom today. It offers several different formats of online courses for direct individual purchase (B2C) or group purchase (B2B).
Brief: The client hired us to redesign and improve user signup and payment process (for their courses) and recommend ways to ensure users have accurate access to courses that cater to their specific state licenses/certification.
ROLE & DURATION
I worked with the Product Designer, to assist with User Experience, Interface Design and exporting client’s website on the Thought Industries platform. We worked together to establish how users navigate through the site using the heuristic evaluation guidelines, identify pain points, redefine the structure of their website, necessary pages, site navigation, and organization of site content.
Duration: Five weeks
TOOLS & METHOD
- Usability Evaluation,
- Competitor research
- User Personas
- Content Hierarchy
- Sitemap
- Task flow,
- Wireframes, Mockups
- visual moodboards (icons, colors, typography, image style, buttons, links, content)
Tools: Miro, Sketch, InVision, Figma, Thought Industries
Note: Detailed report is protected under NDA. Sharing parts that are permissible.
Stage 1 – Research
The problem
How can users have a great experience in accessing and browsing courses that cater to their needs?
How can we make the user signup and payment process easy?
1.1 Usability Evaluation
After meeting with the client and understanding their requirements, our first step was to evaluate the website’s existing navigation. We did a heuristic evaluation of the user flow for first time users and identified pain points and areas of improvements.
*Detailed report with key findings, protected under NDA.
Key Findings
- There were many ways to reach the website, most of those ways were unknown to users; so searching for the link was hard
- Most CTAs took users out of their website to an external link, and without having a way to redirect back them to the site. This prevented users from re-visiting the site and loss of potential buyers once they left the site.
- The payment and checkout process was redundant and needed redesigning.
- Information about the courses needed to be restructured and consolidated.
1.2 Competitor Analysis
The client provided us with a list of their competitors, their strengths and and features that they liked in those websites and wanted us to focus on for incorporating it into our design.
- Dedicated to the courses which allows for dedicated FAQs, detailed search/browse/filter functionality, and general ease of use and consistent messaging
- Simple purchase process. The purchase processes are robust (accepts various discount codes, allows for choice between university providers) but also easy to use.
- Promotions and rotating content. Each website has new promotions, banner content, and featured courses that are regularly updated.
Stage 2 – Define
After running through the user flow, we brainstormed and listed the key persona, motivations, core needs of users and pain points.
2.1 Synthesizing data
2.2 User Personas
We then created user personas and identified three types of users: an individual learner, a group learner and a decision maker.
2.3 Content Hierarchy
The aim of creating this was to highlight business objectives, values of courses and align with user motives.
2.4 Sitemap
This was created to redesign the layout of the website so users can reach their end goals easily.
2.5 Task flow
This is the task flow for a first time visitor purchasing a course on their website. We made changes to this after getting feedback from the client.
Stage 3 & 4 – Ideate & prototype
Since we were time bound, I quickly made paper sketches, followed by mid-fidelity wireframes to get a clear direction of where we’re heading. Once the client approved the direction, we proceeded to creating mockups.
Paper sketches
Wireframes
UI – Branding guidelines
Following guidelines of accessible design, three moodboards were presented to the client to select from. The colors were to represent positivity and empowerment. The typeface was in line with company’s branding guidelines.
Stage 5 – Next steps
We ended the scope of work after the content was provided to the developer to upload on Thought industries. Next steps for the client would be to have this live and running.
Reflection
I loved working on this project. Education is important and seeing companies wanting to make sure they can empower their users in the right way, is rewarding. We had tight timelines and getting all of this done in a month was amazing and I learned a lot. I also learned the difference in working styles when I’m working on a project solo versus collaborating with a team and managing expectations. Definitely a great experience!