UI Case Study
A networking app for students to share resources and communicate
This project was part of my UI specialization course in an effort to learn and implement good visual design principles and adhere to industry standard interface guidelines. Although my primary focus was on UI design, I was able to experience the overlap between multiple disciplines and implement many UX principles and research methods throughout.
Life as a student is a balancing act.
All students can agree that the pursuit of higher education is not always an easy task in terms of motivation and support. Like a rollercoaster; there are ups and downs and twists and turns. For some students group projects are their worst nightmare - the anxiety of having to find someone to work with, setting up group chats, and sending paragraphs back and forth. For others it's those times when you don't know where to even start and just need some advice.
Community is so important for students to feel supported and a key component of learning is enthusiasm.
Peer-to-peer learning can increase motivation and engagement with a subject thus helping students on their academic journeys.
Students face the tough task of balancing their studies with everyday life which often leaves them exhausted and lacking motivation. Some students study full-time, others, part-time; it is difficult to find the time to connect with peers and meet people who share similar interests.
Students need an easy way to network and collaborate with peers to complete group work and share resources.
To create a responsive web app which allows students to connect with others in their field to discuss topics, share insights, receive peer feedback on assignments, and find others willing to collaborate on projects.
StudyBuddies will be a fun and interactive platform for students to share knowledge, get inspired and support each other through their academic journeys.
Empathy is a key driving force behind good design solutions and by creating a user persona we can humanize the problem and step into the shoes of the users.
“I love the idea of having the right support at the right time for my course, such as study materials and advice."
“I think teamwork will be key to my professional development, so I’d like to find like-minded students to collaborate on projects."
To further explore the users' wants and needs, I created user stories. This ensures that the product will be designed to accommodate different POVs. This kick-started the process of conceptualizing solutions to create the foundations for the app.
A solution was offered for each story.
These stories and features were then developed into user flows to visualize the users journeys when completing tasks in the app. This step ensured that all necessary screens and elements were considered to design a seamless experience for the user.
.png)
With the primary function and navigation routes noted, I then created the site map to illustrate the information architecture of the whole app.
With the product direction and structure clearly mapped out, I began exploring the layouts for individual screens.
My initial low fidelity wireframes were drawn by hand which is most efficient at this stage.
The idea was to map out each screen and really visualize how the user would move through the app. I was looking to answer questions like 'how many clicks does it take?' and 'does this information architecture make sense in reality?'.
These wireframes were then connected together using the 'Marvel' app to produced a clickable, responsive prototype which was then tested with potential users.
I decided to test at this early stage because it helps in the long run; exposing any flaws in structure and features is low-cost but high pay-off at this level of development. To ensure a smooth testing process, I created a test plan to map out the objectives and tasks before getting to work.
The feedback was collected, analysed and key insights were extracted.
With these insights in mind, the wireframes were revised to create a more intuitive and smoother user experience.
Next, I began to create mid fidelity wireframes using Figma. At this point, the digital wireframes were rough translations of the low fidelity sketches and UI principles had yet to be applied.
I now began to develop these digital wireframes by applying UI design principles and practices in consecutive stages. This allowed me to build up the designs from strong foundations whilst learning each visual principle through application.
This project followed a mobile-first design process so I applied a responsive grid system to ensure that the designs could be scaled seamlessly. This also ensured that spacing would be consistent both vertically and horizontally.
I then created a library of dynamic components for reusable UI elements that would require various states. Implementing this design practice meant that I would save a lot of time when editing components and that the styling would remain consistent across each instance.
Certain functions and features of the app were adjusted to mirror well-established design patterns from existing apps, such as Facebook, LinkedIn, Instagram, etc. This was to ensure that the product would be most intuitive for users and behave as they would expect.
Now I began to explore the visual direction of the design.
At this point the wireframes were still in grey-scale and did not include any imagery. In order to proceed with the designs, I constructed a mood board and collected imagery that would provide inspiration to help craft the desired atmosphere of StudyBuddies.
The bright colours and smooth shapes from the mood board provide a friendly and welcoming feel, and would help keep students engaged and active on the app. The images illustrate a feeling of friendliness, support, networking, studying and success which is what we aim to promote with the StudyBuddies platform.
With all the visual elements finalized, I constructed a style guide explaining colour palette, typography, UI elements, etc.
With inspiration from the mood and imagery boards, StudyBuddies' colour palette was developed to create a bright and energetic atmosphere to motivate students. In order to keep the app from looking too juvenile, the bright colours were applied as accents against neutral backgrounds to maintain a clean yet dynamic look.
Once logged in, the user is taken to the home screen which acts as a news feed for all of the groups that they are a member of. From here they can navigate to any other part of the app through the main navigation bar at the bottom of the screen or open the side bar menu by clicking on their avatar in the top left corner.
.png)
To create a post, users can simply click on the prompt at the top of the home screen which then opens a new window for them to compose their post. Posts can be labelled with category tags which can be seen on the top-right corner of individual posts in the feed; this helps users communicate more efficiently by clarifying what kind of interactions they would like for their post. When exiting they are prompted with choices to save or discard their draft; the drafts could then be accessed through the side bar menu whenever the user wishes.
Users have quick access to the search function via the navigation bar at the bottom of the screen. Here they will find suggestions for buddies and groups related to their interests. They can search and explore other profiles easily to help expand their online community.
.png)
.png)
The messaging feature of the app follows the standard design pattern found in most other social media apps and platforms. Users can chat to individuals as well as create group chats to collaborate and share resources. This enables users to seamlessly connect and communicate with peers all within one platform to facilitate their studies and make their lives a little easier.
Notifications can be accessed from the main navigation bar. This enables user to easily manage their interactions whilst keeping the platform tidy from pop-ups.
.png)
.png)
.png)
Being a student can be draining on your mental health and motivation so I incorporated some design features to ensure that StudyBuddies is conscious of user wellness and mental health.
Conducting the project with a mobile-first design process meant that I was also able to create designs for additional breakpoints.
I completed a rapid design process starting from the high fidelity mobile screens to conceptualize wireframes for tablet and desktop versions. I then translated these wireframes into high fidelity mock-ups using Figma and the existing style guide and pattern library.
This project was intended to teach me the fundamentals of UI design and it did just that.
I was able to apply my existing UX skills to build a robust structure for the app but I lacked knowledge in visual design principles and practices. This project took me on the full journey from design brief to product whilst pushing me to develop my visual design skills and learning how to adhere to interaction guidelines.
This project showed me first hand how often you need to revise and iterate at each design stage. The process that I followed was broken down sequentially so that I would learn a design principle or practice and then implement it. As time went on, it became more and more evident how intertwined UI practices are and how they create domino effects further down the line.
Learning how to utilize the full extent of the Figma software was a steep learning curve (that I often find myself still climbing), but it taught me the importance of design systems.
In the early stages of my Figma wireframes I made the mistake of creating single elements without anticipating their states or variations. Learning how to use the components and variants along with the auto-layout function was tedious at first but really paid off in the end - especially when it comes to responsive design. Building dynamic components is a mini problem solving opportunity in itself and I really enjoy working through these logistics to reach the final solutions.
I look forward to developing my UI skills further through more practice and experience. Having learnt and applied visual design skills has made me that much more appreciative of the products that we interact with daily and recognize how much thought goes into each detail. I am proud of my first attempt at a UI case study and look forward to the next.
