UX/UI design | Mobile | Newsletter/Blog concept App
Date: March 2024
Software | Service used: Adobe XD, Illustrator, Photoshop, Google Docs, Google Meets, Gmail.
Designers: Sinead Sin (Skylyn), Sheldon Gifford and myself, Rina De Vuono.
Overview
In this project, I was collaborating remotely with 2 other designers on the design of the UI and UX of a mobile App and creating the prototype. We had 15 screens in the prototype along with the app style guide, component library, and UI elements. The focus of my role was on research and UI/UX design.
App concept
Posit is an App for people to connect with each other by sharing their stories, points of view and experiences in a written format. If you have something to say and want to share it with the world, Postit, is quick and easy. You can create a beautiful blog full of your articles, be followed by avid readers and create real connections with like-minded people. Other than sharing your ideas, you can find relevant information and different points of view on various topics from different people, all in one place.
Project rationale
During the development of this project, I had the pleasure to work with 2 other talented designers. As we didn’t previously know each other, the first thing we decided was to share a couple of files with our previous work, so we could familiarize ourselves with each other's style. We also shared what were our design strengths and what design weaknesses we would like to improve upon.
After that, we discussed what type of App we would like to create. We focused on themes/industries that we were all familiar with, and in the end, we decided to create an App with a social component, focused on sharing articles/blogs on different subjects.
Having the theme decided, we proceeded to research similar Apps and based on our findings, we discussed what screens the prototype would include. We wanted to develop a prototype that would showcase the main features of the App to convey our concept, but due to time and resource restrictions, we knew that we could only develop a partially functional prototype.
We decided to include the following features in the App prototype:
- Specialized content/user-published articles (categories)
- Community forums (comments, ratings)
- Creation of a new post/article
- Search feature: for articles and users/creators.
- Manage the user’s account.
- User Login
- User Profiles
We divided the design and creation of the App features by screens as follows:
We worked on the same XD file for the mock-up and prototype of our respective screens, and a shared Google Doc for our research and the documentation of the project, in our own time and as a group during the meetings, communicating mainly through email and during our weekly scheduled virtual meeting.
Project goals
- Collaborate in designing and developing the prototype of the mobile App.
- Achieve a harmonious design while working remotely within a team.
- Develop components for the App.
- Create the App’s Style Guide.
- Create a partially functional prototype.
Design process
From the project brief and the App concept previously explained, we decided to work on the wireframes for our assigned screens independently. From all the wireframes, we then, pick and chose the style and assets we preferred as a team and proceeded to create the mock-up of the App on our shared XD file.
Wireframes
During the wireframe creation, we also defined that the App was going to have a modern and minimalistic aesthetic, with mainly neutral colours and some pops of colour, as we wanted the content of the articles to be the focus. At this stage, I created a basic Style guide with our initial choices.
While creating the mock-up screens, we made a few changes to the layouts, in order to simplify them. I also decided to create new screens to complete the flow when a user creates a new post/article (Added camera mockup, post with image, draft list, and draft post) screens. I also added one additional screen for the users to search for other creators in the App.
User Flow
Creating the User Flow allowed us to be certain about which screens we needed to create to make the Prototype partially functional for the features we wanted to test, without leaving the user trap during the test stage.
User flow | User logged In
User flow | User logged OUT
Conclusion and reflection
Overall, I considered this project’s outcome to be a success, as we met the project’s goals, were able to collaborate as a remote design team and produced a working sample of the Postit’s App prototype. As a team, we were aware of our deadline and the Minimum Viable Product that we needed to deliver. We worked with our time and shared resource constraints, making quick decisions as a team and adjusting our design, as needed.
One thing that I would change in the next project would be in communication tools, I found that communicating via email with a remote team was too slow for my preference, so for my next team project, I would suggest using an instant message app like Slack/Whatsapp/Discord/Telegram/Signal. A positive outcome of using email was that our ideas were more elaborated than when you use instant messages and most of our decisions were documented on a single email thread, so it was easier to review them.
Takeaways
Having a clear shared vision of the end product is very important in group projects, so the whole team is working towards the same end in an efficient way.
- Dedicating a good amount of time to the planning phase greatly helps to arrive at a successful outcome.
- Assigning specific tasks/design areas to each team member helps to arrive faster at the end product if the planning phase is done properly.
- Knowing your team's strengths and weaknesses helps in allocating tasks to the correct person.
- Creating a mood board for styling/aesthetics would have helped to convey the feeling and look to the whole team.
- Creating the User Flow first would have helped to clarify the screens that we needed to design from the beginning.
- Creating the Style guide and the components before making the mock-up screens, would have saved time and effort.
Thank you for reading through my project, I hope you found this insightful in my design process and workflow, please reach out to me if you would like to work together.
