Responsive Website for Google UX Design Challenge

A smartphone and laptop display designs for responsive website for writing and storing academic documents.

Responsive Design Challenge

Challenge: Create a responsive website design. Challenge was prompted by the Google User Experience (UX) Certification course.

Problem: Students and teachers are losing academic documents and paper notebooks. Also, students preparing for higher education are struggling to write notes that are based on critical thinking of the material (not copying) due to a lack of tools and guidance.

Solution: Growing Minds Notebook is a web-based digital notebook that allows students and teachers to create, store, edit, and improve their academic documents with ease.

Design Process

My role was UX designer and researcher for this design project. The project timeline was October 2023 - October 2024.

Responsibilities:

Creating personas

Making user journey maps
Wireframing
Prototyping
Verifying design is accessible
Conducting user testing
Iterating on design
Designing an overall pleasant, useful, and consistent experience for all screen sizes

Research

2 main groups of people would likely be using this website.

Meeting with the user groups to learn about their struggles with academic note taking and filing in an interview setting was the first task.

These interviews provided qualitative research insights.

Personas

On left, picture of girl with brown hair and green jacket with green trees in background. Details of persona in black text are to the right of the picture.

Olivia's Persona

On left, picture of woman with black hair and green shirt with green trees in background. Details of persona in black text are to the right of the picture.

Deborah's Persona

Problem Statements

User Journey Maps

I walked through, step by step, the process commonly taken by students when note taking to better understand their emotions and activities.

Black text and borders outlines graph creating journey map.

Competitive Audit

Purple, orange, salmon pink, green, aqua blue, butter yellow, gray, and school bus yellow sticky notes contain details of audit in black text. Images of companies compared can be found in far left of image.

User Flow

Gray circles, orange squares, and blue diamonds with white text and gray lines and arrows show how users to website will move through the site (pages) and decisions to be made.

Paper Wireframes

I began designing with paper wireframes. I started with the home page.

White paper lays on hardwood floor. In black ink, wireframe of home screen sits in the middle of the paper.

Starting with the mobile screen size (mobile-first approach) helped verify that all elements and content could be laid out in an appealing and accessible format on the smallest screen size first.

Five white papers lay on hardwood floor. Each paper has wireframe drawn in black ink of home page.

Multiple iterations of each page revealed many options that could be compiled into a design solving our users’ struggles from page to page.

Digital Wireframes

3 common screen sizes were selected, providing 3 breakpoints to consider when testing the responsiveness of the upcoming designs.

Mobile (360 width x 800 length)
Tablet (834 width x 1194 length)
Desktop (1440 width x 1024 length)

Layout grids were applied in Figma to guide the placement of elements across various screen sizes. I used the 12-8-4 Column System.

Salmon pink columns and white gutters create layout grids to help me lay out elements consistently.

Graph shows size of gutters, columns, and margins.

Gray shapes and black text are used to lay out the elements on wireframe mobile screen.

Gray shapes and black text are used to lay out the elements on wireframe desktop screen.

Low-Fidelity Prototype

Using my digital wireframes, I created a low-fidelity prototype. The main user flows in the prototype were the following:

Signing up
Writing a note
Using note-taking templates
Uploading a document to the website
Searching

People using the website will complete at least 1 of these 5 tasks. Making each process easy to follow was crucial for users to have a pleasant and profitable experience with the website.

Salmon pink, gray, and white wireframes in background show blue lines connecting prototype.

High-Fidelity Prototype

Black and white camera elements surround photo of book's page to create high fidelity prototype screen.

Navigation

During research, teachers and parents expressed the need for easy access to their students’ notebooks for grading and evaluation of academic growth.

Students don’t need access to their parent/teacher’s or fellow students’ accounts.

The separate needs of both the parent/teacher and students were noted and incorporated into the design’s account options.

Student Account Options:

Edit account details.

Admin Account Options:

Edit account details.
Add account.
Access other accounts without passwords.

Thoughts for Future

Overall, I strived to create a website design with clean, appealing visuals and practical navigation.

Since families come in various sizes and have unique schooling styles (home school, public, etc.), testing the design with a larger group of diverse families to reveal areas of improvement before building into a working website is a hope for the future.