Site redesign based on user research
Context
In 2018, I'd worked on improving CERTI's Foundation site from january to april 2018, and the projects below are a sample of my work while researching pain points and usability qualities at the time. Not everything were shipped but the core ideas represent the desire to reach to users core needs. The scope included site mapping, desk research and user research, prototyping and a basic component system.
Timeline
- January - April 2018
- 12 weeks
My role
- UX/UI Designer
Contribution
- User Research
- UX Design
- UI Design
- Information architecture
Outcome
- New navigation menu, search page and rearranged sections.
- New visual redesign.
Problems I encountered
- The site met numerous demands from different clients and therefore had a confusing identity
- Difficulty in recruiting users for the research stage
- Short deadline given the size of the project
Goals I focused on
- Identifying the persona's key necessities we wish to meet
- Maintaining brand identity so users could easily recognize the website despite any changes implemented
- Facilitate access to frequently used pages and enhance comprehension of displayed informations
Before
After
Courses
Grid with highlights
Using a modular visual, we made possible for the user to easily scan the page. The main motive was to encourage students to apply or learn more about the courses provided by CERTI.
Page
Interaction
Subscribe
Fast subscription
Through a mouseover interaction, we addressed one of the main reasons students visited the website, consequently enhancing class demand and further increasing available spots in classes.
Sitemap
To better visualize the necessary screens, I crafted a sitemap delineating the website's primary architecture. This also facilitated on acting assertively giving the short timeframe the project required.
The Process
I utilized the Double Diamond methodology, concentrating on the Discover, Define, and Develop stages. Given the deadline, the Deliver stage was consequently prioritized as the subsequent step. For this stage, it was determined to additionally conduct a qualitative semi-structured usability test to validate the delivery outcome.
Discover & Define
User research
To delve into users' site-related frustrations, we employed the SUS (System Usability Scale) format, conducting interviews with 20 participants. Each interview consisted of 6 questions, with respondents rating their emotions on a scale featuring 7 negative and 7 positive options.
The objectives were:
- Assessing users' ability to complete the "search" and "subscribe to course" tasks
- How they feel throughout the navigation experience
- How was the perceived ease-of-use
Insights
- 🖱️ People were unsatisfied by the number of clicks they need to do in order to achieve their goals and see the main information in the site
- 🖼️ The users reported lack of visual information - images, videos and a color system
- 👁️🗨️ It meets none of the usability heuristics - e.g. Prevention of error; Visibility of System Status.
Output
Collaborating with another UX researcher, we aggregated user responses into a ratio format to comprehend pain points along the journey, which subsequently informed actionable deliverables on the interface.
The final resulted actions were:
- Establish a color scheme for each section and image guidelines to improve visual information
- Improve the flow for subscribing to a course
- Align the site with the usability heuristics
Develop
Documentation
To provide a scalable maintenance, I documented all site guidelines into a brandbook format to easily pass on all changes and predicted scenarios of data growth in the website.
Outcomes
Navigate
Color scheme for each section
I incorporated a current section indicator into the menu using our branding colors. This enhancement aimed to improve the visibility of the user's current status.
Search
Search engine
A more efficient method of finding information was introduced with the addition of a search bar and an interaction feature that displays results more effectively. The objective was to encourage users to explore information on the website before exiting.
Courses
New courses page
By incorporating preview cards with accompanying images, we provided students with a preview of the main subject of each course, making it easier for them to consume information about ongoing courses. This approach potentially aligns with our goal of increasing subscriptions.
Subscribe
Subscription survey
The inclusion of an accessible application survey with a shorter flow was implemented, potentially leading to an increase in subscription numbers. In the updated version, we estimated that users would need only 2 clicks to reach the survey, whereas previously, it required a total of 4 clicks.
Credits
- Maiara Camillo (UX Research Master)
- Larissa Beiró (UX/UI Designer)