ui/ux/mobile
University
ColLege
london
back to projects
UCL
Blue Sky Enablers PROject
BLUE SKY PROJECT
UCL is one of the top Universities in the UK, based in London.
Whilst working in a long-term re-design of UCL's staff admin app in the retained team, I was asked to work on a 6 week 'blue sky' project as to what the app could look like in 5 years time without any technological restrictions holding the design back.
This was a fantastic project to have complete free-reign to show off how good this application could be to receive more funding from UCL.
ROLE
I worked on this project as one of two full-timers alongside a Junior UX Designer whilst I took care of the hi-def UI designs and final prototypes.
Whilst working in a long-term re-design of UCL's staff admin app in the retained team, I was asked to work on a 6 week 'blue sky' project as to what the app could look like in 5 years time without any technological restrictions holding the design back.
This was a fantastic project to have complete free-reign to show off how good this application could be to receive more funding from UCL.
ROLE
I worked on this project as one of two full-timers alongside a Junior UX Designer whilst I took care of the hi-def UI designs and final prototypes.
INDUSTRY
Education
SKILLS
UX
UI
Prototyping
Wireframing
Mobile App Design
Design Research
PROGRAMMES
Figma
Education
SKILLS
UX
UI
Prototyping
Wireframing
Mobile App Design
Design Research
PROGRAMMES
Figma
Aa
Helvetica Neue
Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
.png)
Teal Blue
primary colour
#0097a9
R 0
G 151
B 169
R 0
G 151
B 169
Pink
secondary colour
#AC145A
R 172
G 20
B 90
R 172
G 20
B 90
Mustard Yellow
secondary colour
#F6BE00
R 246
G 190
B 234
R 246
G 190
B 234
Dark Blue
Primary colour
#003D4C
R 0
G 61
B 76
R 0
G 61
B 76
White
primary colour
#ffffff
R 255
G 255
B 255
R 255
G 255
B 255
PROCESS
Research
Our first step of the project was to look into some direct UK 'competitors' such as other universities and then into other admin task applications such as Asana, Workplace & Bamboo HR.
We then needed to decide on which features were the most important to show to the client. Given that this was a short-term project, we needed to prioritise what we could create in such a small amount of time.
As I was part of the original UCL retainer team, we had plenty of user research to go through to help us with this process that we have gained from user testing in the past.
As I was part of the original UCL retainer team, we had plenty of user research to go through to help us with this process that we have gained from user testing in the past.
PROCESS
User Journeys & Site Maps
Once the features were prioritised, we made came up with an idea to show the app through an onboarding process for when a user first enters the application.
This meant that we could show all the possible features of the app without having to go too in-depth, taking too much time.
This meant that we could show all the possible features of the app without having to go too in-depth, taking too much time.
Once these were created, we finalised on an onboarding user journey, we could get started on the designs.
DESIGN
Design Library & Wireframes
As we had previously worked with UCL, there were some components designed already by the other team I was part of, this helped the process move along slightly faster as we did not have to create a whole new design system, instead just used one we had created before.
We then started working on low-mid-fi wireframes, as we already had parts of the design system, we could go straight into slightly more in-depth designs.
The onboarding process was inspired by Monzo, known for their extremely user friendly application and onboarding.
Wallets such as Google and Apple pay inspired my designs here, being able to keep loyalty cards and their QR code all in one location accessible on the menu.
The dashboard was influenced heavily by social media accounts such as Facebook and Workplace with apps, groups, blogs and news, I tried to make it look like someones public profile.
Whereas the private profile is designed in a more admin style where only the user would have access to.
DESIGN
User Flow V1
Once all the screens and features were decided, a mixture of low-fi and hi-fi wireframes were created and put into the logical order for the prototype and user journey/flow.
The whole onboarding has a progress stepper to guide the user through the journey.
The whole onboarding has a progress stepper to guide the user through the journey.
Step 0: Onboarding -
User logs into the app with their username and password, the app then briefly describes the onboarding process.
User logs into the app with their username and password, the app then briefly describes the onboarding process.
Step 1: UCL ID -
During the first step of the onboarding, the user is prompted to set up their ID and their wallet. They are prompted to upload a profile picture and then add any loyalty cards they might have.
During the first step of the onboarding, the user is prompted to set up their ID and their wallet. They are prompted to upload a profile picture and then add any loyalty cards they might have.
Step 2: My Information -
In this step, the user creates their own private profile such as basic details, demographics and employment details.
In this step, the user creates their own private profile such as basic details, demographics and employment details.
Step 3: My Team -
This is the part of the app where the user can look at other people involved in their organisation and see more details on them, any holidays and also where they can find their schedule.
This is the part of the app where the user can look at other people involved in their organisation and see more details on them, any holidays and also where they can find their schedule.
Step 4: My Training -
This is where the user can work on personal development and progression through courses. They can also access their finance such as payslips and their notifications and tasks they need to complete.
This is where the user can work on personal development and progression through courses. They can also access their finance such as payslips and their notifications and tasks they need to complete.
Step 5: Community & Interests -
The community is where the user can really personalise their profile by selecting groups they want to join, interests they want to display and even badges they can put on their profile.
These selections then generate a custom community page for the user that shows personalised news and events that they might be interested in.
The community is where the user can really personalise their profile by selecting groups they want to join, interests they want to display and even badges they can put on their profile.
These selections then generate a custom community page for the user that shows personalised news and events that they might be interested in.
Step 6: Dashboard -
The dashboard is effectively the homepage of the application. It summarises up all of the features of the applications from community to applications.
The user gets shown around via a focused onboarding and then sets up the dashboard and allows the user to look around at their newly created page.
The dashboard is effectively the homepage of the application. It summarises up all of the features of the applications from community to applications.
The user gets shown around via a focused onboarding and then sets up the dashboard and allows the user to look around at their newly created page.
Step 7: Extras -
From here we wanted to show off a couple of other features we created but couldn't quick fit them into the onboarding flow.
These features include campus, organisation, help and finance. The user can navigate to these freely and will be shown to the client during the final deliverable presentation.
From here we wanted to show off a couple of other features we created but couldn't quick fit them into the onboarding flow.
These features include campus, organisation, help and finance. The user can navigate to these freely and will be shown to the client during the final deliverable presentation.
CREATION
Final Designs & Prototype
We went through three rounds of design to come up with these final screens. This was where I took control and the user interface design and had free-reign during this process to create pixel perfect hi-fi screens.
Here's a closer look at the individual key screens or have a look around in the Figma file below to fully inspect the work.
If you tap on the screen, there will be prompts to show where you can click to progress!
I presented the final prototype to the client and they were extremely satisfied with the end product and went on to show the deliverables to their colleagues to receive future design funding.
Below you can see the brief, how we approached the project, research and a final user journey.
Below you can see the brief, how we approached the project, research and a final user journey.
