The Student Organization Manger is an application that helps students discover university clubs so that they can find community on campus. My role as UX designer, included researching similar products, creating user personas, drafting a wireflow, and providing a basic UI direction.

Status                    Concept
Timeline                01/03/19-01/15/19
Major Tasks         UX Research / UX Design
Platforms              Mobile
Design Tools        Adobe XD
                                    Adobe Illustrator
UX Methods        User Persona
                                    Competitive Assessment
                                    Feature / Content Map
                                    Sketches / Wireframes
Collaborators      None
Research and Planning
I created 4 user personas for a new student looking for campus community. I initially included 2 more reserved students and 2 more outgoing and involved students. However, I ended up focusing on the outgoing user personas because I felt their direct goals had overlap with the more reserved personas' goals.
Competitive Assessment
In the competitive assessment I researched 4 similar group/club management applications. I considered features available, visual appeal, ease of use, and user reviews. I developed to summary below based on my findings:

       •   Existing apps included similar features
       •   Apps were very text heavy
       •   Searching for organizations was difficult
       •   Search results were not organized well
       •   More visuals could be incorporated feel inviting

The competitive assessment helped me understand the strengths of features already in place, as well as what could be improved. This gave me a strong foundation for beginning the design phase of the project. 
With a clear picture of the problem, user goals, and competition, I began sketching wireframes for each screen the application would need. One of the reasons I love hand sketching, is it allows ideas and solutions to be visualised quickly in a simple sketch. 
As I was sketching, one of the ideas I came up with was to use a swipe to hide feature to help search results be more relevant to the users. The feature works much like a "Hide this ad" on Facebook or Google. Once swiped, the organization would be hidden from all future search results. I was excited about the idea and began working to implement it in the digital wireframes. 
Digital Wireframes
Using the physical wireframe sketches as a guide, I used Adobe XD to bring the sketches to life. I implemented the swipe to hide feature in the wireframes, and then also included a feature to view the hidden organizations in case the user ever wanted to go back and view them or unhide one. 
UI Development
For the basic UI elements, I chose a dark teal to give the application some professionality and an academic quality. I also included images for each organization to give the cards more visual appeal and help the users understand what each group is about without having to necessarily go into the main organization page. 

For the final aspect of the project I used Overflow to create a wireflow showing how the user personas would navigate through the product wireframes. This resulted in an interactive proof of concept for the product and helped me see which features would be used most and might need to be iterated on further.
I am proud of the work I put into the user research and wireframes for this project. The resulting comprehensive wireflow shows a well thought out product and how users could utilize the tool. The idea to hide irrelevant search result with the swipe to hide feature is innovative and would be interesting to present in user testing for future phases of this project. 
If I continued developing this project, I would do user testing with the current design. Then refine the product based on user feedback, build out a higher fidelity prototype, and finally refine some of the UI elements to create a more inviting visual space. 

Back to Top