(AXΩ) PACE
Mobile and Web app interface design
THE IDEA
The goal of this design sprint was to design a web interface tailored to a community-building initiative that exists within the Alpha Chi Omega sorority, which I am a part of.
'Promote Alpha Chi Everyday' aka. PACE is an initiative that encourages members to wear our letters, ‘AXΩ’, with pride and take photos to document us demonstrating this spirit in order to receive what are known as PACE points. These points count towards the overall points received each semester by performing other acts within the community. Since I joined, “PACEing” is performed by forwarding pictures to the respective Vice President in charge of members' points, but I figured instead of having direct messages coming from all over social media, why not have one application that sisters can upload their photos to and have their points tallied there and then.
.png)
. With this, the VP’s only job would be to collate the points awarded from the app without having to do so manually, and sisters also get to share and see how others are “PACEing”. As there are no existing applications across the fraternity that achieve this, it would be a great add-on to the other web interfaces we use for member logistics and help make building community within the sorority fun and easy.
Wireframes
The Wireframes I chose to implement include: The Home page, Profile Page, Roster, as well as screens that showed what opening up the hamburger menu or expanding the ‘Upload’ button would look like. These wireframes represent the very general navigational flow of the application and display the main features that users will be interacting with while in use.
I chose to use a generic grid layout because this very closely resembles other social media applications that most users would already be used to e.g. Instagram, Twitter, etc. As such this would help make the interface memorable and easy to use since the content is laid out in a clear, visible, and organized manner.
Fig 1.1. Navigational flow between mobile wireframes
Fig 1.2. Individual screens for mobile wireframe
Across both mobile and desktop versions, the features are quite simple and intuitive. The main one being the upload feature which allows users to make a new post to the general feed by either uploading an existing picture from their photo library or using their devices’ camera to take a new one. They do this by clicking on the ‘+’ icon on mobile version and the ‘Upload’ button on the desktop version which will then bring up a menu of options to perform either of the two proposed actions and receive points for completing this.
​
The other main standout feature would be the navigation bar which is easily accessible from all pages and allows the user to easily move between said pages. This is always in view on the desktop version on the left-hand side of the screen and is available upon expansion of a hamburger menu on the mobile version. Following feedback and critiques however, I iterated on the desktop version to be collapsible as well so users can focus on the main content on all pages. This change is implemented in the final mockups.
Fig 1.3. Navigational flow of desktop wireframes
Another feature I incorporated into the final mockups following feedback and critiques of the wireframes was a ‘Share’ button which would allow users to share the posts across other platforms so they would not have to re-upload them when using a different but similar application.
Mockups
Since the app mimics already existing social media interfaces it should be fairly easy to use. In order to improve navigation on both versions, I combined the ‘Account’ and ‘Settings’ components into one featured page since for a relatively simple app they would not have many differences between them. On the mobile version this remains in the hamburger menu, but on desktop I moved this to be part of the dropdown menu where the ‘Logout’ button can be accessed – by clicking the arrow next to the profile icon in the top right - since it might be more intuitive to incorporate that into that generic component. Also made the PACE logo at the header of the application navigate users back to the home page since this is what most applications do.
In terms of visual design, I drew a lot of inspiration from the Carnation flower, which is one of the symbols of Alpha Chi Omega. The red tones drove the overall color scheme but on the lighter side of the spectrum, with light pinks and whites to make features visible/readable.
Also chose to make the font a very generic sans-serif font since these are easiest to read and allow for the main components, such as buttons and other navigation tools, resemble those in other popular apps e.g. Twitter.
On iterating from wireframes to mockups, also removed the footer that previously held the upload button on the mobile version and made that feature resemble that of Twitter’s “Compose tweet” feature which comprises a static button on the bottom right side of the screen. This got rid of all the awkward white spacing at the bottom and still makes the feature accessible during scrolling.
Fig 2.1. Mobile mockup screens
Overall, the app interface does not have a drastic translation between mobile and desktop views. The grid layout is maintained across board for all image displays and these are columnaligned when necessary on the mobile version e.g. in the Roster and Home page. The hamburger menu is standard between both with the exception of the ‘Account and Settings’ feature remaining in the side navigation on the mobile versions since the profile icon in the top right is already in a small and hard-to-reach position so did not want to crowd that corner of space on smaller devices.
Fig 2.2. Desktop mockup screens
