UC Berkeley Mobile Course Editor (2018)
For my User Interface Design course at UC Berkeley Extension in San Francisco, we had an assignment to design and prototype a replacement UC Berkeley Course Editor mobile app design. With my team members, we storyboarded a typical course editor user flow for both an instructor view and student view. I used the official UC Berkeley color palette and font family for these final designs using Sketch.
Login Screen
This is the first load screen that gives the user options for logging in.
Welcome
This is the Instructor screen that gives the option to either edit classes or personal profile information.
Instructor Preview
This is the admin screen for the instructor profile, where the user can edit his/her information and publish.
User Flow Sample Screens
Upload Personal Photo Admin Screen
Upload Course Editor Image Admin Screen
Selection Screen for Uploading Photo(s)
From concept to execution..
As a class, we were required to create user flow pen-and-paper prototype screens to map out a typical user journey for the app. Here are a couple samples of what we were able to come up with in this preliminary design phase. After we agreed on the final renderings, I was the primary designer for my team in translating them to high-definition digital prototypes as seen above.