Create a simple and intuitive WebApp for users to upload their their own sticker sets to be displayed and used in the AndCam app.
- WebApp had load pages quickly.
- WebApp has to upload stickers quickly.
- User must be able to manage sticker set via add or deleting stickers.
- User can add multiple sticker sets and manage sticker sets.
- Maintain brand consistency throughout
Lead UX Designer and Product Manager working with 1 full stack engineer, 1 QA.
SITE FLOW DIAGRAM
I put this together to help guide feature design and give engineers a head start on building the backend of the WebApp while I finalized the assets and high fidelity mocks with the brand designers.
THE "SIGN IN" SCREEN -
For the Sign Up screen, we wanted to keep it dead simple with no distractions. In terms of branding, we wanted to keep it consistent with AndCam’s circular theme and color palette.
THE "MAKE A CAM" SCREEN -
Header - We wanted to make the transition from AndCam —> SingIn —> Camera Department Seamless so we kept the header exactly the same throughout.
The Navigation Bar - I went with the minimum amount of features needed to complete the user’s needs.
1. Create a new cam set
2. Manage the cam set by adding or deleting stickers.
3. Managing their sticker uploads in the “Image Library” and in the case of this example, manage all sticker sets within the app.
The Page layout - We wanted the uploader to be intuitive with minimal buttons to keep clean and simple. We provided visual cues to help guide users in adding stickers, removing stickers, adding and creating cam sets. The page mirrors the Cam Profile page from the App and is consistent with layout and branding.
We went with a brief set of instructions on the right side to guide users through the process. This was the quickest way we could fit in instructions without any extra engineering time.
THE "MY CAMS" SCREEN -
Adding and removing assets - To make managing sticker assets intuitive, we made each sticker and frame visible as thumbnails. If the user hovers their mouse over the thumbnail, an "X" appears on the thumbnail and clicking on it will delete the asset.
THE "ADMIN" SCREEN
We created the Admin page to allow system admins access and editing capabilities to all Cams within the app.