Background

This challenge was the first time I had to complete a design sprint in under a week. It was a lot of fun and really pushed me to be careful with how I managed my time. The following are some points to be aware of before reading ahead.

1. We were given the option of redesigning either the desktop or mobile version of Prepr. I opted for mobile because after determining that one of the key audiences of the platform was gen-Z students like myself who are currently enrolled in either high school or university, and knowing that our age group overwhelmingly prefers mobile over desktop, I figured that improving the mobile experience would be the most optimal way of getting more members of this target audience on board the Prepr platform.
   
2. Being relatively new to the Prepr Network, I considered the experience of a new user when evaluating and redesigning the app. Making the platform new-user-friendly is essential for the growth of any product's audience.
   
3. I steered away from making drastic changes to the app's layout or navigation. This would cause problems for existing users since they already have an established mental model of the app. Instead, it makes more sense to slowly roll out small changes and continually evaluate their impact to ensure that both the current user base and new users are satisfied.
   
4. I spent 2/3 of the days that we were given for this project on problem identification. Until you have a strong understanding of the issues and user needs, you'll find yourself designing for the wrong problems, and having to iterate on your work more than necessary.
   
5. Though I experienced some technical difficulties while using the app, I left these out of my evaluation of the app's current state since they are not problems that can be solved through design. However, it is still essential to work through these issues to ensure a smooth user experience.
   

Alright, that's enough disclaimers. Let's jump right into it!

Research

This week (March 15th - March 18th) was an interesting one to complete a design challenge, since the corona virus has enforced the global population to condemn themselves to social isolation in an attempt to reduce the spread of the illness. As a result, though I normally would've evaluated the app with target users by observing them as they performed various tasks, I resorted to completing the initial usability evaluation on my own, with the Neilsen Norman Group's 10 Usability Heuristics for UI Design serving as my guide. The results of this evaluation are shown below.

Note that UI/visual issues are represented by blue dots, while UX/usability issues are represented with red dots.

Putting it All Together

There were a number of UI and UX issues that I noticed in my evaluation of the current state of the Prepr app, but these can be summarized into the following key issues.

1. Visibility of System Status
   Throughout the platform, there is insufficient feedback from the interface to indicate that something has changed. Examples include switching from the All tab to the Challenges tab in the Explore page, and tabs looking inactive when selected due to the grey background, leading to user confusion as to whether the system has responded to their action .
   
2. Insufficient Information
   As a new user, there is a steep learning curve as a lot of crucial information that would assist with understanding the purpose of the platform is either missing or contained in one-time popups which are nowhere to be found the second time you enter the platform. Examples include missing explanations of Challenges, Labs and Projects, and definitions for the terms in the Requirements section of the Challenge Details page. This makes onboarding very difficult for a new user, and can potentially drive them away.
   
3. Inconsistencies
   There are a number of interface inconsistencies, which inhibit the platform from having a polished, professional and finished look. Examples include inconsistencies in tab styles, button formatting, text styles (serif vs sans-serif) and the availability of features (i.e. Search and Filter options are provided in the Challenges page but not the Challenges tab of the Explore page.
   

In the redesign, I worked on resolving these three major issues through changes to both the UI and UX.

Lo-fi wireframes

Now that I knew which issues I wanted to tackle, I sketched out some of the essential screens to start bringing the reimagined experience to life. I chose to redesign the Explore page, Labs page, and Challenge Details page, leaving out the Projects page simply because it didn't contain a lot of content, and the Challenges page because it was very similar to the Challenges tab of the Explore page.

My redesign justifications are included as annotations next to the wireframes.

HI-fi Mockups

Once again, under different circumstances I would have liked to have tested my wireframes out by having users perform some basic tasks with them (perhaps with the help of POP by Marvel to make them interactive), but given the current limitations on human interaction and the time crunch, I went ahead with just designing the app UI in high fidelity. My overall goals were to keep the visual appearance of the app minimal and bright, and do away with any design issues that were inhibiting the interface from having a modern look, such as sections written in serif style and tabs with dark grey backgrounds that did not pass the accessible colours test.