Designing Instore

TOOLS
Figma
Illustrator
Photoshop
Miro
Discord
ROLES
UI Design
Research
Writing
User Interviews
TEAM
Erica Hester (Me, Team Lead)
Stephanie Epeagba
Grant Kennedy
Cole Christiansen
Roxie Cole
TIMELINE
Mar - May 2021
(8 weeks)
Project Overview
InStore is a SaaS Tool/Marketplace that helps students create stores for a service or product and market their services on a university marketplace website that only lists services/products from other students at that university. On one end, it is an easy and trusted place for students to buy services from other students, while helping educate and walk entrepreneurial students through the world of business & analytics.

This app was designed for our Capstone and Portfolio course, where we were taught the Goal-Directed Design method which focuses on users goals.
Goals
1. Create onboarding process that walks the user through creation of a store and listing services.

2. Provide shopping students with a platform to purchase products and services.

3. Teach students about each aspect of running their business by providing insights and tips.
Our Approach: Goal Directed Design
Goal-Directed Design is a process created by Alan Cooper to aid designers in solving their problems with a process that focuses on user goals. The process is split into six phases: research, modeling, requirements, framework, refinement, and support. During the Research phase, our team completed a literature review, competitive audit, and user interviews, so that we could best understand the scope of our app. We then used our findings to move on to the Modeling phase, where we drew up our personas and their expectations. After this, we moved on to requirements, which we begin to consider what our personas expect from our app. We created a context scenario  for our primary persona and used this to create a list of items we knew the app would need to satisfy their goals. Finally, we moved onto the Framework phase, where we began wireframing by walking through the key path scenario and supplementing this with validation scenarios. From here, were were able to develop our high-fidelity prototype.
Research

Kickoff

At the start of our project, we met to cement the idea and develop a general plan for us to follow moving forward. We chose to brainstorm some ideas for research materials and potential users we could interview. We also spent this time figuring out our problem and vision statement, as well as coming up with a persona hypothesis that we could use when finding interviewees for later in the process.

Literature Review & Competitive Audit

For this stage of the process, we did preliminary research to find out more about the domain and understand what the competition is offering, so we know how to stand apart. We looked into different freelancing software such as Fiverr and Upwork, and also examined other sites such as Etsy, where users can sell handmade and custom items to shoppers. This was very vital in helping us determine what kinds of questions about other software we would need to formulate for our user interviews, and also how we could begin to understand some requirements for InStore.

User Interviews

Before we could begin to conduct user interviews, we had to come up with a persona hypothesis. A persona hypothesis is an assumption of likely behavioral patterns that researchers make about a user to aid in the process of selecting individuals for user interviews.
We interviewed a total of four potential users, each with a different level of experience with freelancing and different motivations for wanting to learn more. Each interview lasted a little over a half-hour, in which we asked the users questions about their level of experience with freelancing, career plans, hopes for the future, current process for finding clients/customers, and what kinds of services or products they would be prepared to offer. Though we asked each participant from the same pool of questions, we tried to leave these questions as open-ended as possible so that we had the ability to ask relevant questions as they arose.

Cole interviewed our first participant, and Stephanie interviewed each of the other three participants, though the whole team was present for each interview. After each interview we utilized the process of affinity mapping to find distinctive characteristics of each of our interviewees. We found out that each participant had completely different motivations for wanting to learn more about business and largely had different opinions on freelancing and starting their own business. They also had pretty different opinions on what was the most important quality of a freelancing/business management tool, though all of our participants expressed their lack of understanding with the financial aspect of management. This was all information that helped us to create our personas in the modeling phase.
Modeling

Affinity Mapping

To make sure that the team was on the same page after each interview, and to learn more valuable insight into what each of us took away from the sessions with users, we chose to utilize an affinity map. After each interview, we each wrote down important notes we gathered during the session, and then we sorted them together in different categories we created together into the affinity map below and discussed what we saw in the map.
When we finished all of our interviews, we met to create a large affinity map to represent all of our users and what would be the common characteristics we would need to represent in our user personas. In the image below, each color represents a different user that we interviewed.

Persona Creation

Using all of the information we gathered from the Research phase and our affinity mapping process, we were able to draw up our primary personas. You can view the full page versions of our personas by clicking on each of the profiles below. On the full page, you'll find more about them like their persona narratives, more of their goals, and more about their attitudes and frustrations.

Context Scenario

Once our personas were finished and we had appropriate representatives for our users, we moved on to writing the context scenario. A context scenario is how we can expect our persona to use the app on a typical day in the context of their lives. We wrote the context scenario for Eilene, and to do this, we had to imagine Eilene’s life based off of the characteristics we assigned her from our research. We then used the app as an answer to her frustrations.

Requirements

After completing the context scenario, we were able to understand what Eilene would need to accomplish her goals. When putting the app in the context of Eilene’s life, we could understand the requirements it would need to have. Below are some of the requirements we extracted from the context scenario.
1. Be able to open a store
2. Needs to notify the user of transaction updates
3. Needs seller and buyer reviews
4. Needs a way to showcase skill set/experience
5. Customization of user profile
6. A way to view transaction history
7. Tips to educate the seller
8. Log in with school account
9. Marketing functionality (ex. email blasts)
10. Basic accounting/financial features
11. A way to view order history
12. Streamline way to go between buyer/seller (as a user)
13. Marketplace to buy products or services
14. Internal way to contact sellers
Framework

Once  our team established the requirements that our app would need, we moved on to wireframing. We started with developing our Key Path scenario, which is the most traveled path through our app. We used pen and paper for this part of the process, and continued onto Figma so that we would still able to collaborate while building out each screen. We started this process by individually drawing some screens from the app that would meet our requirements. We decided that this would be a good way to see what each of us were envisioning and it could keep us from groupthink that might occur if we went straight to collaboration.

After we reviewed and talked about our different drawings, we moved on to Figma to block out the screens in a low-fidelity mockup. We realized it was ideal for collaborating because we were able to put screens up very quickly and show each other what we were doing with each screen. From here, we were able to develop a more fleshed out low-fidelity prototype for testing.

Refinement: User Testing

Once we had finalized the rough draft of our designs, it was time to bring users back for feedback. We developed a usability test plan to asses our low-fidelity designs before moving on to the final design stage. Since we have two flows through our app, from the Shopper side and the Seller side, we chose to create a test that would allow us to gain insights from both sides of the app.

Seller

On the Seller side, we learned that users were having trouble finding out that we offered "tips" for service that would give the user more information. We had no icons or indication to inform the user of this.

Shopper

On the Shopper side, we learned that there was some surprising confusing between the messaging icon on the upper right, and the reviews section listed right under the store name. We knew we would have to make the meanings of each clearer.

Key Takeways

Despite the minor issues we found above, all of the four users described the application as "straightforward," and "easy to use," which helped us to know we were on the right track. With plans to make changes to our designs, we were ready to move on to our final prototyping stage, where we implemented the feedback from our users and developed branding for InStore.

Meeting our Goals: The Final Prototype

Goal One: Onboarding

Onboarding was one of the more important features of the application, because we knew that each student was coming into this experience with limited knowledge and experience with business. We didn't want to frontload this part of process and overwhelm users, so we chose to keep it very simple and limited, and let the bulk of the education happen throughout the use of the app.

Goal Two: Marketplace

We wanted to keep the marketplace very simple for the Shopper so that the work of the students would stand out, as our user testing participants complimented the simplicity of the application. The marketplace is the starting point for our Shoppers, so it should be easy to navigate and understand.

Goal Three: Business Tips

Throughout the app, the Seller can find "tips" located in various points as education tools to help them better understand the essentials of their business. This is so the Seller can educate themselves on different aspects of business as they are running theirs.

View Full Prototype Here
Takeaways
I feel really fortunate to work with the team I had for this project, as I felt we worked really well together and were able to create a really awesome project! This was the first project I have worked on where I led a team, and it was really rewarding to have worked on InStore and see my idea come to life. We ran into a lot of issues with delayed IRB approval, and having to completely abandon our original project, but I still feel as though we worked really hard and were able to design a great app.

If I were to develop this project further, I would love to do more research on business fundamentals and what entry-level entrepreneurs should know when getting into freelancing or starting a business. I feel like that would help us to create a more fleshed out app, and allow for more of the educational side of the software to shine through.

More of my work: