Prepr-UX Designer Work Challenge
This challenge was given to me by Prepr to work on. I had to redesign their website.
Left image: Screen 1
My approach for this first screen, explore screen, was that I wanted to make it less crowded and more useful by putting the beneficial tabs together such as the labs, challenges and projects. If one of the tabs is chosen, then there will be a green color hovering over it. I also wanted to go with the Prepr color scheme which was green with grey and white colors. I used the previous mindset for the rest of the screens.
The reason I used the table for the tabs is because in the current design in the responsive website for mobile phones, the tabs are stuck together and it is very easy to click on the wrong button because there is no space between them. The user needs more space to click on the required buttons. As a result, there is more space now for this action to improve the user experience.
In the body of the screen, I separated the information by putting lines between them so that the users can easily navigate and not get confused when they are looking for something specific. I also added a level of difficulty so that the users can decide whether they are up to the challenge or not. In addition, I added a deadline for the challenges so that the users can tell whether they have the time to work on them or not. That way, the users can be more comfortable when they are browsing the website and can easily know whether they want to enter the challenges or not.
Right image: Screen 2
For the second screen, I replicated the current design of the drawer when you click on the icon when the users are logged out, but I still followed the color scheme and style that I had in mind for the design.
Left image: Screen 3
The third screen is what the users see in the drawer when they log in. They will have a list of options that the website offers to choose from. They have the option of going to the explore screen or navigation. Explore will basically take them back to the first screen. The navigation button will take them to screen 4, the navigation screen.
Right image: Screen 4
The navigation screen includes the challenges, labs, projects, achievements, etc. In addition, there is also a back button to go back to screen 3.
Left image: Screen 5
Screen 5 is the UX Designer Work Challenge page. The table on the top of screen 5 includes the general, host and associated labs tabs. Each one of these will lead to a different part of the same screen if the users click on them. For example, if the users click on the hosts option, the screen will scroll down to that part of the screen. The host and associated labs tabs will lead to screens 6 and 7 respectively.
However, the default part of the screen the users see is the general tab. That tab includes the description of the challenge. That part of the page has another table that includes the overview, discussion and submissions tabs. This part is dynamic which means that each one of these options will lead to a different view of the screen based on the challenge. The Overview for example shows the description of the challenge and the submission process and evaluation criteria.
Middle image: Screen 6
Hosts Screen
Right image: Screen 7
Associated labs screen
Left image: Screen 8
Screen 8 is the My Labs page where I used the same design set by having the tabs in a table and the one that is highlighted in green is the active one.
Right image: Screen 9
Screen 9 is the projects page. Similar to screen 8, the tabs are put in a table. Furthermore, I arranged the page in a way where the users can add a project in an easier way by having a bigger area for the users to click the Add button.
