After working on creating a mobile app from scratch, I decided to write about the UX design process as taught by Lambda School. As part of my second build week project, my task was to design a rental app for users to rent technology products.
The MVP
The MVP was to create a mobile app called Use My Tech Stuff. The app would allow users can log in and create a profile. They can then set up items they have for rent such as cameras, TVs, Party equipment like speakers/fog machines etc. Users will be able to Create, Read, Update and Delete rental data. A 2nd user can log in and see items that users have for rent and ask to rent an item. No payment processing necessary for MVP.
The Design Process
The design process consists of various steps that ensure an app is designed in the most user-friendly way. I’ll go on to explain the steps I took to achieve the final product — a mobile app.
Research Planning & Contextual Research
Known as the “Discovery” phase of the design process, research planning and contextual research go hand in hand. Research planning involves creating a list of questions that need answers and creating a research plan by defining assumptions and hypotheses. Contextual research involves recording an interview with potential users, collecting informed consent from research participants and using the responses to make informed decisions about the product being created.
It’s important to know why you are designing an app and for whom. Questions such as the ones below help UX designers better understand what they are creating and why.
- Why would people use this app?
- Who is the intended target audience?
- What kinds of tech products do people use most?
The very first part of the design process was coming up with an interview script and interviewees. I created a Google Form survey to send out to a few contacts so that I can understand what kinds of people would actually be interested in a rental tech app.
Here’s the email I sent out
Dear,
Thank you for your interest in partaking in this survey. Most people are avid users of technology products. For this reason, we are interested in learning more about the kinds of technological products people use. As part of our efforts, we want to learn more about the tech products people use and whether or not they are open to sharing tech products which they own with others. This short questionnaire will allow us to understand the ways technological products can influence businesses and customer usage.
Thank you for participating!
After gathering information on users, I created a user persona as an example of a real-life person who would use the app.
Create a User Persona
I created a user persona template using Sketch. For my persona, I wanted to depict an individual who works in an industry that requires them to use high-end tech products. I chose the person to be a DJ because DJs require music products to perform. From my research, I came to know that millennials are the age group that uses technology the most which are how I determined the age for the individual. I highlighted some of the frustrations music creators faces which include affording the music equipment. My research showed that DJ gear can cost up to $2000 at a minimum. This does not include the software used to record music. With an app like Use My Tech Stuff, people will be able to rent high-end tech products such as music equipment so that they can perform better at their jobs. I researched the attributes and goals of DJs and most forums explained that the main focus of DJs is to create exciting music which is only possible if they have the right DJ gear. Hence, I made my persona revolve around their passion for music and their wish to be able to use affordable technology to create music.
Create a Customer Journey Map
Now that I know what kinds of people would use this app I was required to write a detailed walkthrough that explains to stakeholders the reason behind the customer journey map and the high-level discoveries made during my user research. The journey map details the steps a user would take when interacting with the app, as well as their thoughts and insights while using different features of the app.
My customer journey map details the journey of a DJ who is looking to rent DJ equipment. Since DJ equipment is costly, Mike has turned to Use My Tech Stuff in hopes of finding the correct equipment.
Information Architect
It’s time to start designing! Once you’ve done due diligence to the research component and have figured out the kinds of users you are designing for the actual process of designing begins.
When I hear the word architecture I immediately think of “building.” In terms of UX design, I understand that information architecture means to build sitemaps and/or blueprints that will help create a finished product. I find this method highly effective because brainstorming has always been a top priority for me. Whether I am writing or creating a design, I always feel that it’s necessary to brainstorm. Information architecture allows me to brainstorm the ways I can organize content. It also allows me to draw relationships between different categories and in result, enables me to look at my project from various angles.
During this process, I also created user flows. Creating a user flow really helped me expand on my thought process. I found it extremely helpful to brainstorm what each functionality of my app would accomplish. The more I created the user flow charts, I kept coming up with additional things to add. I focused mostly on creating a detailed user flow for renting an item. I want this process to be as smooth as possible for a user so they come back and rent from us in the future as well. First, I wrote down the main aspects of renting an item on a piece of paper. I then created a board on Milanote and began connecting the dots. I didn’t focus too much on the design of the user flow but rather focused on making sure the content was there.
Group Creativity Workshops
Part of the project was collaborating with a team to receive insights about your app. The group creativity workshop allowed me to reflect on how to organize content on the app. I received insights on why specific categories are more significant than others. Collaborating with a team allows for a greater product to be designed. It was extremely beneficial to have teammates feel comfortable passing on advice and critiquing the project.
Ideation & Lo-Fidelity Sketching
Sketching using the crazy 8 methods was definitely a challenge. However, I have been thinking about my web design so the ideas came flowing while I was sketching. I felt this method was a bit difficult, especially because I am detail-oriented and couldn’t really incorporate all the details I wished. But for some reason, I also found this method to be effective in terms of focusing on what you feel is most important. There are components I know for sure that I will have to include in the homepage so I made sure to just focus on how I would arrange those. I didn’t worry about what the specifications of each section were but rather focused on how to organize the content on the page.
The second part of the project required focusing on a specific part of the app. I chose to depict the “create profile” form followed by what the page would look like once a user has created a profile. I also sketched the page for lending an item and included a form that users would fill. Lastly, I added a page that would show how an item would be advertised to someone who wants to rent.
I definitely feel this exercise has give me a clear idea of how to start designing the MVP. I’ll recreate these designs on Sketch so I have a better visual of how to go on with the designing process.
Wireframing
I created low fidelity wireframes for the screens I wanted to showcase on the app. I started off with organizing the rectangles on Sketch. Since this was a low fidelity design I only focused on structuring the content in the artboard rather than including colour or other extra effects. Wireframing definitely helped me visually see what content I would be sharing and which features may not be that important.
Sitemap
The sitemap shows the flow of screens when a user navigates through the app. The end goal is for users to see their item listed as an option to rent.
High-Fidelity Wire-frames and Prototyping
Before I go on to explain the design system, I want to share the end product. Here’s the link to the prototype of the Use My Tech Stuff app. Now, I’ll go on to explain why I chose the specific design system.
Design System
I had the most fun creating a design system because this is the part where you actually see your app come to life. Selecting fonts and colours for your app is a tidy process but it makes you feel like you’re one step closer to completion.
Below are the specifications of the design system and why I chose them.
Colour Palette
The colour orange catches the attention of millennials or youngsters (our target users). It also communicates that something is affordable which depicts the mission of UMTS : providing tech products for an affordable rental rate. Research shows that green improves reading ability which is a plus point because there is a lot of content to read in the app — especially forms that users will have to fill. The most used colors: #E96E0A, #086A27, E3E4E8.
Typography
I chose this font because it looks neat on the screen. The characters are minimal in design and portray a traditional style which is exactly what I was looking for. Seeing this font on the app will make readability easy for users. For the buttons, I used Avenir font because I wanted the button font to be distinguishable from everything else.
In conclusion, my second build week at Lambda school was both tough and informative. Creating a high fidelity prototype and then collaborating with web developers to make a responsive version taught me SO many things. I learned that team collaborations are most productive when everyone communicates. I also learned that being vocal about your opinions about a specific aspect of the design is important because it allows you to feel confident about what you’ve created and share its importance with others. Moreover, the feedback I received in this build week will help me create awesome designs in the future. So, all in all, the UX design process is quiet tidy but definitely rewarding in the end — especially when you see your design come together!
