UniPie makes university textbooks available to students with one click. Their webapp is designed with the purpose of facilitating learning and training, whilst rewarding publishers and universities with royalties. Note that a webapp differs from a website, in that it is actually a software application that can be accessed from any browser. This gives a few advantages over a website, mostly relating to accessibility and the reduction of maintenance efforts compared to an app on Google Play or App stores.
The assignment for Pine regarding the UniPie project was multi-level. Specifically, our team was asked to create a new visual identity for the client, which essentially means rebranding. This gave us a lot of creative flexibility, and it paved the way for any future work that was to be done. After this, we were asked to redesign their landing page, and finally provide an end-to-end design of their brand new webapp. The main tasks allocated to us were:
- Logo study & usage
- Color palette and study
- Branding application
- Website landing page
- Webapp screens and flows
- Design specifications handover for development
Allocated team for the project
Aka the coordinator in this case. This person was responsible for communicating with the client, running the kick-off workshop, doing the initial research and managing the project from start to finish – coordinating the internal team and keeping the client happy at all times. Obviously they carried out more UX specific tasks like wireframing the whole webapp, scoping the project and aligning business goals with the digital product.
UI Designer / Branding Specialist
Our senior in-house designer is also a branding expert, and for this project they had the dual task of crafting the brand’s identity and also providing the user interface design for both the website and the webapp.
The project was initiated with a kick-off workshop that defined the scope of the project and aligned all stakeholders’ interests. This helped set clear goals and expectations for the rest of the design process, and narrowed down the deliverables into tangible assets. It also helped guide the rest of the process, as it helped our branding specialist understand what the look and feel of the products should be.
First things first. We had to deal with the branding, which would set the colours, fonts and typography to be used across the Unipie products. A lot of creative thinking went into this, with our senior in-house designer delivering quickly an up-to-standard design of the vision. This was quickly approved and iterated to get its final shape, which you can see below. The client was extremely happy with the outcome and no delays occurred, which is usually expected in such work if the client does not instantly resonate with the proposed concepts.
After the initial discussions, and setting the general style guide through the branding it was time to jump into research. The research was conducted in order to see what similar solutions are out there and draw inspiration. By looking at other past successes and failures, we draw meaningful conclusions as to what works and what doesn’t in such applications. Our lead UX Designer worked on this to gather insights and to design and perfect the wireframes of all screens, which were delivered in a timely and efficient manner and approved by the client after only a few minor tweaks.
The UI phase of the project brings all the work that has been done up to this point nicely together. It gives life to the wireframes and ties into them the brand’s identity, giving character and substance to the product. Clients are usually the most excited to see the outcome of this phase, so there is a lot of weight on the shoulders of the designers. Keep in mind that this is not just about making elements look aesthetically pleasing, but also improve usability, capture the user’s attention where needed and improve the features of the final product.
Interact with the slider below to see the UX vx UI versions of the design.
The delivery of the project was done within the estimated time, which is always a good indication of efficient workflows within a design agency. The client was left satisfied with the output and moved on to carry implementation in the month after handover. During the implementation phase, Pine acted as a coordinator that oversaw the development process and made sure that the design was not compromised at any point.
Overall, these types of projects are the ones that really tickle our curiosity and creativity and allow room for us to experiment with solutions that will have an effect on the many facets of the business, from their identity on their physical space and assets to their visual design on their digital products.
You can read more about other projects that we have worked on by visiting our case studies.