top of page
/About
/Goal & Role
Process
Cesar School App is a digital education application that focuses on essential information and is designed to improve the mobile experience of the faculty's students. It helps students to be in control of their education by giving them access to subject contents, an integrated calendar, previous lectures, study materials, grades and more.
Tools:
Sticky
Notes
Miro
Adobe
Photoshop
Axure
Adobe XD
I was assigned to build an application experience that makes it simple for Cesar School' students to access essential information, based on their existing website in 5 days and present the results.
My roles during the process were:
-
User Researcher
-
Data Analyst
-
UI/UX Designer
-
Product Designer
the PROCESS
Competitive Analysis
Market research to capture other existing solutions to understand what's currently available and gather info on workflows.
/Goal
/Questions asked:
I analyzed top university apps like Tu Delft, Standford, Harvard, University of Sydney, Singularity University and others. The goal was to learn about the apps main features and how they provide online support and information to their students.
What is available for students? How do they organize content? What are the main features? How is the user flow optimized? What are their strengths and weaknesses? How well are they presenting content? Are the screens intuitive? How many steps does it involve to check the news or check the campus map? Is it easy, or it takes too long? Do they pass basic usability and interaction design principles?
Competitive Analysis
Interviews
Customer
Interviews
/Description
I conducted qualitative research, through six phone interviews with students from Cesar School (Design grads and Computer Science grads and post-grads), in order to understand the use of the current online Student Portal and if the users were facing any problems.
Why focus on the student portal? Because the content on the website is mostly for the general public and the aimed user were students of the faculty (as described in the exercise).
I also wanted to learn about the users and what kind of information is most important for them as students.
The students were very open to talk and to participate in further product tests if needed.
I also interviewed two students of Pernambuco's Federal University (Design grad and a Computer Science grad) in order to understand general students' needs and expectations on other educational systems.
/Questions asked
How old are you?
Where do you live?
Do you work? If yes, what do you do?
What course are you attending at Cesar School?
Why did you choose to be a Cesar School student?
What kind of information is important for you as a student?
Where do you normally get that information?
Do you use any digital product for that? If yes, which one?
Do you use the Cesar School's Student Portal?
What were your needs when you used it?
How frequently do you use it?
Have you ever had a bad experience using it? Describe.
Have you ever had a good experience using it? Describe.
Is it ok with you that it's a website? If no, why not?
Based on everything I asked you, let's say I'm going to give you a magic wand to solve any problems you have. What is your wish?
Personas
To have online access to previous class content would be great!
Pedro
Meet the
Personas
I would be great to have my grades in one easy access place!
Clara
Findings & Clustering
/Problems & Needs
All users said that the current Student Portal is not reliable, because it presents much-mistaken information on grades and attendance. Mostly, students use it to access financial information and download bills.
They also complained about the bad communication that uses email and a paid Slack account, especially for important deadlines and schedule.
*The repeated answers were clustered into one.
/Goals & Desires
All students want to have the Student Portal as a mobile application. They also want to access previous class content and more detailed information to go deeper and study at
home.
Another need pointed out very strongly was to have online access to grades, attendance and schedule. Some mentioned the need to receive notifications about any important matter.
*The repeated answers were clustered into one.
Findings
User
Stories
User Stories
Problems found and need were translated into user stories. The exercise asked to focus on two features, and once the main student complaint was access to grades and attendance (once they are interdependent), and also previous class content, those were the selected stories to work on.
Interaction Study
& Wireframing
Wireframes
The suggestion to offer a few more options was based on data from the competitive analysis and user interviews. Once I believe that the product needs to be built one feature at a time, I prioritized and focused on the chosen user stories.
The starting point was the login for students, that also gives the option to proceed as a guest. It then takes the student user to 3 main categories to choose from.
If the guest is chosen it goes to the home page, with other available options.
Here we have a carousel of subjects the student can choose from to watch, that the teacher uploaded to the system. When chosen, they see smaller units (classes) that offer different document options for them and for the teacher. They can choose between video, audio or a PDF document. When chosen, they watch.
The academic transcript is here with a grid view, where the student can check the current enrolled subjects, scores, attendance, and credits. If he needs further information on a specific subject, he clicks on the name and a side menu open with more details.
Interface Sketches
Sketches
Based on the wireframing, the sketches were created, with some icon design suggestions.
To have some usability tests would be the perfect scenario, but once I only had 5 days, I had to move ahead without user testing.
UI Library
UI Library
/Typography, Icons & Logos
RGB: 75,79,88
Hex: #4b4f58
RGB: 255,255,255
Hex: #ffffff
RGB: 20,130,181
Hex: #1482b5
RGB: 98,98,98
Hex: #626262
RGB: 34, 204, 246
Hex: #22ccf6
RGB: 66, 66, 66
Hex: #424242
/Colors
RGB: 79, 253, 56
Hex: #4ffd38
RGB: 247, 42, 20
Hex: #f72a14
RGB: 39, 46, 63
Hex: #272e3f
UI Design
Student login with an already created account.
The student can access grades and attendance, easily changing units, with info about credits also.
The opening screen shows an actual teaching experience between two people and reflects more precisely what Cesar School is all about.
First screen after opening to login as student, create a new account or proceed as guest.
UI Design
This is a mobile adaptation of the current site screen, to give the user categorized options.
Courses screen when clicked on Design
Courses screen when clicked on Computer Science.
Courses screen when clicked on Calendar.
Computer science course description, with the option to see more details and a carousel to find other courses.
Description of Computer Science's units, with the option to see more details and a carousel to find other courses' details.
When a unit is selected it shows all subjects related and the user can choose what kind of media he/she would like to access.
Another carousel option with a different subject selected by the user.
Courses screen when clicked on Design
Design course description, with the option to see more details and a carousel to find other courses.
Description of Design's units, with the option to see more details and a carousel to find other courses' details.
When a unit is selected it shows all subjects related and the user can choose what kind of media he/she would like to access.
bottom of page