
Super purposes responsive website design case study
Let’s learn about the company & project
Super purposes is a (online)virtual career course and career coaching services up-and-coming company. Super purposes understand job seekers requirements and problems in the large competitive world, Super purposes aims for the potential clients who are looking for a purpose filled career in their lives. Super purposes help their potential clients by providing personalized career coaching, articles, blog posts, podcasts through their online company website for the job seekers so they can register and learn from the courses to successfully land their purpose filled career. This is an on-going company project.

What differently I have done at the company as a Senior UX Designer:
Introduced lean UX design methods to come up with the possible hypothesis on the business, customer and the company website.
We did follow the user centered design methods to conduct qualitative user research and Usability studies with the existing website to identify user problems with the website. Paralleley started working on market research and the competitor analysis to understand company weakness and strengths.
Combine existing website research, business research, customer research to come up with a unique and user friendly responsive website for the company.
Created project plan with other co-Lead UX designer, senior designer, stakeholder to execute design goals within the timelines and also hire UX design teammates to assign the projects and guide them to achieve the goals. Worked on the empathy mapping, customer journey mapping, user personas to identify the user problems with the products. Giving important value to the company’s advertisement projects, collaborated with the marketing team, graphic design, communication, web developers, stakeholders to work on the sweep sticks project.
Lead the design system, competitive market research and pricing research to come up with the weakness and strengths of the market and the company. Conducted UX design workshops on the course design to come up with various solutions and make valuable decisions on the designs. Introduced design feature research into the project to understand the updated designs trends regarding the visual appearance of the websites.
Conducted research on both UI design components and interaction of the UI elements to create more user friendly interactions throughout the website.Introduced extended color palette, typography, grid system while designing the mockups, Designed UI components for the websites, Suggested icons for the website and the other products, by adding these valuable visual components in to design systems to improve the existing design system if the company to bring visual consistency among the company websites and the company products.
Established the extended version of user friendly navigation by creating the sitemap and user flows for the company website and the products.
Created low-fidelity mockups for the company website and products to identify early stages of the user problems with the products so we can improve the low-fidelity and work on the high-fidelity mockups.
Follow up with the web development team to develop mockups as per the designs. If any conflict occurs while developing the mockups we help them with the multiple suggestions on the designs so they can easily develop the finalized mockups.
List of tools that we used to work on this project:
Google Suite - Project documentation, survey, analytics, project presentation.
Figma: Low fidelity & high fidelity mockups, prototypes,
Miro: User flow, Affinity mapping, Sitemap, empathy mapping, customer journey.
Clickup: project management tool,
Skype: Collaboration, video communication.
Problem Statement & Desired Solution
Problem:
1. Super Purpose's company's existing website doesn’t feel professional and trustworthy to their customers.
2. Also the website doesn't look like what it is supposed to be.
3. Existing website looks like comic imagery, funny with outdated content along with that the website is not compatible with all the devices.
Solution : That’s why the website needs to be redesigned in a responsive version so customers can access with all the devices. Also bring the new and updated look with a variety of features so the website feels professional and trustworthy to their customers.
Old website images
Qualitative and Quantitative Research
Super purposes is a start-up environment company. Through the website they are selling different career coaching services and online career courses to their customers.
To understand the customer expectations with the company and latest requirements around the job market. We started conducting user interviews with 3 potential customers(Job seekers) and user surveys (over 100 potential customers) on the customer requirements on the career coaching services and the online career courses.
Summary of user research analysis insights form job seekers:
Due to the highly competitive job market, 45% job seekers are experiencing very difficulty landing their jobs.
Even though they have a high level of core skills on the field, they are still struggling to land a job.
On the internet there are a number of career coaching services with a variety of career coaching services. Overwhelmed with finding the potential service to learn and prepare for the job.
Every career coaching company charges very high pricing for their services. So most of the job seekers can not afford it. Group coaching should cost each individual 30% of one-on-one coaching rates.
For most new coaches in most industries, this price usually comes to around $1,500 for a 3-month package.
The career coaching services build trust worthy connections with their customers so the number of job seekers can buy the course. When the customer looks at the super purpose website the website doesn’t feel professional, so the information regarding the website looks funny and comic.
70% of the customers did not understand about the super purposes and their services.
Most of the job seekers are looking for a purpose filled career rather than the dream job.
Most of the customers are experiencing difficulty accessing their course form the third party (Kartra) tool.
Customers are unable to face the rejections and overcome them. They need motivation, support and proper guidance while customers are looking for the jobs.
Most of the customers have no clear idea on the importance of the linkedIn profile, resume, applying for the jobs online and stand out from the crowd. Since customers are looking for the career coaching course and services help them stand out among the crowd and land a purpose filled career.
Super purposes creating the customized online courses for the variety of job seekers (Remote job seekers, Mill spouse job seekers, Career seekers, Recent college grades, Transgenders and non conforming career seeker course). There is no course for the job seekers who are changing their careers.
In the job market every year 49% of the job seekers are changing their career path. So we are losing the target audience who are changing their career.
Super purpose website Usability studies & UI Audit
We got the important information from the user research with the potential customers. Now, we have to understand how the potential customers are facing problems with the existing website. So we are conducting usability studies and website’s UI Audit with the 3 potential customers with super purposes company website.
Here is the list of customer problems with the existing website:
Lack of internal consistency (some pages have logo, some pages don’t)
Fail to recall where to find the video (place too much cognitive load on the customer), Confusion among language (content writing is not as intuitive).
A mismatch between the system and the real world.
Answer all payments questions/concerns so customers can run into less or no issues and wouldn’t rely on contacting SP constantly or directly.
No potential clients' success stories on the website.
The company website is only limited to the Laptop and personal computer users. So the website can not be compatible with the other devices so the company is losing their customers with various device users.
The design system of the company looks very limited, not conveying the value of the company.
The content of the website looks outdated, So the number of annual visitors to the website is only 30%.
The pricing for the courses and the services are not updated as per the market. Since the customer is getting confused about buying the courses. No proper information regarding the course in the company website since it’s very hard to attract the customers from the market to grow the business. Should implement payment/refund policies.
Lack of clear system status: Customer was unsure how to go back to the homepage. Also the customer has the problem of lack of user freedom and control, Redundancy (violating the aesthetic and minimalist design of the price plan), No login.
Expected feature did not perform its job, Back to top button was thought to be present when this function is absent from the site.
Expect the wrong thing as the information provided is no longer valid. (except the webinar is an event that will take place March 6, did not notice users can watch the replay in the first place).
There is no information related to company podcasts and webinars on the website.
The imagery looks funny and comic. So we have to come up with the professional imagery for the website.
Kartra software tool has very minimalist options for the customer on tracking the course progress and access to the course as well as there are very minimalist options on the customer profile page.
No such accelerators that force users to explore the website individually that can be time consuming.
Detailing on how to access (after someone enrolls) in a course.
Offer technical troubleshooting if users run into technical issues on their course and the SP site.
Customer Persona
Competitor analysis and Market Research for website and pricing
Customer Journey mapping & User flows for the website

Design system iterations:
Initial round of design system iterations
Final Design system iterations:
Visual Design iterations:
First step of iterations: (Wireframing)
Initially we came up with the concept of the super purposes website in wire framing to understand the concept and initial look of the website.
Second round of iteration we presented the illustrations and initials thoughts of the mockups. Each mockup has a variety of out comes and ideas,
1. Mockup represents illustrations,
2. Combination of illustrations and images and icons and texts.
3. More improved version of the mockups.
Second Iterations
